Blitz - WPT: background-image-only-for-print.html

wpt / css / css-page / background-image-only-for-print.html

/css/css-page/background-image-only-for-print.html

<!DOCTYPE html>
<title>Test print result of background-image not displayed on screen</title>

<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image">
<link rel="help" href="https://crbug.com/40262871">

<link rel="match" href="background-image-only-for-print-ref.html">

<!--
  Preload the image while in screen media so it is ready when we switch
  to print media for the reftest snapshot.
-->
<link rel="preload" as="image" href="/images/green.png">

<style>
  @media not print {
    .print-only {
      display: none;
    }
  }

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

  #target {
    background-image: url("/images/green.png");
    height: 50px;
    width: 100px;
  }
</style>

<p>
  Should print a green rectangle but not display it on screen.
</p>

<div id="target" class="print-only"></div>

/css/css-page/background-image-only-for-print-ref.html

<!DOCTYPE html>
<style>
  :root {
    print-color-adjust: exact;
  }
</style>
<p>
  Should print a green rectangle but not display it on screen.
</p>
<img src="/images/green.png" alt="A green rectangle">