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

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

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

<!DOCTYPE html>
<title>Page margin safety on page margin boxes</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-003-print-ref.html">
<meta name="safe-printable-inset" content="0.635">
<style>
  @page {
    size: 400px 250px;
    margin: 30px;
    border: 1px solid;
    page-margin-safety: add;

    @top-left {
      page-margin-safety: add;
      content: "";
      background: blue;
    }
    @top-center {
      page-margin-safety: add;
      margin-top: 10px;
      content: "";
      background: blue;
    }
    @top-right {
      page-margin-safety: clamp;
      margin-top: 10px;
      content: "";
      background: blue;
    }

    @bottom-left {
      content: "";
      background: yellow;
    }
    @bottom-center {
      page-margin-safety: clamp;
      margin-bottom: 30px;
      content: "";
      background: yellow;
    }
    @bottom-right {
      page-margin-safety: clamp;
      margin: auto;
      height: 20px;
      content: "";
      background: yellow;
    }

    @left-top {
      page-margin-safety: clamp;
      margin: auto;
      width: 10px;
      content: "";
      background: gray;
    }
    @left-middle {
      page-margin-safety: clamp;
      margin: auto;
      width: 30px;
      content: "";
      background: gray;
    }
    @left-bottom {
      page-margin-safety: clamp;
      margin: auto;
      width: 40px;
      content: "";
      background: gray;
    }

    @top-right-corner {
      page-margin-safety: add;
      margin-top: 10px;
      margin-right: 10px;
      content: "";
      background: hotpink;
    }
    @bottom-right-corner {
      page-margin-safety: clamp;
      content: "";
      background: hotpink;
    }
    @bottom-left-corner {
      page-margin-safety: clamp;
      content: "";
      margin: auto;
      width: 10px;
      height: 10px;
      background: hotpink;
    }
  }

  :root {
    print-color-adjust: exact;
  }

  body {
    margin: 0;
  }
</style>

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

<!DOCTYPE html>
<style>
  @page {
    size: 400px 250px;
    margin: 0;
  }
  html, body {
    print-color-adjust: exact;
    margin: 0;
    height: 100%;
  }
</style>
<div style="display:grid; grid-template-rows:54px 1fr 54px; height:100%;">
  <div style="display:grid; grid-template-columns:54px 1fr 1fr 1fr 54px;">
    <div></div>
    <div style="margin-top:24px; background:blue;"></div>
    <div style="margin-top:34px; background:blue;"></div>
    <div style="margin-top:24px; background:blue;"></div>
    <div style="margin-top:34px; width:20px; height:20px; background:hotpink;"></div>
  </div>
  <div style="display:grid; grid-template-columns:54px 1fr 54px;">
    <div style="display:grid; grid-template-rows:1fr 1fr 1fr;">
      <div style="width:10px; margin-left:24px; background:gray;"></div>
      <div style="width:30px; margin-left:24px; background:gray;"></div>
      <div style="width:40px; margin-left:14px; background:gray;"></div>
    </div>
    <div style="border:1px solid;"></div>
  </div>
  <div style="display:grid; grid-template-columns:54px 1fr 1fr 1fr 54px;">
    <div style="margin-left:24px; margin-top:20px; width:10px; height:10px; background:hotpink;"></div>
    <div style="background:yellow;"></div>
    <div style="height:24px; background:yellow;"></div>
    <div style="margin-top:10px; height:20px; background:yellow;"></div>
    <div style="width:30px; height:30px; background:hotpink;"></div>
  </div>
</div>