Merging upstream version 127.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-06-12 05:35:37 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-06-12 05:35:37 +0000
commit: a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch)
tree: 532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/css/css-pseudo
parent: Adding debian version 126.0.1-1. (diff)
download: firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz
firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip
71 files changed, 470 insertions, 231 deletions
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html
deleted file mode 100644
index 17629a6dba..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
-<script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-    main {
-        font-size: 7em;
-        margin: 0.5em;
-    }
-    main::selection {
-        color: black;
-        background-color: transparent;
-    }
-    main > .control > span::selection,
-    main > .bg > span::selection {
-        color: white;
-        background-color: green;
-    }
-    main > .fg > span::selection {
-        color: green;
-        background-color: white;
-    }
-</style>
-<p>Test passes if the words below are (respectively): white on green, green on white, white on green.
-<!--
-    The element tree below is intentionally the same shape as the
-    test, despite the fact that we might be able to simplify it. This
-    is because multiple impls (including Gecko and Blink) split the
-    background paints accordingly, which can obscure ink overflow in
-    some of the highlighted text (especially “f”).
--->
-<main class="highlight_reftest"
-    ><span class="control"><span>foo</span></span
-    > <span class="fg"><span>b</span></span
-    ><span class="fg"><span>a</span></span
-    ><span class="fg"><span>r</span></span
-    > <span class="bg"><span>b</span></span
-    ><span class="bg"><span>a</span></span
-    ><span class="bg"><span>z</span></span
-    ></main>
-<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html
deleted file mode 100644
index c01d3c796e..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html
+++ /dev/null
@@ -1,120 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight cascade: custom properties are inherited regardless of inherits flag or inheritedness of referencing property</title>
-<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<link rel="match" href="highlight-cascade-002-ref.html">
-<meta name="assert" value="This test verifies that, given ::selection styles referencing custom properties, their substitution values are inherited from the parent ::selection styles, even if the property is registered with inherits set to false (--inherits-false) or the referencing property is not an inherited property (background-color). All custom properties are treated as inherited when used in highlight styles in any way.">
-<script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-    /*
-        Register the custom properties, other than --unregistered,
-        which would be an inherited property [css-variables-1].
-    */
-    @property --control {
-        syntax: "<color>";
-        initial-value: green;
-        inherits: false;
-    }
-    @property --inherits-false {
-        syntax: "<color>";
-        initial-value: red;
-        inherits: false;
-    }
-    @property --inherits-true {
-        syntax: "<color>";
-        initial-value: red;
-        inherits: true;
-    }
-
-    main {
-        font-size: 7em;
-        margin: 0.5em;
-    }
-    main::selection {
-        /*
-            Don’t visibly highlight the spaces between words.
-        */
-        color: black;
-        background-color: transparent;
-    }
-
-    /*
-        Non-highlight control: if this text is white on red (inherit)
-        rather than white on green (initial), then @property is not
-        supported well enough to make this test meaningful.
-    */
-    main > .control {
-        --control: red;
-    }
-    main > .control > span {
-        color: white;
-        background-color: var(--control);
-    }
-
-    main > *::selection {
-        --inherits-false: green;
-        --inherits-true: green;
-        --unregistered: green;
-    }
-
-    /*
-        Foreground tests: if the foreground of this text is red or
-        black (initial) rather than green (inherit), then custom
-        properties are not being inherited in highlight styles.
-
-        color is an inherited property, but that shouldn’t matter.
-    */
-    main > .fg > span::selection {
-        background-color: white;
-    }
-    main > .fg.inherits-false > span::selection {
-        color: var(--inherits-false);
-    }
-    main > .fg.inherits-true > span::selection {
-        color: var(--inherits-true);
-    }
-    main > .fg.unregistered > span::selection {
-        color: var(--unregistered);
-    }
-
-    /*
-        Background tests: if the background of this text is red or
-        black (initial) rather than green (inherit), then custom
-        properties are not being inherited in highlight styles.
-
-        background-color is not an inherited property, but that
-        shouldn’t matter.
-    */
-    main > .bg > span::selection {
-        color: white;
-    }
-    main > .bg.inherits-false > span::selection {
-        background-color: var(--inherits-false);
-    }
-    main > .bg.inherits-true > span::selection {
-        background-color: var(--inherits-true);
-    }
-    main > .bg.unregistered > span::selection {
-        background-color: var(--unregistered);
-    }
-</style>
-<p>Test passes if the words below are (respectively): white on green, green on white, white on green.
-<main class="highlight_reftest"
-    ><span class="control"><span>foo</span></span
-    > <span class="fg inherits-false"><span>b</span></span
-    ><span class="fg inherits-true"><span>a</span></span
-    ><span class="fg unregistered"><span>r</span></span
-    > <span class="bg inherits-false"><span>b</span></span
-    ><span class="bg inherits-true"><span>a</span></span
-    ><span class="bg unregistered"><span>z</span></span
-    ></main>
-<script>
-    const main = document.querySelector("main");
-    selectRangeWith(range => {
-        range.selectNodeContents(main);
-        range.setStart(main, 2);
-        range.setEnd(main, 9);
-    });
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001-ref.html
index 25dbeadb2e..2a2907b10a 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001-ref.html
@@ -6,7 +6,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001.html
index 6068a076f0..f441adf3b9 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001.html
@@ -15,7 +15,7 @@
 
   <meta name="assert" content="This test is an adaptation (or modified version) of Example 11 (#example-c35bf49a). The 'div &gt; span::selection' selector has an higher specificity than the 'span::selection' selector.">
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-002.html
index 50be805f01..d10bdb9b04 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-002.html
@@ -15,7 +15,7 @@
 
   <meta name="assert" content="This test is an adaptation (or modified version) of Example 12 (#example-97480f68). In this test, &ltspan&gt; element's ::selection matches the ::selection { background-color: green; } rule and not the div#test::selection rule because '*' is implied when a tag selector is missing.">
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004-ref.html
index e755283a32..9b8507c4cc 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004-ref.html
@@ -6,7 +6,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004.html
index 56abba7156..295321a172 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004.html
@@ -19,7 +19,7 @@
   https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
   -->
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
diff --git a/testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005-ref.html
index d1e597e05b..d1e597e05b 100644
--- a/testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005-ref.html
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005.html
index 2c6ba60270..25ad85fe70 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005.html
@@ -6,7 +6,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-cascade">
-  <link rel="match" href="reference/cascade-highlight-005-ref.html">
+  <link rel="match" href="cascade-highlight-005-ref.html">
 
   <meta name="assert" content="In this test, 'background-color' has not been specified a value for the highlight pseudo-element of the span element. Since the span's parent element has an highlight pseudo-element also, then the span's background color for its highlight pseudo-element should be inherited from its parent highlight pseudo-element. Therefore the span element should have a green background color.">
 
