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 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4827862 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Stephen Chenney <schenney@chromium.org> Cr-Commit-Position: refs/heads/main@{#1192961}
web-platform-tests · Sep 6, 2023 · 9428cb9 · 9428cb9
1 parent 6207583
commit 9428cb9
Show file tree

Hide file tree

Showing 3 changed files with 90 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,18 @@
+<!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: yellow;
+  }
+  span::selection {
+    background-color: blue;
+  }
+</style>
+<div style="width: 300px">PASS if background-color is green when selected, <span>except this which is blue</span>, and underline is yellow.<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,31 @@
+<!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, its value is taken from the root element.">
+<meta name="fuzzy" content="0-255;0-10">
+<script src="support/selections.js"></script>
+<style>
+  :root {
+    --background-color: green;
+    --decoration-color: purple;
+  }
+  ::selection {
+    --decoration-color: yellow;
+  }
+  div::selection {
+    background-color: var(--background-color, red);
+    text-decoration-line: underline;
+    text-decoration-style: line;
+    text-decoration-color: var(--decoration-color, red);
+  }
+  span::selection {
+    --background-color: blue;
+    background-color: var(--background-color, red);
+  }
+</style>
+<div style="width: 300px">PASS if background-color is green when selected, <span>except this which is blue</span>, and underline is yellow.</div>
+<script>
+  selectNodeContents(document.querySelector("div"));
+</script>
diff --git a/css/css-pseudo/highlight-cascade-009.html b/css/css-pseudo/highlight-cascade-009.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight cascade: inheritance of custom properties</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="help" href="https://github.com/w3c/csswg-drafts/issues/6641">
+<meta name="assert" content="This test verifies that non-applicable property declarations are ignored in highlight pseudos, that the computed values of ‘font-size’ and ‘line-height’ in highlight pseudos are taken from the originating element, and that ‘text-shadow’ in highlight pseudos respects these values when given ‘em’ and ‘lh’ units.">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  :root {
+    --background-color: green;
+    --decoration-color: purple;
+  }
+  ::selection {
+    --decoration-color: green;
+  }
+  div::selection {
+    --background-color: blue;
+    background-color: var(--background-color, red);
+  }
+</style>
+<body>
+  <div>Some text</div>
+</body>
+<script>
+    selectNodeContents(document.querySelector("body"));
+
+    const body_selection = getComputedStyle(document.querySelector("body"), "::selection");
+    const div_selection = getComputedStyle(document.querySelector("div"), "::selection");
+    test(() => void assert_equals(body_selection.getPropertyValue("--background-color"), "green"),
+        "body ::selection has the root custom property");
+    test(() => void assert_equals(body_selection.getPropertyValue("--decoration-color"), "green"),
+        "body ::selection uses it's own custom property");
+    test(() => void assert_equals(div_selection.getPropertyValue("--decoration-color"), "green"),
+        "div::selection inherits a custom property");
+    test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "blue"),
+        "div::selection uses it's own custom property");
+</script>