Blitz - WPT: safe-printable-inset-002-print.html

wpt / css / css-page / tentative / safe-printable-inset-002-print.html

/css/css-page/tentative/safe-printable-inset-002-print.html

<!DOCTYPE html>
<title>page-margin-safety: clamp</title>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/13190/files">
<link rel="match" href="safe-printable-inset-002-print-ref.html">
<meta name="safe-printable-inset" content="1.27">
<style>
  @page {
    margin: 0;
    margin-top: 70px;
    margin-right: 70px;
    page-margin-safety: clamp;
  }
  :root {
    print-color-adjust: exact;
  }
  body {
    background: yellow;
  }
</style>
There should be a white margin around this page. It should be larger on the top
and on the right.

/css/css-page/tentative/safe-printable-inset-002-print-ref.html

<!DOCTYPE html>
<style>
  @page {
    margin: 0;
  }
  :root {
    print-color-adjust: exact;
  }
  body {
    background: yellow;
    margin: 0;
  }
  .fakeMargin {
    position: absolute;
    background: white;
  }
</style>
<div style="margin:78px 78px 48px 56px;">
  There should be a white margin around this page. It should be larger on the
  top and on the right.
</div>
<div class="fakeMargin" style="left:0; top:0; bottom:0; width:48px;"></div>
<div class="fakeMargin" style="left:0; top:0; right:0; height:70px;"></div>
<div class="fakeMargin" style="right:0; top:0; bottom:0; width:70px;"></div>
<div class="fakeMargin" style="left:0; bottom:0; right:0; height:48px;"></div>