1 files changed, 58 insertions, 0 deletions
diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html
new file mode 100644
index 0000000000..6cefe66be2
--- /dev/null
+++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>
+    Forced colors mode - backplate reference.
+    Tests backplate is drawn when text is located outside the cull rect.
+  </title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../common/reftest-wait.js"></script>
+<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" />
+<style>
+  body {
+    background-image: url("../resources/test-image.jpg");
+    font-family: Ahem;
+    font-size: 10px;
+    forced-color-adjust: none; /* This turns the backplate feature off in
+                                  forced colors mode. The backplate is
+                                  simulated in testing using a Canvas
+                                  background-color behind the text.
+                                */
+  }
+  span {
+    background-color: Canvas;
+  }
+</style>
+<body>
+  <span>
+    The text below should have a backplate in forced colors mode.
+  </span>
+  <div>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <span>This text should have a backplate.</span>
+  </div>
+</body>
+
+<script>
+  function scroll() {
+    window.scrollBy(0, 5000);
+  }
+  onload = scroll;
+</script>
+</html>