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