Bug 1944794 [wpt PR 50379] - Allow custom properties in highlight pse…

…udos, a=testonly

Automatic update from web-platform-tests
Allow custom properties in highlight pseudos

This is a workaround for the use case of custom properties
defined and used in the same rule for ::selection pseudos.
The use case arises from tooling, particularly Tailwind CSS,
and it caused a stable regression when Highlight Inheritance
was launched.

This change restores the original behavior in that highlight
pseudos can use custom properties defined in the highlight
itself. The custom properties are not inherited through the
highlight inheritance chain, so this change does not result in
confusion about the source of custom properties when Highlight
Inheritance is enabled: the properties still come from the
originating element and then the highlight pseudo itself, never
it's parent highlight.

CSS Spec PR: w3c/csswg-drafts#11528

Fixed: 381125910
Change-Id: I0f89e6b8ad96d097ce1e2b39c179a270d472991f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6053860
Reviewed-by: Anders Hartvoll Ruud <[email protected]>
Commit-Queue: Stephen Chenney <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1413271}

--

wpt-commits: 184a7bf8907297dd81a6dec8632a63c0b0a843cc
wpt-pr: 50379

testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008.html

@@ -11,7 +11,7 @@
     --background-color: green;
     --decoration-color: yellow;
   }
-  ::selection {
+  :root::selection {
     --background-color: cyan;
     --decoration-color: magenta;
   }
@@ -22,10 +22,10 @@
     text-decoration-color: var(--decoration-color, red);
   }
   span {
-    --background-color: blue;
+    --background-color: purple;
   }
   span::selection {
-    --background-color: purple;
+    --background-color: blue;
     background-color: var(--background-color, red);
   }
 </style>

testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-009.html

@@ -4,17 +4,17 @@
 <link rel="author" title="Stephen Chenney" href="mailto:[email protected]">
 <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 custom properties used in highlight pseudos are taken from the originating element.">
+<meta name="assert" content="This test verifies that custom properties used in highlight pseudos are taken from the highlight and originating element.">
 <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 {
+  body {
     --background-color: green;
     --decoration-color: green;
   }
-  ::selection {
+  body::selection {
     --decoration-color: purple;
   }
   div::selection {
@@ -28,14 +28,17 @@
 <script>
     selectNodeContents(document.querySelector("body"));
 
+    const div_style = getComputedStyle(document.querySelector("div"));
     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 uses the originating custom property");
-    test(() => void assert_equals(body_selection.getPropertyValue("--decoration-color"), "green"),
+    test(() => void assert_equals(body_selection.getPropertyValue("--decoration-color"), "purple"),
         "body ::selection does not use its own custom property");
     test(() => void assert_equals(div_selection.getPropertyValue("--decoration-color"), "green"),
         "div::selection uses the originating element custom property");
-    test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "green"),
+    test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "blue"),
         "div::selection does not use its own custom property");
+    test(() => void assert_equals(div_style.getPropertyValue("--background-color"), "green"),
+        "div::selection properties are not present on the originating element");
 </script>

testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-011.html

@@ -0,0 +1,31 @@
+<!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:[email protected]">
+<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 custom properties used in highlight pseudos are taken from the highlight and originating element.">
+<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::selection {
+    --background-color: red;
+  }
+  div::selection {
+    background-color: var(--background-color, green);
+  }
+</style>
+<body>
+  <div>Some text</div>
+</body>
+<script>
+    selectNodeContents(document.querySelector("body"));
+
+    const div_selection = getComputedStyle(document.querySelector("div"), "::selection");
+    test(() => void assert_equals(div_selection.backgroundColor, "rgb(0, 128, 0)"),
+        "div::selection does not inherit custom properties from the highlight parent");
+    test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), ""),
+        "--background-color has no computed value on div::selection");
+</script>

testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html

@@ -4,18 +4,19 @@
 <link rel="author" title="Delan Azabani" href="mailto:[email protected]">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
 <link rel="match" href="highlight-styling-001-ref.html">
-<meta name="assert" value="This test verifies that ::selection styles cannot set custom properties.">
+<meta name="assert" value="This test verifies that ::selection styles can set custom properties and they over-ride the originating element.">
 <script src="support/selections.js"></script>
 <link rel="stylesheet" href="support/highlights.css">
 <style>
     main {
+        --x: red;
         font-size: 7em;
         margin: 0.5em;
     }
     main::selection {
-        --x: red;
+        --x: green;
         color: white;
-        background-color: var(--x, green);
+        background-color: var(--x, blue);
     }
 </style>
 <p>Test passes if the text below is white on green.