diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-pseudo')
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 > 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, <span> 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> |