Blitz - WPT: dimensions-009-print.html

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

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

    /* Total min content size is larger than available size. Shrink
       proportionally to min sizes. Note that max content sizes don't affect
       sizing in this mode.

       Left margin box min: 18em
       Center margin box min: 12em
       Right margin box min: 6em
       Flex will be the same as 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: 12 (like min)

       Left double min (and flex factor): 18em * 2 = 36em
       Total flex left double + center: 36 + 12 = 48
       Unused space with double left: 20em - 36em - 12em = -28em
       Width of double left: 36em + (-28em) * 36 / 48 = 15em

       Right double min (and flex factor): 6em * 2 = 12em
       Total flex right double + center: 12 + 12 = 24
       Unused space with double right: 20em - 12em - 12em = -4em
       Width of double right: 12em + (-4em) * 12 / 24 = 10em

       Width of double left (15em) is larger than width of double right
       (10em). Pick this one and resolve center, by using those flex values.
       Width of center: 12em + (-28em) * 12 / 48 = 5em.
       Left and right will share the rest, i.e. 7.5em on each.*/

    @top-left {
      text-align: left;
      vertical-align: top;
      content: "xxxxxxxxxxxxxxxxxx xxxxxxx";
      margin-bottom: 4em;
      background: hotpink;
    }
    @top-center {
      text-align: left;
      vertical-align: top;
      margin-top: 2em;
      margin-bottom: 2em;
      content: "xxxxxxxxxxxx";
      background: cyan;
    }
    @top-right {
      text-align: left;
      vertical-align: top;
      margin-top: 4em;
      content: "xxxxxx";
      background: yellow;
    }
  }
</style>

/css/css-page/margin-boxes/dimensions-009-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: 28em;
  }
  body {
    margin: 0;
  }
  .grid {
    display: grid;
    grid-template-columns: 6em auto 6em;
    grid-template-rows: 6em auto 6em;
    height: 100vh;
    overflow: clip;
  }
  .vertical-edge {
    display: flex;
  }
  .horizontal-edge {
    display: flex;
    flex-flow: column;
  }
</style>
<div class="grid">
  <div class="corner"></div>
  <div class="vertical-edge">
    <div style="width:7.5em; margin-bottom:4em; background:hotpink;">
      xxxxxxxxxxxxxxxxxx xxxxxxx
    </div>
    <div style="width:5em; margin-top:2em; margin-bottom:2em; background:cyan;">
     xxxxxxxxxxxx
    </div>
    <div style="width:7.5em; margin-top:4em; background:yellow;">
     xxxxxx
    </div>
  </div>
</div>