Blitz - WPT: dimensions-007-print.html

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

/css/css-page/margin-boxes/dimensions-007-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. With center boxes.">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="dimensions-007-print-ref.html">
<style>
  :root {
    print-color-adjust: exact;
  }
  @page {
    margin: 12em 6em;
    width: 20em;
    height: 3em;
    font: 16px/1 Ahem;

    /* Left min: 1em
       Left max: 9em
       Center min: 1em
       Center max: 17em
       Right min: 1em
       Right max: 3em
       Min total: 1em + 1em + 1em = 3em
       Max total: 9em + 17em + 3em = 29em

       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.

       First resolve the width of center, by evaluating how much space the
       double of each side box would take up. Pick the larger (to preserve
       centering), and subtract that from available space.

       Available space: 20em
       Center flex: 17em - 1em = 16

       Left double min: 1em * 2 = 2em
       Left double flex (max - min): (9em-1em)*2 = 16
       Total flex left double + center: 16 + 16 = 32
       Unused space with double left: 20em - (2em + 1em) = 17em
       Width of double left: 2em + 17em * 16 / 32 = 10.5em

       Right double min: 1em * 2 = 2em
       Right double flex (max - min): (3em-1em)*2 = 4
       Total flex right double + center: 4 + 16 = 20
       Unused space with double right: 20em - (2em + 1em) = 17em
       Width of double right: 2em + 17em * 4 / 20 = 5.4em

       Width of double left (10.5em) is larger than width of double right
       (5.4em). Pick this one and resolve center, by using those flex values.
       Width of center: 1em + 17em * 16/32 = 9.5em.

       Now give the rest in equal parts to left and right:
       (20em - 9.5em) / 2 = 5.25em */
    @top-left {
      text-align: left;
      vertical-align: top;
      margin-bottom: 2em;
      height: 10em;
      content: "x x x x x";
      background: hotpink;
    }
    @top-center {
      text-align: left;
      vertical-align: top;
      margin-bottom: 1em;
      height: 10em;
      content: "x x x x x x x x x";
      background: cyan;
    }
    @top-right {
      text-align: left;
      vertical-align: top;
      height: 10em;
      content: "x x";
      background: yellow;
    }

    /* Left min: 3em
       Left max: 51em
       Center min: 4em
       Center max: 36em
       Right min: 7em
       Right max: 23em
       Min total: 3em + 4em + 7em = 14em
       Max total: 51em + 36em + 23em = 110em

       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.

       First resolve the width of center, by evaluating how much space the
       double of each side box would take up. Pick the larger (to preserve
       centering), and subtract that from available space.

       Available space: 20em
       Center flex: 36em - 4em = 32

       Left double min: 3em * 2 = 6em
       Left double flex (max - min): (51em-3em)*2 = 96
       Total flex left double + center: 96 + 32 = 128
       Unused space with double left: 20em - (6em + 4em) = 10em
       Width of double left: 6em + 10em * 96 / 128 = 13.5em

       Right double min: 7em * 2 = 14em
       Right double flex (max - min): (23em-7em)*2 = 32
       Total flex right double + center: 32 + 32 = 64
       Unused space with double right: 20em - (14em + 4em) = 2em
       Width of double right: 14em + 2em * 32 / 64 = 15em

       Width of double right (15em) is larger than width of double left (13.5em).
       Pick this one and resolve center, by using those flex values.
       Width of center: 4em + 2em * 32/64 = 5em.

       Now give the rest in equal parts to left and right:
       (20em - 5em) / 2 = 7.5em */
    @bottom-left {
      text-align: left;
      vertical-align: top;
      margin-top: 2em;
      height: 10em;
      content: "x xx x xxx xx xx xx xx xx xx xx x xx xx xx xx xxx x";
      background: yellow;
    }
    @bottom-center {
      text-align: left;
      vertical-align: top;
      margin-top: 1em;
      height: 10em;
      content: "x x xxxx xxxx xxxx xx x x xxx xx xxx";
      background: cyan;
    }
    @bottom-right {
      text-align: left;
      vertical-align: top;
      height: 10em;
      content: "x x x x x xxxxxxx x x x";
      background: hotpink;
    }
</style>

/css/css-page/margin-boxes/dimensions-007-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: 12em auto 12em;
    height: 100vh;
    margin: 0;
  }
  .vertical-edge {
    display: flex;
  }
</style>
<div class="corner"></div>
<div class="vertical-edge">
  <div style="width:5.25em; height:10em; background:hotpink;">
    x x x x x
  </div>
  <div style="width:9.5em; margin-top:1em; height:10em; background:cyan;">
    x x x x x x x x x
  </div>
  <div style="width:5.25em; margin-top:2em; height:10em; background:yellow;">
    x x
  </div>
</div>
<div class="corner"></div>
<div class="horizontal-edge"></div>
<div></div>
<div></div>
<div class="corner"></div>
<div class="vertical-edge">
  <div style="width:7.5em; margin-top:2em; height:10em; background:yellow;">
    x xx x xxx xx xx xx xx xx xx xx x xx xx xx xx xxx x
  </div>
  <div style="width:5em; margin-top:1em; height:10em; background:cyan;">
    x x xxxx xxxx xxxx xx x x xxx xx xxx
  </div>
  <div style="width:7.5em; height:10em; background:hotpink;">
    x x x x x xxxxxxx x x x
  </div>
</div>
<div class="corner"></div>