Blitz - WPT: page-box-009-print.html

wpt / css / css-page / page-box-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/#page-properties">
<link rel="match" href="page-box-009-print-ref.html">
<meta name="assert" content="Test percentage-based @page margin/padding, orthogonal writing mode">
<style>
  @page {
    writing-mode: vertical-rl;
    size: 400px 800px;
    margin-inline-start: 2%;
    margin-block-start: 8%;
    margin-inline-end: 6%;
    margin-block-end: 20%;
    padding-inline-start: 2%;
    padding-block-start: 8%;
    padding-inline-end: 6%;
    padding-block-end: 20%;
    background: blue;
  }
  :root {
    print-color-adjust: exact;
  }
  body {
    margin: 0;
    background: hotpink;
  }
</style>
<div style="box-sizing:border-box; padding:4px; height:100vh; background:yellow;">
  This document should be in horizontal-tb writing mode.<br>
  The page padding (in hotpink) and margins (in blue) should be identical.  They
  should be smallest at the top, larger at the right, even larger at the bottom,
  and largest at the left.
</div>

/css/css-page/page-box-009-print-ref.html

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
  @page {
    size: 400px 800px;
    margin: 0;
  }
  :root {
    print-color-adjust: exact;
  }
  body {
    margin: 0;
  }
</style>
<div style="box-sizing:border-box; height:800px; border:solid blue; border-width:16px 32px 48px 80px;">
  <div style="box-sizing:border-box; height:736px; border:solid hotpink; background:yellow; border-width:16px 32px 48px 80px; padding:4px;">
    This document should be in horizontal-tb writing mode.<br>
    The page padding (in hotpink) and margins (in blue) should be identical.
    They should be smallest at the top, larger at the right, even larger at the
    bottom, and largest at the left.
  </div>
</div>