Blitz - WPT: media-queries-001-print.html

wpt / css / css-page / media-queries-001-print.html

/css/css-page/media-queries-001-print.html

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-3/#media1">
<link rel="match" href="media-queries-001-print-ref.html">
<style>
  @page {
    size: 10in;
    margin: 2in;
  }
  :root {
    print-color-adjust: exact;
  }
  body {
    margin: 0;
    width: 4in;
    height: 3in;
    background: red;
  }

  /* There's some confusion regarding how width/height media queries for print are
     supposed to be handled (and some additional confusion for WPT tests). First
     of all, the spec suggests that we should use the size of the page box that
     we get from the system/user, unaffected by any @page size declarations. But
     all known implementations use the page *area*, not the page *box*,
     i.e. with margins subtracted. [1] Secondly, the WPT documentation says that
     the default page size should be 5 by 3 inches, and doesn't mention any
     default margins. Yet, there are WPT tests that assume that there's a
     half-inch margin on each side [2]. So take all these things into
     consideration in the following media query, so that any default margins of
     0.5 inches don't make a difference. Once the spec / WPT issues have been
     resolved, we should make the test more strict.

     [1] https://github.com/w3c/csswg-drafts/issues/5437
     [2] https://github.com/web-platform-tests/wpt/issues/40788 */

  @media (min-width: 4in) and (max-width: 5in) and (min-height: 2in) and (max-height: 3in) {
    body { background: green; }
  }
</style>
This page should have a green background.

/css/css-page/media-queries-001-print-ref.html

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
  @page {
    size: 10in;
    margin: 2in;
  }
  :root {
    print-color-adjust: exact;
  }
  body {
    margin: 0;
    background: green;
  }
</style>
This page should have a green background.