summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-pseudo/parsing
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-pseudo/parsing')
-rw-r--r--testing/web-platform/tests/css/css-pseudo/parsing/highlight-pseudos.html22
-rw-r--r--testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties-in-animation.html397
-rw-r--r--testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties.html102
-rw-r--r--testing/web-platform/tests/css/css-pseudo/parsing/tree-abiding-pseudo-elements.html66
4 files changed, 587 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-pseudo/parsing/highlight-pseudos.html b/testing/web-platform/tests/css/css-pseudo/parsing/highlight-pseudos.html
new file mode 100644
index 0000000000..aa3c4e20aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/parsing/highlight-pseudos.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight selectors parsing</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+ for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error"]) {
+ test_valid_selector(`${pseudo}`);
+ test_valid_selector(`.a${pseudo}`);
+ test_valid_selector(`div ${pseudo}`);
+ test_valid_selector(`::part(my-part)${pseudo}`);
+
+ test_invalid_selector(`::before${pseudo}`);
+ test_invalid_selector(`${pseudo}.a`);
+ test_invalid_selector(`${pseudo} div`);
+ test_invalid_selector(`${pseudo}::after`);
+ test_invalid_selector(`${pseudo}:hover`);
+ test_invalid_selector(`:not(${pseudo})`);
+ }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties-in-animation.html b/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
new file mode 100644
index 0000000000..e581a78636
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Supported properties in ::marker animations</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
+<link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes">
+<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#transitions">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<meta name="assert" content="This test checks ::marker supports animations and transitions, but only for the properties that apply to ::marker." />
+<style id="style"></style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<ul>
+ <li id="target">target</li>
+</ul>
+<script>
+const interpolationTests = [
+ // ::marker supports all font properties.
+ {
+ property: "font",
+ from: "oblique normal 100 ultra-condensed 5px / 20px serif",
+ to: "italic small-caps 900 ultra-expanded 25px / 50px Ahem",
+ midPoint: ["italic small-caps 500 expanded 15px / 35px Ahem", "italic small-caps 500 expanded 15px/35px Ahem"],
+ },
+ {
+ property: "font-family",
+ from: "serif",
+ to: "Ahem",
+ midPoint: "Ahem",
+ },
+ {
+ property: "font-feature-settings",
+ from: "'c2sc'",
+ to: "'smcp'",
+ midPoint: "\"smcp\"",
+ },
+ {
+ property: "font-kerning",
+ from: "normal",
+ to: "none",
+ midPoint: "none",
+ },
+ {
+ property: "font-size",
+ from: "5px",
+ to: "25px",
+ midPoint: "15px",
+ },
+ {
+ property: "font-size-adjust",
+ from: "1",
+ to: "3",
+ midPoint: "2",
+ },
+ {
+ property: "font-stretch",
+ from: "ultra-condensed",
+ to: "ultra-expanded",
+ midPoint: ["expanded", "125%"],
+ },
+ {
+ property: "font-style",
+ from: "oblique",
+ to: "italic",
+ midPoint: "italic",
+ },
+ {
+ property: "font-synthesis",
+ from: "weight",
+ to: "none",
+ midPoint: "none",
+ },
+ {
+ property: "font-synthesis-small-caps",
+ from: "auto",
+ to: "none",
+ midPoint: "none",
+ },
+ {
+ property: "font-synthesis-style",
+ from: "auto",
+ to: "none",
+ midPoint: "none",
+ },
+ {
+ property: "font-synthesis-weight",
+ from: "auto",
+ to: "none",
+ midPoint: "none",
+ },
+ {
+ property: "font-variant",
+ from: "unicase",
+ to: "small-caps",
+ midPoint: "small-caps",
+ },
+ {
+ property: "font-variant-caps",
+ from: "unicase",
+ to: "small-caps",
+ midPoint: "small-caps",
+ },
+ {
+ property: "font-variant-east-asian",
+ from: "proportional-width",
+ to: "full-width",
+ midPoint: "full-width",
+ },
+ {
+ property: "font-variant-ligatures",
+ from: "no-historical-ligatures",
+ to: "historical-ligatures",
+ midPoint: "historical-ligatures",
+ },
+ {
+ property: "font-variant-numeric",
+ from: "ordinal",
+ to: "slashed-zero",
+ midPoint: "slashed-zero",
+ },
+ {
+ property: "font-variant-position",
+ from: "super",
+ to: "sub",
+ midPoint: "sub",
+ },
+ {
+ property: "font-weight",
+ from: "100",
+ to: "900",
+ midPoint: "500",
+ },
+
+ // `line-height` is not a font property but is a longhand of `font`, and is also supported.
+ {
+ property: "line-height",
+ from: "20px",
+ to: "50px",
+ midPoint: "35px",
+ },
+
+ // ::marker supports `white-space`
+ {
+ property: "white-space",
+ from: "pre-line",
+ to: "nowrap",
+ midPoint: "nowrap",
+ },
+
+ // ::marker supports `color`
+ {
+ property: "color",
+ from: "rgb(0, 100, 200)",
+ to: "rgb(100, 200, 0)",
+ midPoint: "rgb(50, 150, 100)",
+ },
+
+ // ::marker supports `text-combine-upright`, `unicode-bidi` and `direction`,
+ // but they are not animatable.
+ {
+ property: "text-combine-upright",
+ from: "all",
+ to: "all",
+ midPoint: null,
+ },
+ {
+ property: "unicode-bidi",
+ from: "embed",
+ to: "plaintext",
+ midPoint: null,
+ },
+ {
+ property: "direction",
+ from: "rtl",
+ to: "rtl",
+ midPoint: null,
+ },
+
+ // ::marker supports `content`
+ {
+ property: "content",
+ from: "'foo'",
+ to: "'bar'",
+ midPoint: "\"bar\"",
+ },
+
+ // ::marker supports text properties.
+ {
+ property: "hyphens",
+ from: "manual",
+ to: "none",
+ midPoint: "none",
+ },
+ {
+ property: "letter-spacing",
+ from: "0px",
+ to: "20px",
+ midPoint: "10px",
+ },
+ {
+ property: "line-break",
+ from: "strict",
+ to: "anywhere",
+ midPoint: "anywhere",
+ },
+ {
+ property: "overflow-wrap",
+ from: "break-word",
+ to: "anywhere",
+ midPoint: "anywhere",
+ },
+ {
+ property: "tab-size",
+ from: "0px",
+ to: "20px",
+ midPoint: "10px",
+ },
+ {
+ property: "text-transform",
+ from: "lowercase",
+ to: "uppercase",
+ midPoint: "uppercase",
+ },
+ {
+ property: "word-break",
+ from: "break-all",
+ to: "break-word",
+ midPoint: "break-word",
+ },
+ {
+ property: "word-spacing",
+ from: "0px",
+ to: "20px",
+ midPoint: "10px",
+ },
+
+ // ::marker supports inherited text decoration properties.
+ {
+ property: "text-decoration-skip-ink",
+ from: "auto",
+ to: "none",
+ midPoint: "none",
+ },
+ {
+ property: "text-emphasis",
+ from: "dot rgb(0, 200, 0)",
+ to: "triangle rgb(100, 0, 200)",
+ midPoint: "triangle rgb(50, 100, 100)",
+ },
+ {
+ property: "text-emphasis-color",
+ from: "rgb(0, 200, 0)",
+ to: "rgb(100, 0, 200)",
+ midPoint: "rgb(50, 100, 100)",
+ },
+ {
+ property: "text-emphasis-position",
+ from: "over right",
+ to: "under left",
+ midPoint: "under left",
+ },
+ {
+ property: "text-emphasis-style",
+ from: "filled dot",
+ to: "filled triangle",
+ midPoint: "triangle",
+ },
+ {
+ property: "text-shadow",
+ from: "rgb(0, 200, 0) 1px 2px 3px",
+ to: "rgb(100, 0, 200) 3px 2px 1px",
+ midPoint: "rgb(50, 100, 100) 2px 2px 2px",
+ },
+
+ // ::marker does NOT support layout properties
+ {
+ property: "display",
+ from: "flex",
+ to: "none",
+ midPoint: ["block", "inline", "inline-block"],
+ },
+ {
+ property: "position",
+ from: "fixed",
+ to: "absolute",
+ midPoint: "static",
+ },
+ {
+ property: "float",
+ from: "left",
+ to: "right",
+ midPoint: "none",
+ },
+
+ // ::marker does NOT support list properties despite being affected by them,
+ // they apply to the list item instead.
+ {
+ property: "list-style",
+ from: "inside url('foo') square",
+ to: "inside url('bar') decimal",
+ midPoint: "outside none disc",
+ },
+ {
+ property: "list-style-image",
+ from: "url('foo')",
+ to: "url('bar')",
+ midPoint: "none",
+ },
+ {
+ property: "list-style-position",
+ from: "inside",
+ to: "inside",
+ midPoint: "outside",
+ },
+ {
+ property: "list-style-type",
+ from: "square",
+ to: "decimal",
+ midPoint: "disc",
+ },
+];
+
+const target = document.getElementById("target");
+const styleElement = document.getElementById("style");
+const markerStyle = getComputedStyle(target, "::marker");
+
+function check({property, from, to, midPoint}) {
+ assert_true(property in markerStyle, property + " doesn't seem to be supported in the computed style");
+ assert_true(CSS.supports(property, from), `'${from}' is a supported value for ${property}.`);
+ assert_true(CSS.supports(property, to), `'${to}' is a supported value for ${property}.`);
+ const computed = markerStyle.getPropertyValue(property);
+ if (Array.isArray(midPoint)) {
+ assert_in_array(computed, midPoint);
+ } else {
+ assert_equals(computed, midPoint);
+ }
+}
+
+function testAnimations(interpolationTests) {
+ styleElement.textContent = `
+ ::marker {
+ animation: anim 2s -1s paused linear;
+ }
+ @keyframes anim {
+ from {}
+ to {}
+ }
+ `;
+ const keyframes = styleElement.sheet.cssRules[1];
+ const fromStyle = keyframes.cssRules[0].style;
+ const toStyle = keyframes.cssRules[1].style;
+ for (let {property, from, to, midPoint} of interpolationTests) {
+ fromStyle.cssText = "";
+ toStyle.cssText = "";
+ if (midPoint == null) {
+ midPoint = markerStyle.getPropertyValue(property);
+ }
+ fromStyle.setProperty(property, from);
+ toStyle.setProperty(property, to);
+ test(() => {
+ check({property, from, to, midPoint});
+ }, `Animation of ${property} in ::marker`);
+ }
+}
+
+function testTransitions(interpolationTests) {
+ styleElement.textContent = `
+ .transition::marker {
+ transition: all 2s -1s linear;
+ }
+ .from::marker {}
+ .to::marker {}
+ `;
+ const fromStyle = styleElement.sheet.cssRules[1].style;
+ const toStyle = styleElement.sheet.cssRules[2].style;
+ for (let {property, from, to, midPoint} of interpolationTests) {
+ fromStyle.cssText = "";
+ toStyle.cssText = "";
+ if (midPoint == null) {
+ midPoint = to;
+ }
+ fromStyle.setProperty(property, from);
+ toStyle.setProperty(property, to);
+ target.className = "from";
+ markerStyle.width;
+ target.classList.add("transition");
+ markerStyle.width;
+ target.classList.add("to");
+ test(() => {
+ check({property, from, to, midPoint});
+ }, `Transition of ${property} in ::marker`);
+ }
+}
+
+testAnimations(interpolationTests);
+testTransitions(interpolationTests);
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties.html b/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties.html
new file mode 100644
index 0000000000..700d04aa83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Supported properties in ::marker</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<meta name="assert" content="This test checks that only certain properties apply to ::marker pseudo-elements." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="log"></div>
+<ul>
+ <li id="target">target</li>
+</ul>
+<script>
+// ::marker supports all font properties.
+test_pseudo_computed_value("::marker", "font", "italic small-caps 900 expanded 25px / 50px Ahem",
+ ["italic small-caps 900 expanded 25px / 50px Ahem", "italic small-caps 900 expanded 25px/50px Ahem"]);
+test_pseudo_computed_value("::marker", "font-family", "Ahem");
+test_pseudo_computed_value("::marker", "font-feature-settings", "\"smcp\"");
+test_pseudo_computed_value("::marker", "font-kerning", "none");
+test_pseudo_computed_value("::marker", "font-size", "25px");
+test_pseudo_computed_value("::marker", "font-size-adjust", "1");
+test_pseudo_computed_value("::marker", "font-stretch", "expanded", ["expanded", "125%"]);
+test_pseudo_computed_value("::marker", "font-style", "italic");
+test_pseudo_computed_value("::marker", "font-synthesis", "none");
+test_pseudo_computed_value("::marker", "font-synthesis-small-caps", "none");
+test_pseudo_computed_value("::marker", "font-synthesis-style", "none");
+test_pseudo_computed_value("::marker", "font-synthesis-weight", "none");
+test_pseudo_computed_value("::marker", "font-variant", "small-caps");
+test_pseudo_computed_value("::marker", "font-variant-caps", "small-caps");
+test_pseudo_computed_value("::marker", "font-variant-east-asian", "full-width");
+test_pseudo_computed_value("::marker", "font-variant-ligatures", "historical-ligatures");
+test_pseudo_computed_value("::marker", "font-variant-numeric", "slashed-zero");
+test_pseudo_computed_value("::marker", "font-variant-position", "sub");
+test_pseudo_computed_value("::marker", "font-weight", "900");
+
+// `line-height` is not a font property but is a longhand of `font`, and is also supported.
+test_pseudo_computed_value("::marker", "line-height", "50px", "50px");
+
+// ::marker supports `white-space`
+test_pseudo_computed_value("::marker", "white-space", "nowrap");
+
+// ::marker supports `color`
+test_pseudo_computed_value("::marker", "color", "rgb(0, 100, 200)");
+
+// ::marker supports `text-combine-upright`, `unicode-bidi` and `direction`
+test_pseudo_computed_value("::marker", "text-combine-upright", "all");
+test_pseudo_computed_value("::marker", "unicode-bidi", "plaintext");
+test_pseudo_computed_value("::marker", "direction", "rtl");
+
+// ::marker supports `content`
+test_pseudo_computed_value("::marker", "content", "\"foo\"");
+
+// ::marker supports animation properties.
+test_pseudo_computed_value("::marker", "animation", "1s linear 2s infinite alternate forwards paused anim");
+test_pseudo_computed_value("::marker", "animation-delay", "1s");
+test_pseudo_computed_value("::marker", "animation-direction", "alternate");
+test_pseudo_computed_value("::marker", "animation-duration", "2s");
+test_pseudo_computed_value("::marker", "animation-fill-mode", "forwards");
+test_pseudo_computed_value("::marker", "animation-iteration-count", "infinite");
+test_pseudo_computed_value("::marker", "animation-name", "anim");
+test_pseudo_computed_value("::marker", "animation-play-state", "paused");
+test_pseudo_computed_value("::marker", "animation-timing-function", "linear");
+test_pseudo_computed_value("::marker", "animation-composition", "add");
+
+// ::marker supports transition properties.
+test_pseudo_computed_value("::marker", "transition", "display 1s linear 2s");
+test_pseudo_computed_value("::marker", "transition-delay", "1s");
+test_pseudo_computed_value("::marker", "transition-duration", "2s");
+test_pseudo_computed_value("::marker", "transition-property", "display");
+test_pseudo_computed_value("::marker", "transition-timing-function", "linear");
+
+// ::marker supports text properties.
+test_pseudo_computed_value("::marker", "hyphens", "none");
+test_pseudo_computed_value("::marker", "letter-spacing", "10px");
+test_pseudo_computed_value("::marker", "line-break", "anywhere");
+test_pseudo_computed_value("::marker", "overflow-wrap", "anywhere");
+test_pseudo_computed_value("::marker", "tab-size", "10px");
+test_pseudo_computed_value("::marker", "text-transform", "uppercase");
+test_pseudo_computed_value("::marker", "word-break", "break-word");
+test_pseudo_computed_value("::marker", "word-spacing", "10px");
+
+// ::marker supports inherited text decoration properties.
+test_pseudo_computed_value("::marker", "text-decoration-skip-ink", "none");
+test_pseudo_computed_value("::marker", "text-emphasis", "dot rgb(0, 255, 0)");
+test_pseudo_computed_value("::marker", "text-emphasis-color", "rgb(0, 255, 0)");
+test_pseudo_computed_value("::marker", "text-emphasis-position", "under left");
+test_pseudo_computed_value("::marker", "text-emphasis-style", "dot");
+test_pseudo_computed_value("::marker", "text-shadow", "rgb(0, 255, 0) 1px 2px 3px");
+
+// ::marker does NOT support layout properties
+test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]);
+test_pseudo_computed_value("::marker", "position", "absolute", "static");
+test_pseudo_computed_value("::marker", "float", "right", "none");
+
+// ::marker does NOT support list properties despite being affected by them,
+// they apply to the list item instead.
+test_pseudo_computed_value("::marker", "list-style", "inside url('foo') decimal", "outside none disc");
+test_pseudo_computed_value("::marker", "list-style-image", "url('foo')", "none");
+test_pseudo_computed_value("::marker", "list-style-position", "inside", "outside");
+test_pseudo_computed_value("::marker", "list-style-type", "decimal", "disc");
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/parsing/tree-abiding-pseudo-elements.html b/testing/web-platform/tests/css/css-pseudo/parsing/tree-abiding-pseudo-elements.html
new file mode 100644
index 0000000000..7839a38049
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/parsing/tree-abiding-pseudo-elements.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Parsing tree-abiding pseudo-elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#treelike">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<meta name="assert" content="This test checks the validity of various selectors containing tree-abiding pseudo-elements." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+// Generated content pseudo-elements
+test_valid_selector("::before");
+test_valid_selector("*::before", "::before");
+test_valid_selector("foo.bar[baz]::before");
+test_invalid_selector("::before *");
+
+test_valid_selector("::after");
+test_valid_selector("*::after", "::after");
+test_valid_selector("foo.bar[baz]::after");
+test_invalid_selector("::after *");
+
+// List marker pseudo-element
+test_valid_selector("::marker");
+test_valid_selector("*::marker", "::marker");
+test_valid_selector("foo.bar[baz]::marker");
+test_invalid_selector("::marker *");
+
+// Placeholder input pseudo-element
+test_valid_selector("::placeholder");
+test_valid_selector("*::placeholder", "::placeholder");
+test_valid_selector("foo.bar[baz]::placeholder");
+test_invalid_selector("::placeholder *");
+
+// ::file-selector-button
+test_valid_selector("::file-selector-button");
+test_valid_selector("::file-selector-button:hover");
+test_valid_selector("::file-selector-button:focus");
+test_valid_selector("::file-selector-button:active");
+test_valid_selector("::file-selector-button:is(:hover)");
+
+test_invalid_selector("::file-selector-button::before");
+test_invalid_selector("::file-selector-button#id");
+test_invalid_selector("::file-selector-button#class");
+test_invalid_selector("::file-selector-button:host");
+
+// Combinations of the above
+test_invalid_selector("::before::before");
+test_invalid_selector("::after::before");
+test_invalid_selector("::marker::before");
+test_invalid_selector("::placeholder::before");
+
+test_invalid_selector("::before::after");
+test_invalid_selector("::after::after");
+test_invalid_selector("::marker::after");
+test_invalid_selector("::placeholder::after");
+
+test_valid_selector("::before::marker");
+test_valid_selector("::after::marker");
+test_invalid_selector("::marker::marker");
+test_invalid_selector("::placeholder::marker");
+
+test_invalid_selector("::before::placeholder");
+test_invalid_selector("::after::placeholder");
+test_invalid_selector("::marker::placeholder");
+test_invalid_selector("::placeholder::placeholder");
+</script>