Blitz - WPT: dimensions-006-print.html

wpt / css / css-page / margin-boxes / dimensions-006-print.html

/css/css-page/margin-boxes/dimensions-006-print.html

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-page-3/#margin-dimension">
<meta name="assert" content="Test auto lengths. Max content sizes are larger than available size, but their min sizes are not. No center boxes.">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="dimensions-006-print-ref.html">
<style>
  :root {
    print-color-adjust: exact;
  }
  @page {
    margin: 6em;
    width: 20em;
    height: 15em;
    font: 16px/1 Ahem;

    /* Left min: 4em
       Left max: 17em
       Right min: 2em
       Right max: 5em
       Min total: 4em + 2em = 6em
       Max total: 17em + 5em = 22em

       Max content sizes are larger than available size. Min content sizes are
       smaller. Start at min size, and distribute extra space proportionally to
       the difference between max and min.

       Left flex (max - min): 13
       Right flex (max - min): 3
       Flex total: 16
       Available space: 20em
       Unused space: 20em - 6em = 14em

       Width of left box: 4em + 14em * 13/16 = 15.375em
       Width of right box: 2em + 14em * 3/16 = 4.625em */
    @top-left {
      text-align: left;
      vertical-align: top;
      margin-bottom: 3em;
      content: "xxx xx xx xx xxxx";
      background: hotpink;
    }
    @top-right {
      text-align: left;
      vertical-align: top;
      margin-top: 3em;
      content: "xx xx";
      background: yellow;
    }

    /* Top min: 4em
       Top max: 13em
       Bottom min: 2em
       Bottom max: 5em
       Min total: 4em + 2em = 6em
       Max total: 13em + 5em = 18em

       Max content sizes are larger than available size. Min content sizes are
       smaller. Start at min size, and distribute extra space proportionally to
       the difference between max and min.

       Top flex (max - min): 9
       Bottom flex (max - min): 3
       Flex total: 12
       Available space: 15em
       Unused space: 15em - 6em = 9em

       Height of top box: 4em + 9em * 9/12 = 10.75em
       Height of bottom box: 2em + 9em * 3/12 = 4.25em */
    @left-top {
      text-align: left;
      vertical-align: top;
      writing-mode: vertical-rl;
      content: "xxx x xx xxxx";
      background: yellow;
    }
    @left-bottom {
      text-align: left;
      vertical-align: top;
      writing-mode: vertical-rl;
      content: "xx xx";
      background: hotpink;
    }

    /* Top min: 6em
       Top max: 30em
       Bottom min: 2em
       Bottom max: 34em
       Min total: 6em + 2em = 8em
       Max total: 30em + 34em = 64em

       Max content sizes are larger than available size. Min content sizes are
       smaller. Start at min size, and distribute extra space proportionally to
       the difference between max and min.

       Top flex (max - min): 24
       Bottom flex (max - min): 32
       Flex total: 56
       Available space: 15em
       Unused space: 15em - 8em = 7em

       Height of top box: 6em + 7em * 24/56 = 9em
       Height of bottom box: 2em + 7em * 32/56 = 6em */
    @right-top {
      text-align: left;
      vertical-align: top;
      writing-mode: vertical-rl;
      content: "x x xxxxxx x x x x x x x x x x";
      background: hotpink;
    }
    @right-bottom {
      text-align: left;
      vertical-align: top;
      writing-mode: vertical-rl;
      content: "x x x x x x x x x x x x x x x x xx";
      background: yellow;
    }

    /* Left min: 6em
       Left max: 34em
       Right min: 2em
       Right max: 38em
       Min total: 6em + 2em = 8em
       Max total: 34em + 38em = 72em

       Max content sizes are larger than available size. Min content sizes are
       smaller. Start at min size, and distribute extra space proportionally to
       the difference between max and min.

       Left flex (max - min): 28
       Right flex (max - min): 36
       Flex total: 64
       Available space: 20em
       Unused space: 20em - 8em = 12em

       Width of left box: 6em + 12em * 28/64 = 11.25em
       Width of right box: 2em + 12em * 36/64 = 8.75em */
    @bottom-left {
      text-align: left;
      vertical-align: top;
      margin-top: 1em;
      content: "x x xxxxxx x x x x x x x x x x x x";
      background: yellow;
    }
    @bottom-right {
      text-align: left;
      vertical-align: top;
      content: "x x x x x x x x x x x x x x x x x x xx";
      background: hotpink;
    }
</style>

/css/css-page/margin-boxes/dimensions-006-print-ref.html

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
  :root {
    print-color-adjust: exact;
    font: 16px/1 Ahem;
  }
  @page {
    margin: 0;
    width: 32em;
    height: 27em;
  }
  body {
    display: grid;
    grid-template-columns: 6em auto 6em;
    grid-template-rows: 6em auto 6em;
    height: 100vh;
    margin: 0;
  }
  .vertical-edge {
    display: flex;
  }
  .horizontal-edge {
    display: flex;
    flex-flow: column;
  }
</style>
<div class="corner"></div>
<div class="vertical-edge">
  <div style="width:15.375em; margin-bottom:3em; background:hotpink;">xxx xx xx xx xxxx</div>
  <div style="width:4.625em; margin-top:3em; background:yellow;">xx xx</div>
</div>
<div class="corner"></div>
<div class="horizontal-edge">
  <div style="writing-mode:vertical-rl; height:10.75em; background:yellow;">xxx x xx xxxx</div>
  <div style="writing-mode:vertical-rl; height:4.25em; background:hotpink;">xx xx</div>
</div>
<div></div>
<div class="horizontal-edge">
  <div style="writing-mode:vertical-rl; height:9em; background:hotpink;">x x xxxxxx x x x x x x x x x x</div>
  <div style="writing-mode:vertical-rl; height:6em; background:yellow;">x x x x x x x x x x x x x x x x xx</div>
</div>
<div class="corner"></div>
<div class="vertical-edge">
  <div style="width:11.25em; margin-top:1em; background:yellow;">x x xxxxxx x x x x x x x x x x x x</div>
  <div style="width:8.75em; background:hotpink;">x x x x x x x x x x x x x x x x x x xx</div>
</div>
<div class="corner"></div>