Blitz - WPT: dimensions-011-print.html

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

/css/css-page/margin-boxes/dimensions-011-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="Auto center/middle, one auto side, one non-auto side.">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="dimensions-011-print-ref.html">
<style>
  :root {
    print-color-adjust: exact;
  }
  @page {
    margin: 6em;
    width: 20em;
    height: 16em;
    font: 16px/1 Ahem;
    white-space: pre-wrap;

    /* The fixed-size right box is larger (4em) than left (even if stretched by
       additional space). The left box will get this much space reserved too,
       leaving 12em (20em - 2*4em) for center. */
    @top-left {
      vertical-align: top;
      text-align: left;
      content: "x";
      margin-top: 20px;
      margin-bottom: auto;
      height: max-content;
      background: hotpink;
    }
    @top-center {
      vertical-align: top;
      text-align: left;
      margin-top: 40px;
      margin-bottom: auto;
      height: max-content;
      content: "xxxxx";
      background: cyan;
    }
    @top-right {
      vertical-align: top;
      text-align: left;
      margin-top: 60px;
      margin-bottom: auto;
      height: max-content;
      content: "x";
      width: 4em;
      background: yellow;
    }

    /* The auto-sized left box is larger than fixed-size right. Since available
       space is 20em, and the double of left plus center is less than that,
       unused space (4em) needs to be distributed.

       Double min content width for left is 2*6em = 12em.
       Min content width for center is 4em.
       Unused space becomes 20em - (12em + 4em) = 4em.
       Total flex is 12+4=16. Double left flex is 12, center flex is 4.

       Double left width: 12em + 4em * 12/16 = 15em
       Center width: 4em + 4em * 4 / 16 = 5em.

       Left width: 15em / 2 = 7.5em
       Right width will be kept as-is, since it's fixed. */
    @bottom-left {
      vertical-align: top;
      text-align: left;
      content: "xxxxxx";
      margin-top: 20px;
      margin-bottom: auto;
      height: max-content;
      background: yellow;
    }
    @bottom-center {
      vertical-align: top;
      text-align: left;
      margin-top: 40px;
      margin-bottom: auto;
      height: max-content;
      content: "xxxx";
      background: cyan;
    }
    @bottom-right {
      vertical-align: top;
      text-align: left;
      margin-top: 60px;
      margin-bottom: auto;
      height: max-content;
      content: "x";
      width: 2em;
      background: hotpink;
    }
  }
</style>

/css/css-page/margin-boxes/dimensions-011-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 {
    size: 32em 28em;
    margin: 0;
  }
  body {
    margin: 0;
  }
  .grid {
    display: grid;
    grid-template-columns: 6em auto 6em;
    grid-template-rows: 6em auto 6em;
    height: 100vh;
  }
  .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="margin-top:20px; margin-bottom:auto; width:4em; background:hotpink;">x</div>
    <div style="margin-top:40px; margin-bottom:auto; width:12em; background:cyan;">xxxxx</div>
    <div style="margin-top:60px; margin-bottom:auto; width:4em; background:yellow;">x</div>
  </div>
  <div class="corner"></div>
  <div class="horizontal-edge"></div>
  <div></div>
  <div class="horizontal-edge"></div>
  <div class="corner"></div>
  <div class="vertical-edge">
    <div style="margin-top:20px; margin-bottom:auto; width:7.5em; background:yellow;">xxxxxx</div>
    <div style="margin-top:40px; margin-bottom:auto; width:5em; background:cyan;">xxxx</div>
    <div style="margin-top:60px; margin-bottom:auto; margin-left: auto; width:2em; background:hotpink;">x</div>
  </div>
  <div class="corner"></div>
</div>