Bug 1772778 [wpt PR 34315] - currentColor for highlight pseudos uses …

…the correct originating element, a=testonly Automatic update from web-platform-tests 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 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3690272 Reviewed-by: Delan Azabani <dazabani@igalia.com> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Dan Clark <daniec@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1012045} -- wpt-commits: c801c26f4182f6e2fbf72ac3093a3746d8d50400 wpt-pr: 34315
mozilla · Jun 13, 2022 · 772c969 · 772c969
1 parent 24c3797
commit 772c969
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/...latform/tests/css/css-pseudo/highlight-pseudos-currentcolor-inheritance-computed-002.html b/...latform/tests/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>