WebKit export: CSS Custom Highlights add WPT painting-prioritization (#41357)
https://bugs.webkit.org/show_bug.cgi?id=259837
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
new file mode 100644
index 0000000..9d3e3b0
--- /dev/null
+++ 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>
\ No newline at end of file
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
new file mode 100644
index 0000000..1c7abf4
--- /dev/null
+++ 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>
\ No newline at end of file
