Highlight pseudos use the forced-color status of their originating el…

…ement Per the resolution in [1], forced-color-adjust should not be one of the supported properties [2] in highlight pseudos, and the forced-color state of highlights should be taken from the originating element. This change updates the HighlightInheritance implementation to match the resolution. There are a few parts to this: - css_properties.json5 is updated so that forced-color-adjust is no longer a valid property for highlight pseudos. But, since shipping this change for ::selection may cause compatibility issues, we introduce a new valid_for_highlight_legacy parameter that maintains the old behavior and we update valid_for_highlight, which will be used only for highlights with the new inheritance model enabled, to use the new behavior. - This uncovered an older bug where DetermineValidPropertyFilter wasn't using any filter at all for ::highlight(), ::spelling-error, and ::grammar-error. This is now fixed. - StyleResolver::ApplyInheritance is updated to propagate forced-colors status from the originating element to the corresponding highlight pseudo. The new test is disabled on Mac/Linux due to some small differences in text decoration painting between those from highlight pseudos and from non-highlight rules, unrelated to the contents of this change. [1] w3c/csswg-drafts#7264 (comment) [2] https://drafts.csswg.org/css-pseudo-4/#highlight-styling Bug: 1309835, 1024156 Change-Id: I732afd24bbba2619a6718270faa0a1d2fcb98512 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3665644 Reviewed-by: Rune Lillesveen <[email protected]> Reviewed-by: Delan Azabani <[email protected]> Commit-Queue: Dan Clark <[email protected]> Cr-Commit-Position: refs/heads/main@{#1009639}
web-platform-tests · Jun 1, 2022 · 2350576 · 2350576
1 parent c4bb9ef
commit 2350576
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/forced-colors-mode/forced-colors-mode-53-ref.html b/forced-colors-mode/forced-colors-mode-53-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - Highlight pseudos use the originating element's forced colors state</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-color-adjust-prop">
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<style>
+  span.forcedColors {
+    background-color: Highlight;
+    color: HighlightText;
+    text-decoration: underline;
+    text-decoration-color: CanvasText;
+    forced-color-adjust: none;
+  }
+
+  span.noForcedColors {
+    background-color: yellow;
+    color: blue;
+    text-decoration: underline;
+    text-decoration-color: orange;
+    forced-color-adjust: none;
+  }
+</style>
+<body>
+  <div><span class="forcedColors">This content doesn't have forced-color-adjust set at all</span></div>
+  <div><span class="noForcedColors">This content has forced-color-adjust:none on the originating element only</span></div>
+  <div><span class="forcedColors">This content has forced-color-adjust:none on the ::highlight pseudo only</span></div>
+  <div><span class="noForcedColors">This content has forced-color-adjust:none on the originating element and the ::highlight pseudo</span></div>
+</body>
diff --git a/forced-colors-mode/forced-colors-mode-53.html b/forced-colors-mode/forced-colors-mode-53.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - Highlight pseudos use the originating element's forced colors state</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-color-adjust-prop">
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel=match href="forced-colors-mode-53-ref.html">
+<style>
+  span {
+    background-color: lightgray;
+    color: orange;
+  }
+
+  span::highlight(foo) {
+    background-color: yellow;
+    color: blue;
+    text-decoration: underline;
+    text-decoration-color: orange;
+  }
+
+  .fcaOriginating {
+    forced-color-adjust: none;
+  }
+
+  .fcaPseudo::highlight(foo) {
+    forced-color-adjust: none;
+  }
+</style>
+<body>
+  <div><span>This content doesn't have forced-color-adjust set at all</span></div>
+  <div><span class="fcaOriginating">This content has forced-color-adjust:none on the originating element only</span></div>
+  <div><span class="fcaPseudo">This content has forced-color-adjust:none on the ::highlight pseudo only</span></div>
+  <div><span class="fcaOriginating fcaPseudo">This content has forced-color-adjust:none on the originating element and the ::highlight pseudo</span></div>
+  <script>
+    const ranges = [];
+    document.querySelectorAll("div").forEach(div => {
+      const range = new Range();
+      range.setStart(div, 0);
+      range.setEnd(div, 1);
+      ranges.push(range);
+    })
+
+    CSS.highlights.set("foo", new Highlight(...ranges));
+  </script>
+</body>