WebKit export: CSS Custom Highlights add WPT painting-prioritization (#…

…41357) https://bugs.webkit.org/show_bug.cgi?id=259837
web-platform-tests · Aug 6, 2023 · b82aa8f · b82aa8f
1 parent d315170
commit b82aa8f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-prioritization-003-ref.html b/css/css-highlight-api/painting/custom-highlight-painting-prioritization-003-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Non-conflicting attributes</title>
+<style>
+    #blue {
+        background-color: blue;
+        color: white;
+    }
+    #yellow {
+        background-color: yellow;
+    }
+</style>
+<body>
+    <p>This <span id="blue">is an</span><span id="yellow"> example</span> of two overlapping highlights</p>
+</body>
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-prioritization-003.html b/css/css-highlight-api/painting/custom-highlight-painting-prioritization-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Non-conflicting attributes</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#priorities">
+<link rel="match" href="custom-highlight-painting-prioritization-003-ref.html">
+<meta name="assert" value="Non-conflicting attributes for highlights will be painted even if lower priority">
+<style>
+    ::highlight(highlight-1) {
+        background-color: blue;
+        color: white;
+    }
+    ::highlight(highlight-2) {
+        background-color: yellow;
+    }
+</style>
+<body>
+    <p>This is an example of two overlapping highlights</p>
+</body>
+<script>
+    const text = document.querySelector("p").firstChild;
+
+    // Create two overlapping highlights
+    const range1 = new Range();
+    range1.setStart(text, 5);
+    range1.setEnd(text, 10);
+
+    const range2 = new Range();
+    range2.setStart(text, 10);
+    range2.setEnd(text, 18);
+
+    const highlight1 = new Highlight(range1);
+    const highlight2 = new Highlight(range2);
+
+    CSS.highlights.set("highlight-1", highlight1);
+    CSS.highlights.set("highlight-2", highlight2);
+</script>