@@ -28,7 +28,7 @@
   https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
   -->
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
 
   <style>
   div
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001-ref.html
index a18690962f..b96ffce5ab 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001.html
index f237e9eca7..18b3635b3f 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-cascade-001-ref.html">
 <meta name="assert" value="This test verifies that, given ::selection styles with both color and background-color declared as unset, both properties inherit their values from the parent ::selection styles. All properties become inherited for the purposes of deciding whether unset should mean initial or inherit.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003-ref.html
index 256c28ba0c..68964149ba 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>Initial custom property values in :root::selection rule</title>
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   :root::selection {
     background-color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003.html
index 61bc46d4c5..b29f37528c 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003.html
@@ -3,7 +3,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
 <link rel="match" href="highlight-cascade-003-ref.html">
 <meta name="assert" value="This test verifies that the initial value given in a custom property registration is respected, when the property is referenced in ::selection styles but no value is defined. The initial value is not the guaranteed-invalid value, so the fallback value in var() is not used.">
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   @property --bg {
     syntax: "<color>";
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004-ref.html
index f9bf83f9c1..5845e93620 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>Initial custom property values in div::selection rule</title>
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   div::selection {
     background-color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004.html
index eb181096ce..f3155bcec6 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004.html
@@ -3,7 +3,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
 <link rel="match" href="highlight-cascade-004-ref.html">
 <meta name="assert" value="This test verifies that the initial value given in a custom property registration is respected, when the property is referenced in ::selection styles but no value is defined. The initial value is not the guaranteed-invalid value, so the fallback value in var() is not used.">
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   @property --bg {
     syntax: "<color>";
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005-ref.html
index 20d2b0bdb3..f0ea3faa76 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005-ref.html
@@ -3,7 +3,7 @@
 <title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</title>
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     nav::selection,
     span::selection,
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005.html
index 008f56aded..958bdf6544 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-cascade-005-ref.html">
 <meta name="assert" content="This test verifies that, given both universal and non-universal ::selection rules, the subject of the non-universal rule has styles from both rules with the non-universal styles overriding the universal styles (due to the cascade), its descendants have styles from both rules with the universal styles overriding the non-universal styles (due to highlight inheritance), and its siblings have the universal styles only.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     /* * (universal) */::selection {
         background-color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006-ref.xhtml
index df0a56123e..643dd79325 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006-ref.xhtml
@@ -2,7 +2,7 @@
 <meta charset="utf-8"/>
 <title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and namespace-universal rules</title>
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"/>
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
     main * { all: initial; display: block; }
     ::selection { color: green; }
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006.xhtml
index fb6d07f8f0..4a37af7c25 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006.xhtml
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"/>
 <link rel="match" href="highlight-cascade-006-ref.xhtml"/>
 <meta name="assert" content="This test verifies that, given both universal ::selection rules and ::selection rules that are actually non-universal due to an explicit namespace prefix or default @namespace rule, the non-universal rules are not erroneously treated as universal."/>
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
     main * { all: initial; display: block; }
     ::selection { color: green; } /* 1. universal (* means *|* if there is no default @namespace) */
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-007.html
index de0322d910..df79d8dff5 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-007.html
@@ -5,8 +5,8 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7591">
 <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="../support/selections.js"></script>
+<link rel="stylesheet" href="../support/highlights.css">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008-ref.html
index c87ddcf93c..70b9d958b5 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <title>Custom property values from the root element</title>
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   div::selection {
     background-color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008.html
index 10ca924b8f..720e2f0469 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008.html
@@ -1,18 +1,19 @@
 <!DOCTYPE html>
-<title>Custom property values from the root element</title>
+<title>Custom property values from the originating 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="assert" value="This test verifies that custom properties from the originating element are used to resolve var() on highlight pseudos.">
 <meta name="fuzzy" content="0-255;0-10">
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   :root {
     --background-color: green;
-    --decoration-color: purple;
+    --decoration-color: yellow;
   }
   ::selection {
-    --decoration-color: yellow;
+    --background-color: cyan;
+    --decoration-color: magenta;
   }
   div::selection {
     background-color: var(--background-color, red);
@@ -20,8 +21,11 @@
     text-decoration-style: line;
     text-decoration-color: var(--decoration-color, red);
   }
-  span::selection {
+  span {
     --background-color: blue;
+  }
+  span::selection {
+    --background-color: purple;
     background-color: var(--background-color, red);
   }
 </style>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-009.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-009.html
index acc48c7c36..e95de9a781 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-009.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-009.html
@@ -4,18 +4,18 @@
 <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 custom properties used in highlight pseudos are taken from the ::root if not found in the highlight inheritance chain.">
-<script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<meta name="assert" content="This test verifies that custom properties used in highlight pseudos are taken from the 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 {
     --background-color: green;
-    --decoration-color: purple;
+    --decoration-color: green;
   }
   ::selection {
-    --decoration-color: green;
+    --decoration-color: purple;
   }
   div::selection {
     --background-color: blue;
@@ -31,11 +31,11 @@
     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");
+        "body ::selection uses the originating custom property");
     test(() => void assert_equals(body_selection.getPropertyValue("--decoration-color"), "green"),
-        "body ::selection uses its own custom property");
+        "body ::selection does not use its 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 its own custom property");
+        "div::selection uses the originating element custom property");
+    test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "green"),
+        "div::selection does not use its own custom property");
 </script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-inheritance.html
index d67ae82881..d67ae82881 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-inheritance.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-visited.html
index 207cb7b7dd..207cb7b7dd 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-visited.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed.html
index 97c31809df..97c31809df 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001-ref.html
index 93e2002f4a..d3a3d49797 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001-ref.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8" />
 <title>CSS Pseudo-Elements Test: Reference</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001.html
index 76d80d228a..efdb9016bc 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001.html
@@ -5,7 +5,7 @@
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-painting-properties-001-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <meta name="fuzzy" content="0-50;0-150">
 <style>
 div {
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002-ref.html
index 11ca501065..6f9066cba8 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002-ref.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8" />
 <title>CSS Pseudo-Elements Test: Reference</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002.html
index ac3677c1cf..d02dc9e8c5 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002.html
@@ -5,7 +5,7 @@
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-painting-properties-002-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <meta name="fuzzy" content="0-50;0-150">
 <style>
 div {
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001-ref.html
index d6ee33cda7..1ab60db5c8 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset="utf-8">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001.html
index 141556f935..c82da8c380 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001.html
@@ -4,7 +4,7 @@
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-painting-text-shadow-001-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002-ref.html
index fb2696a55a..6452a34d0e 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset="utf-8">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002.html
index 77858729af..870243f501 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002.html
@@ -4,7 +4,7 @@
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-painting-text-shadow-002-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001-ref.html
index 794796a88f..70ce6b59a4 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001-ref.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8" />
 <title>CSS Pseudo-Elements Test: Reference</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001.html
index a1512f014d..1869f8ab53 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001.html
@@ -5,7 +5,7 @@
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-root-explicit-default-001-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002-ref.html
index 3175948317..b64b007c64 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002-ref.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8" />
 <title>CSS Pseudo-Elements Test: Reference</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 .highlight_reftest {
   color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002.html
index fc5698faa1..fe6d80be2e 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002.html
@@ -5,7 +5,7 @@
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-root-explicit-default-002-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 .highlight_reftest {
   color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-001.html
index ecf787b9b4..ecf787b9b4 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-001.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-002.html
index 420cc5ba15..420cc5ba15 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-002.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-ref.html
index 67ecb8df64..67ecb8df64 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-ref.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001-ref.html
index 14687acb84..102b07b481 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001.html
index 09e5abf9a3..7f370238df 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-paired-cascade-001-ref.html">
 <meta name="assert" value="This test verifies that setting color on ::selection suppresses any UA non-initial used value for background-color. These properties are highlight colors, which are subject to paired cascade.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002-ref.html
index 48eb9911a1..19d731af02 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002.html
index affbe95629..626fc57558 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-paired-cascade-002-ref.html">
 <meta name="assert" value="This test verifies that setting background-color on ::selection suppresses any UA non-initial used value for color. These properties are highlight colors, which are subject to paired cascade.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003-ref.html
index 18885fdc89..638ae00c68 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003.html
index 250e320210..8c621cc777 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-paired-cascade-003-ref.html">
 <meta name="assert" value="This test verifies that setting text-decoration on ::selection does not suppress any UA non-initial used values for color or background-color. While the former is an applicable (shorthand) property for highlight styles, it is not one of the highlight colors (color or background-color), so paired cascade does not apply.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004-notref.html
index 63472b6758..72490b1461 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004-notref.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     :link, :visited {
         color: blue;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004.html
index 61e2b7d7f0..0a73d006b5 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
 <link rel="mismatch" href="highlight-paired-cascade-004-notref.html">
 <meta name="assert" value="This test verifies that setting color on ::target-text suppresses any UA non-initial used value for background-color. ::target-text is a highlight pseudo with a recommended UA default background-color that is not initial (Mark), so paired cascade can be observed.">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     :link, :visited {
         color: blue;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005-ref.html
index 0ac5c02b20..862d06e6f6 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005.html
index 50677c811e..4ee6db3a09 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-paired-cascade-005-ref.html">
 <meta name="assert" value="This test verifies that setting color to unset on ::selection suppresses any UA non-initial used value for background-color. The unset value is defined as both “treated as [inherit or initial depending on whether the property is inherited]” and “effectively erases all declared values occurring earlier in the cascade [(inclusive)]”, which are normally equivalent, but under paired cascade, the former wins.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006-ref.html
index 18885fdc89..638ae00c68 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006.html
index 20c03282c8..bef3601ccb 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-paired-cascade-006-ref.html">
 <meta name="assert" value="This test verifies that setting color to revert on ::selection does not suppress any UA non-initial used value for background-color. Because the revert value rolls back the cascade, it destroys its own existence as a cascaded value, and this is also true under paired cascade.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-computed.html
index 4a274e1bbd..4a274e1bbd 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-computed.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-inheritance-computed-001.html
index 84c4045a54..84c4045a54 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-inheritance-computed-001.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-visited-computed-001.html
index a2b18effcc..a2b18effcc 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-visited-computed-001.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001-ref.html
new file mode 100644
index 0000000000..836874df05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Pseudo Test: Dynamic Custom Properties for Highlights</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<head>
+  <style>
+    ::selection {
+      background-color: green;
+    }
+  </style>
+</head>
+<body>Green background when selected</body>
+<script>
+  window.getSelection().selectAllChildren(document.body);
+</script>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001.html
new file mode 100644
index 0000000000..836ef546fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Pseudo Test: Dynamic Custom Properties for Highlights</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
+<link rel="match" href="highlight-custom-properties-dynamic-001-ref.html">
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<meta name="assert" value="Custom property values in highlights update correctly when the property is updated.">
+<head>
+  <style>
+    div {
+      --background-color: red;
+    }
+    ::selection {
+      background-color: var(--background-color, red);
+    }
+  </style>
+</head>
+<div id="originating">Green background when selected</div>
+<script>
+  window.getSelection().selectAllChildren(document.body);
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      originating.style.setProperty("--background-color", "green");
+      requestAnimationFrame(() => takeScreenshot());
+    });
+  });
+</script>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal-ref.html
new file mode 100644
index 0000000000..4ff90afb38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal-ref.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights horizontal text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    :root {
+        line-height: 1;
+        white-space: break-spaces;
+    }
+    #originating_shadow {
+        font-size: 2em;
+        color: transparent;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 0;
+        top: 10px;
+        left: 10px;
+    }
+    #originating_text {
+        font-size: 2em;
+        color: black;
+        position: absolute;
+        z-index: 7;
+        top: 10px;
+        left: 10px;
+    }
+    #selection_only {
+        font-size: 2em;
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 5;
+        top: 10px;
+    }
+    #target {
+        font-size: 2em;
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 3;
+        top: 10px;
+    }
+    #both_text {
+        font-size: 2em;
+        color: green;
+        position: absolute;
+        z-index: 4;
+        top: 10px;
+    }
+    #both_shadow {
+        font-size: 2em;
+        color: transparent;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 2;
+        top: 10px;
+    }
+</style>
+<p id="originating_shadow">part</p>
+<p id="originating_text">part</p>
+<p id="selection_only">ially selected </p>
+<p id="both_text">ta</p>
+<p id="both_shadow">ta</p>
+<p id="target">rget</p>
+<script>
+    originatingCS = getComputedStyle(originating_text);
+    selection_only.style.left = (parseFloat(originatingCS.width) + parseFloat(originatingCS.left)).toString() + "px";
+    selectionCS = getComputedStyle(selection_only);
+    both_text.style.left = (parseFloat(selectionCS.width) + parseFloat(selectionCS.left)).toString() + "px";
+    both_shadow.style.left = both_text.style.left;
+    bothCS = getComputedStyle(both_text);
+    target.style.left = (parseFloat(bothCS.width) + parseFloat(bothCS.left)).toString() + "px";
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html
new file mode 100644
index 0000000000..b1762e85ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights horizontal text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="highlight-painting-shadows-horizontal-ref.html">
+<meta name="assert" value="::selection and ::target-text both with shadows are painted in the correct order, including originating element shadows">
+<meta name="fuzzy" content="0-32;0-20">
+<script src="support/selections.js"></script>
+<style>
+    :root {
+        line-height: 1;
+        white-space: pre;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        top: 10px;
+        left: 10px;
+    }
+    p::selection {
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5);
+    }
+    p::target-text {
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5);
+    }
+</style>
+<p>partially selected target</p>
+<script>
+    window.location.hash = "#:~:text=target";
+    const target = document.querySelector("p");
+    selectRangeWith(range => {
+        range.selectNodeContents(target);
+        range.setStart(target.childNodes[0], 4);
+        range.setEnd(target.childNodes[0], 21);
+    });
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical-ref.html
new file mode 100644
index 0000000000..00a6f1c808
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical-ref.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights vertical text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+    :root {
+        font-family: Ahem;
+        writing-mode: vertical-lr;
+        line-height: 1;
+        white-space: break-spaces;
+    }
+    #originating_shadow {
+        color: transparent;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 0;
+        top: 10px;
+        left: 10px;
+    }
+    #originating_text {
+        color: black;
+        position: absolute;
+        z-index: 7;
+        top: 10px;
+        left: 10px;
+    }
+    #selection_only {
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 5;
+        left: 10px;
+    }
+    #target {
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 3;
+        left: 10px;
+    }
+    #both_text {
+        color: green;
+        position: absolute;
+        z-index: 4;
+        left: 10px;
+    }
+    #both_shadow {
+        color: transparent;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 2;
+        left: 10px;
+    }
+</style>
+<p id="originating_shadow">part</p>
+<p id="originating_text">part</p>
+<p id="selection_only">ially selected </p>
+<p id="both_text">ta</p>
+<p id="both_shadow">ta</p>
+<p id="target">rget</p>
+<script>
+    originatingCS = getComputedStyle(originating_text);
+    selection_only.style.top = (parseFloat(originatingCS.height) + parseFloat(originatingCS.top)).toString() + "px";
+    selectionCS = getComputedStyle(selection_only);
+    both_text.style.top = (parseFloat(selectionCS.height) + parseFloat(selectionCS.top)).toString() + "px";
+    both_shadow.style.top =  both_text.style.top;
+    bothCS = getComputedStyle(both_text);
+    target.style.top = (parseFloat(bothCS.height) + parseFloat(bothCS.top)).toString() + "px";
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical.html
new file mode 100644
index 0000000000..7187c34da4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights vertical text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="highlight-painting-shadows-vertical-ref.html">
+<meta name="assert" value="::selection and ::target-text both with shadows are painted in the correct order, including originating element shadows">
+<meta name="fuzzy" content="0-32;0-4">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<script src="support/selections.js"></script>
+<style>
+    :root {
+        font-family: Ahem;
+        writing-mode: vertical-lr;
+        line-height: 1;
+        white-space: pre;
+    }
+    p {
+        color: black;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        top: 10px;
+        left: 10px;
+    }
+    p::selection {
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5);
+    }
+    p::target-text {
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5);
+    }
+</style>
+<p>partially selected target</p>
+<script>
+    window.location.hash = "#:~:text=target";
+    const target = document.querySelector("p");
+    selectRangeWith(range => {
+        range.selectNodeContents(target);
+        range.setStart(target.childNodes[0], 4);
+        range.setEnd(target.childNodes[0], 21);
+    });
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html
index 63d8ee1eda..7fe76d1938 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight styling: custom properties are applicable properties in highlight pseudos</title>
+<title>CSS Pseudo-Elements Test: highlight styling: custom properties are not applicable properties in highlight pseudos</title>
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <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 can set and reference custom properties.">
+<meta name="assert" value="This test verifies that ::selection styles cannot set custom properties.">
 <script src="support/selections.js"></script>
 <link rel="stylesheet" href="support/highlights.css">
 <style>
