Resolve highlight custom properties from the root

schenney-chromium · chromium-wpt-export-bot · commit 7dccc00ed087 · 2023-09-03T17:56:18.000-07:00
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
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>
