Blitz - WPT: dimensions-012-print.html

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

/css/css-page/margin-boxes/dimensions-012-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="Margins around margin boxes.">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<link rel="match" href="dimensions-012-print-ref.html">
<style>
  :root {
    print-color-adjust: exact;
  }
  @page {
    margin: 4em 5em 8em 7em;
    width: 20em;
    height: 16em;
    font: 16px/1 Ahem;
    white-space: pre-wrap;

    @top-left-corner {
      vertical-align: top;
      text-align: left;
      margin: auto;
      width: fit-content;
      height: fit-content;
      content: "x x\a\a0x\ax x";
      background: pink;
    }

    /* Top-left has a min content width of 3em. Top-right has an inner min
       content width of 2em. Additionally, it has 25% margins on each side. In
       the horizontal direction that means 20em*0.25 = 5em on each side. Outer
       min content width for top-right becomes 12em.

       Available space is 20em. Unused space is 5em. Total flex is 15. Left flex
       is 3. Right flex is 12.

       Left outer width: 3em + 5em*3/15 = 4em
       Right outer width: 12em + 5em*12/15 = 16em */
    @top-left {
      vertical-align: top;
      text-align: left;
      content: "xxx";
      background: hotpink;
    }
    @top-right {
      vertical-align: top;
      text-align: left;
      margin: 25%;
      content: "xx";
      background: yellow;
    }

    /* Right-top has an inner min content height of 2em. It's margin-top is 1em,
       so the outer min content height becomes 3em. Right-bottom has an inner
       min content height of 1em. Additionally, it has 25% margins on each side.
       In the vertical direction that means 16em*0.25 = 4em on each side. Outer
       min content height for right-bottom becomes 9em.

       Available space is 16em. Unused space is 4em. Total flex is 12. Top flex
       is 3. Bottom flex is 9.

       Top outer height: 3em + 4em*3/12 = 4em
       Bottom outer height: 9em + 4em*9/12 = 12em */
    @right-top {
      vertical-align: top;
      text-align: left;
      margin-top: 1em;
      content: "x\ax";
      background: hotpink;
    }
    @right-bottom {
      vertical-align: top;
      text-align: left;
      margin: 25%;
      content: "x";
      background: yellow;
    }
  }

  body {
    background: blue;
  }
</style>

/css/css-page/margin-boxes/dimensions-012-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: 7em auto 5em;
    grid-template-rows: 4em auto 8em;
    height: 100vh;
  }
  .vertical-edge {
    display: flex;
  }
  .horizontal-edge {
    display: flex;
    flex-flow: column;
  }
</style>
<div class="grid">
  <div class="corner" style="margin-top:0.5em; margin-left:2em; width:3em; height:3em; background:pink;">
    x x<br>
    &nbsp;x<br>
    x x<br>
  </div>
  <div class="vertical-edge">
    <div style="width:4em; background:hotpink;">xxx</div>
    <div style="margin-left:5em; margin-top:1em; margin-bottom:1em; width:6em; background:yellow;">xx</div>
  </div>
  <div class="corner"></div>
  <div class="horizontal-edge"></div>
  <div style="background:blue;"></div>
  <div class="horizontal-edge">
    <div style="margin-top:1em; height:3em; background:hotpink;">x<br>x</div>
    <div style="margin-left:1.25em; margin-top:4em; width:2.5em; height:4em; background:yellow;">x</div>
  </div>
  <div class="corner"></div>
  <div class="vertical-edge">
  </div>
  <div class="corner"></div>
</div>