currentColor for highlight pseudos uses the correct originating element

Per the resolutions in [1], for a highlight pseudo with currentColor as its color, getComputedStyle(element, "::highlight(...)").color should return the color of the originating element (since this is the color that would be painted if that highlight were the only one applied). This is currently achieved by having Color::ApplyValue grab the color from the originating element for highlights using currentColor. This hits a problem when we do getComputedStyle(element, "::highlight(...)") on an element that doesn't directly match a highlight pseudo, but is a child of an element matching a highlight pseudo. In that case we end up reusing the computed style for the highlight that was built for the ancestor element. That highlight style still uses the color from the ancestor element, which is the wrong result. Here we fix this by having StyleAdjuster::AdjustComputedStyle adjust the style to use the color from the correct originating element. [1] w3c/csswg-drafts#6818 (comment) Bug: 1321540 Change-Id: Ibbc9126811fe52ecadb358713857df05c1143708
web-platform-tests · Jun 6, 2022 · cf5583c · cf5583c
1 parent a6101f1
commit cf5583c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/css/css-pseudo/highlight-pseudos-currentcolor-inheritance-computed-002.html b/css/css-pseudo/highlight-pseudos-currentcolor-inheritance-computed-002.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle for currentcolor</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
+<link rel="match" href="reference/highlight-pseudos-currentcolor-inheritance-computed-002-ref.html">
+<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
+<main>FAIL</main>
+<main>FAIL</main>
+<style>
+  main { color: green; }
+  :root::selection { background-color: lime; }
+  :root::highlight(foo) { background-color: lime;}
+</style>
+<script>
+  const [selection, highlight] = document.querySelectorAll("main");
+
+  let selectionRange = new Range();
+  selectionRange.selectNode(selection);
+  window.getSelection().addRange(selectionRange);
+  selection.textContent = getComputedStyle(selection, "::selection").color;
+
+  let highlightRange = new Range();
+  highlightRange.selectNode(highlight);
+  CSS.highlights.set("foo", new Highlight(highlightRange));
+  highlight.textContent = getComputedStyle(highlight, "::highlight(foo)").color;
+</script>
diff --git a/css/css-pseudo/reference/highlight-pseudos-currentcolor-inheritance-computed-002-ref.html b/css/css-pseudo/reference/highlight-pseudos-currentcolor-inheritance-computed-002-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference</title>
+<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
+<main>rgb(0, 128, 0)</main>
+<main>rgb(0, 128, 0)</main>
+<style>
+  main { color: green; }
+  main::selection { background-color: lime; color: green; }
+  main::highlight(foo) { background-color: lime; color: green; }
+</style>
+<script>
+  const [selection, highlight] = document.querySelectorAll("main");
+
+  let selectionRange = new Range();
+  selectionRange.selectNode(selection);
+  window.getSelection().addRange(selectionRange);
+
+  let highlightRange = new Range();
+  highlightRange.selectNode(highlight);
+  CSS.highlights.set("foo", new Highlight(highlightRange));
+</script>