Blitz - WPT: dimensions-005-print.html

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

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

    /* In order to preserve centering of a center/middle box, pretend that the
       space distributed to left/top and right/bottom combined will be twice the
       size of the one that needs the most size (this is called the AC box).
       Then resolve center/middle by giving it the rest. Then the boxes on the
       sides receive equal shares of AC. */

    /* Min/max width for top-left is 3em. For top-center it is 2em. For
       top-right it is 2em. Available space is 20em. Left is larger than right.
       Double it to 6em and call this the AC box. Unused space becomes 12em
       (20em minus center max width and double left box max width). Unused space
       will be distributed proportionally between AC and the center box, based
       on max widths. AC gets 6/8, center gets 2/8. AC becomes
       6em+12em*6/8 = 15em. Center becomes 2em+12em*2/8 = 5em. Left and right
       each receive half of what's left after having resolved for center,
       i.e. (20em-5em)/2 = 7.5em. */
    @top-left {
      text-align: left;
      vertical-align: top;
      margin-bottom: 4em;
      content: "xxx";
      background: hotpink;
    }
    @top-center {
      text-align: left;
      vertical-align: top;
      margin-top: 2em;
      margin-bottom: 2em;
      content: "xx";
      background: cyan;
    }
    @top-right {
      text-align: left;
      vertical-align: top;
      margin-top: 4em;
      content: "xx";
      background: yellow;
    }

    /* This is the same as for the top edge, except that available space is less.
       It is 15em here. Unused space then becomes 7em (15em minus center max
       height and double top box max height). AC becomes 6em+7em*6/8 = 11.25em.
       Center becomes 2em+7em*2/8 = 3.75em. Top and bottom each become
       11.25em / 2 = 5.625em. */
    @right-top {
      text-align: left;
      vertical-align: top;
      margin-right: 4em;
      content: "x\ax\ax";
      background: hotpink;
    }
    @right-middle {
      text-align: left;
      vertical-align: top;
      margin-left: 2em;
      margin-right: 2em;
      content: "x\ax";
      background: cyan;
    }
    @right-bottom {
      text-align: left;
      vertical-align: top;
      margin-left: 4em;
      content: "x\ax";
      background: yellow;
    }
  }
</style>

/css/css-page/margin-boxes/dimensions-005-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:7.5em; margin-bottom:4em; background:hotpink;">xxx</div>
  <div style="width:5em; margin-top:2em; margin-bottom:2em; background:cyan;">xx</div>
  <div style="width:7.5em; margin-top:4em; background:yellow;">xx</div>
</div>
<div class="corner"></div>
<div class="horizontal-edge"></div>
<div></div>
<div class="horizontal-edge">
  <div style="height:5.625em; margin-right:4em; background:hotpink;">x<br>x<br>x</div>
  <div style="height:3.75em; margin-left:2em; margin-right:2em; background:cyan;">x<br>x</div>
  <div style="height:5.625em; margin-left:4em; background:yellow;">x<br>x</div>
</div>