[css-pseudo] add highlight tests for custom properties and/or inherit…

…edness (#30692) * [css-pseudo] add highlight inheritedness tests * fix link@rel=help and move link@rel=author below title
web-platform-tests · Sep 21, 2021 · cff2177 · cff2177
1 parent 809b09c
commit cff2177
Show file tree

Hide file tree

Showing 8 changed files with 288 additions and 0 deletions.
diff --git a/css/css-pseudo/highlight-cascade-001-ref.html b/css/css-pseudo/highlight-cascade-001-ref.html
@@ -0,0 +1,18 @@
+<!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 > span::selection {
+        background-color: green;
+        color: white;
+    }
+</style>
+<p>Test passes if the text below is white on green.
+<main class="highlight_reftest"><span>quick</span></main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-cascade-001.html b/css/css-pseudo/highlight-cascade-001.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight cascade: unset is treated like inherit regardless of whether property is inherited</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-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">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        background-color: green;
+        color: white;
+    }
+    main > span::selection {
+        background-color: unset;
+        color: unset;
+    }
+</style>
+<p>Test passes if the text below is white on green.
+<main class="highlight_reftest"><span>quick</span></main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-cascade-002-ref.html b/css/css-pseudo/highlight-cascade-002-ref.html
@@ -0,0 +1,42 @@
+<!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/css/css-pseudo/highlight-cascade-002.html b/css/css-pseudo/highlight-cascade-002.html
@@ -0,0 +1,120 @@
+<!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/css/css-pseudo/highlight-styling-001-ref.html b/css/css-pseudo/highlight-styling-001-ref.html
@@ -0,0 +1,18 @@
+<!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: white;
+        background-color: green;
+    }
+</style>
+<p>Test passes if the text below is white on green.
+<main class="highlight_reftest">quick</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-styling-001.html b/css/css-pseudo/highlight-styling-001.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight styling: custom properties are 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.">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        --x: green;
+        color: white;
+        background-color: var(--x);
+    }
+</style>
+<p>Test passes if the text below is white on green.
+<main class="highlight_reftest">quick</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-styling-002-ref.html b/css/css-pseudo/highlight-styling-002-ref.html
@@ -0,0 +1,18 @@
+<!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: white;
+        background-color: green;
+    }
+</style>
+<p>Test passes if the text below is white on green.
+<main class="highlight_reftest">quick</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-styling-002.html b/css/css-pseudo/highlight-styling-002.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight styling: originating custom property values do not affect 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.">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+        --x: red;
+    }
+    main::selection {
+        color: white;
+        background-color: var(--x, green);
+    }
+</style>
+<p>Test passes if the text below is white on green.
+<main class="highlight_reftest">quick</main>
+<script>selectNodeContents(document.querySelector("main"));</script>