Resolve highlight custom properties from the root

It was resolved in w3c/csswg-drafts#6641 that CSS Highlight Pseudos should inherit custom properties from the root element if those properties are not defined in the highlight inheritance path. Implement that by checking the root element when a custom variable for the highlight is not found. Bug: 1412395 Change-Id: I88c22cea6a9eb5f465a5c0dd97444b39b07368a2
web-platform-tests · Aug 30, 2023 · 88a2f28 · 88a2f28
1 parent f78f1aa
commit 88a2f28
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/css/css-pseudo/highlight-cascade-008-ref.html b/css/css-pseudo/highlight-cascade-008-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Custom property values from the root element</title>
+<script src="support/selections.js"></script>
+<style>
+  div::selection {
+    background-color: green;
+    text-decoration-line: underline;
+    text-decoration-style: line;
+    text-decoration-thickness: 1px;
+    text-decoration-color: blue;
+  }
+</style>
+<div>PASS if background-color is green when selected, underline is 1px thick and blue.</div>
+<script>
+  selectNodeContents(document.querySelector("div"));
+</script>
diff --git a/css/css-pseudo/highlight-cascade-008.html b/css/css-pseudo/highlight-cascade-008.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Custom property values from the root element</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<link rel="match" href="highlight-cascade-008-ref.html">
+<meta name="assert" value="This test verifies that when a custom property is not found in highlight cascade, it's value is taken from the root element.">
+<script src="support/selections.js"></script>
+<style>
+  :root {
+    --background-color: green;
+    --decoration-thickness: 10px;
+    --decoration-color: purple;
+  }
+  ::selection {
+    --decoration-thickness: 1px;
+    --decoration-color: green;
+  }
+  div::selection {
+    --decoration-color: blue;
+    background-color: var(--background-color, red);
+    text-decoration-line: underline;
+    text-decoration-style: line;
+    text-decoration-thickness: var(--decoration-thickness, 5px);
+    text-decoration-color: var(--decoration-color, red);
+  }
+</style>
+<div>PASS if background-color is green when selected, underline is 1px thick and blue.</div>
+<script>
+  selectNodeContents(document.querySelector("div"));
+</script>