@@ -13,9 +13,9 @@
         margin: 0.5em;
     }
     main::selection {
-        --x: green;
+        --x: red;
         color: white;
-        background-color: var(--x);
+        background-color: var(--x, green);
     }
 </style>
 <p>Test passes if the text below is white on green.
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html
index 2f7cc29128..351eacac88 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html
@@ -1,21 +1,21 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight styling: originating custom property values do not affect highlight pseudos</title>
+<title>CSS Pseudo-Elements Test: highlight styling: originating custom property values are used for highlight pseudos</title>
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
 <link rel="match" href="highlight-styling-002-ref.html">
-<meta name="assert" value="This test verifies that custom property values set in originating elements do not participate in the substitution of those properties in ::selection styles.">
+<meta name="assert" value="This test verifies that custom property values on the originating element are used for resolving var() in a selection pseudo.">
 <script src="support/selections.js"></script>
 <link rel="stylesheet" href="support/highlights.css">
 <style>
     main {
         font-size: 7em;
         margin: 0.5em;
-        --x: red;
+        --x: green;
     }
     main::selection {
         color: white;
-        background-color: var(--x, green);
+        background-color: var(--x, red);
     }
 </style>
 <p>Test passes if the text below is white on green.
diff --git a/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001-ref.html b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001-ref.html
new file mode 100644
index 0000000000..f75017d5ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001-ref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: selected highlight highlight painting - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    div {
+      background-color: lightblue;
+      color: green;
+      width: fit-content;
+    }
+</style>
+<div id="content">When selected, the highlight color should remain.</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001.html b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001.html
new file mode 100644
index 0000000000..57078cf83b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: selected highlight highlight painting</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<meta name="assert" value="Checks that the highlight colors persist when selected.">
+<link rel="match" href="selection-over-highlight-001-ref.html">
+<style>
+    ::selection {
+      background-color: lightblue;
+    }
+    ::highlight(green) {
+      color: green;
+    }
+</style>
+<div id="content">When selected, the highlight color should remain.</div>
+<script>
+  let range = new Range();
+  range.setStart(content, 0);
+  range.setEnd(content, 1);
+  CSS.highlights.set("green", new Highlight(range));
+
+  document.execCommand("selectAll");
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html
index 279ec674b4..35f2542c76 100644
--- a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html
@@ -18,7 +18,7 @@
 </style>
 
 <p>The test passes if the following word has a magenta background.</p>
