1 files changed, 37 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order-ref1.html b/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order-ref1.html
new file mode 100644
index 0000000000..ca2b08ccbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order-ref1.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    @font-face {
+        font-family: CSSTest;
+        src: url(/fonts/CSSTest/csstest-basic-italic.ttf);
+    }
+    main {
+        font: 80px/1 CSSTest;
+        margin: 0.5em;
+        width: min-content;
+    }
+    .unselected {
+        background: black;
+    }
+    .orange {
+        color: orange;
+    }
+    .selected {
+        background: #0000FFC0;
+        color: transparent;
+    }
+</style>
+<!--
+    In this ref, the overhanging parts of the selected text are
+    visible, being painted in orange. Gecko does this.
+-->
+<p>Test passes if the blue rectangle below contains no proper orange, only orange dimmed by blue.
+<main class="highlight_reftest">
+    <div class="hrt_layers">
+        <div><span class="unselected">ii∫<span class="orange">∫∫</span></span></div>
+        <div><span class="selected">ii∫</span>∫∫</div>
+        ii∫∫∫
+    </div>
+</main>