| <!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 Ahem", "italic small-caps 500 expanded 15px/normal 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-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", |
| }, |
| |
| // ::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 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", |
| }, |
| |
| // ::marker does NOT support `line-height` because, despite being a |
| // longhand of `font`, it's not a font property. |
| { |
| property: "line-height", |
| from: "20px", |
| to: "50px", |
| midPoint: "normal", |
| }, |
| ]; |
| |
| 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> |