-<div>Example</div>
+<div><span>Example</span></div>
 
 <script>
   location.href = "#:~:text=Example";
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal-ref.html
new file mode 100644
index 0000000000..6189f844b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on horizontal target text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    :root {
+        line-height: 1;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    span {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5), 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+</style>
+<p>the <span>target</span> should have a shadow</p>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal.html
new file mode 100644
index 0000000000..1ded1360ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on horizontal target text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="target-text-shadow-horizontal-ref.html">
+<meta name="assert" value="::target-text with a shadow is painted, including originating element shadows">
+<style>
+    :root {
+        line-height: 1;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    p::target-text {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5);
+    }
+</style>
+<p>the target should have a shadow</p>
+<script>
+    window.location.hash = "#:~:text=target";
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical-ref.html
new file mode 100644
index 0000000000..cd9e179053
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical-ref.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on vertical target text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    :root {
+        line-height: 1;
+        writing-mode: vertical-lr;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    span {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5), 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+</style>
+<p>the <span>target</span> should have a shadow</p>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical.html
new file mode 100644
index 0000000000..088f6fc175
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on vertical target text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="target-text-shadow-vertical-ref.html">
+<meta name="assert" value="::target-text with a shadow is painted, including originating element shadows">
+<style>
+    :root {
+        line-height: 1;
+        writing-mode: vertical-lr;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    p::target-text {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5);
+    }
+</style>
+<p>the target should have a shadow</p>
+<script>
+    window.location.hash = "#:~:text=target";
+</script>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-06-12 05:35:37 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-06-12 05:35:37 +0000
commit	a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch)
tree	532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/css/css-pseudo
parent	Adding debian version 126.0.1-1. (diff)
download	firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip