Add print only background-image test

Bug: 40262871 Change-Id: I620933aaf44e717e496c9c70642aa870cdadec3a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5556416 Reviewed-by: Morten Stenshorne <[email protected]> Commit-Queue: Traian Captan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1304658}
web-platform-tests · May 22, 2024 · bbc2389 · bbc2389
1 parent 1cf7038
commit bbc2389
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/css/css-page/background-image-only-for-print-ref.html b/css/css-page/background-image-only-for-print-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<p>
+  Should print a green rectangle but not display it on screen.
+</p>
+<img src="/images/green.png" alt="A green rectangle">
diff --git a/css/css-page/background-image-only-for-print.html b/css/css-page/background-image-only-for-print.html
@@ -0,0 +1,27 @@
+<!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">
+
+<style>
+  @media not print {
+    .print-only {
+      display: none;
+    }
+  }
+
+  #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>