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 copying the variables when style is initialized for the pseudo elements. Bug: 1412395 Change-Id: I88c22cea6a9eb5f465a5c0dd97444b39b07368a2
web-platform-tests · Sep 4, 2023 · 7dccc00 · 7dccc00
1 parent dc5ea80
commit 7dccc00
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>