marker-supported-properties.html (6381B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: Supported properties in ::marker</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 6 <meta name="assert" content="This test checks that only certain properties apply to ::marker pseudo-elements." /> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/computed-testcommon.js"></script> 10 <div id="log"></div> 11 <ul> 12 <li id="target">target</li> 13 </ul> 14 <script> 15 // ::marker supports all font properties. 16 test_pseudo_computed_value("::marker", "font", "italic small-caps 900 expanded 25px / 50px Ahem", 17 ["italic small-caps 900 expanded 25px / 50px Ahem", "italic small-caps 900 expanded 25px/50px Ahem"]); 18 test_pseudo_computed_value("::marker", "font-family", "Ahem"); 19 test_pseudo_computed_value("::marker", "font-feature-settings", "\"smcp\""); 20 test_pseudo_computed_value("::marker", "font-kerning", "none"); 21 test_pseudo_computed_value("::marker", "font-size", "25px"); 22 test_pseudo_computed_value("::marker", "font-size-adjust", "1"); 23 test_pseudo_computed_value("::marker", "font-stretch", "expanded", ["expanded", "125%"]); 24 test_pseudo_computed_value("::marker", "font-style", "italic"); 25 test_pseudo_computed_value("::marker", "font-synthesis", "none"); 26 test_pseudo_computed_value("::marker", "font-synthesis-small-caps", "none"); 27 test_pseudo_computed_value("::marker", "font-synthesis-style", "none"); 28 test_pseudo_computed_value("::marker", "font-synthesis-weight", "none"); 29 test_pseudo_computed_value("::marker", "font-variant", "small-caps"); 30 test_pseudo_computed_value("::marker", "font-variant-caps", "small-caps"); 31 test_pseudo_computed_value("::marker", "font-variant-east-asian", "full-width"); 32 test_pseudo_computed_value("::marker", "font-variant-ligatures", "historical-ligatures"); 33 test_pseudo_computed_value("::marker", "font-variant-numeric", "slashed-zero"); 34 test_pseudo_computed_value("::marker", "font-variant-position", "sub"); 35 test_pseudo_computed_value("::marker", "font-weight", "900"); 36 37 // `line-height` is not a font property but is a longhand of `font`, and is also supported. 38 test_pseudo_computed_value("::marker", "line-height", "50px", "50px"); 39 40 // ::marker supports `white-space` 41 test_pseudo_computed_value("::marker", "white-space", "nowrap"); 42 43 // ::marker supports `color` 44 test_pseudo_computed_value("::marker", "color", "rgb(0, 100, 200)"); 45 46 // ::marker supports `text-combine-upright`, `unicode-bidi` and `direction` 47 test_pseudo_computed_value("::marker", "text-combine-upright", "all"); 48 test_pseudo_computed_value("::marker", "unicode-bidi", "plaintext"); 49 test_pseudo_computed_value("::marker", "direction", "rtl"); 50 51 // ::marker supports `content` 52 test_pseudo_computed_value("::marker", "content", "\"foo\""); 53 54 // ::marker supports animation properties. 55 test_pseudo_computed_value("::marker", "animation", "1s linear 2s infinite alternate forwards paused anim"); 56 test_pseudo_computed_value("::marker", "animation-delay", "1s"); 57 test_pseudo_computed_value("::marker", "animation-direction", "alternate"); 58 test_pseudo_computed_value("::marker", "animation-duration", "2s"); 59 test_pseudo_computed_value("::marker", "animation-fill-mode", "forwards"); 60 test_pseudo_computed_value("::marker", "animation-iteration-count", "infinite"); 61 test_pseudo_computed_value("::marker", "animation-name", "anim"); 62 test_pseudo_computed_value("::marker", "animation-play-state", "paused"); 63 test_pseudo_computed_value("::marker", "animation-timing-function", "linear"); 64 test_pseudo_computed_value("::marker", "animation-composition", "add"); 65 66 test_pseudo_computed_value("::marker", "animation-range", "contain 10px cover 20px"); 67 test_pseudo_computed_value("::marker", "animation-range-start", "contain 10px"); 68 test_pseudo_computed_value("::marker", "animation-range-end", "cover 20px"); 69 test_pseudo_computed_value("::marker", "animation-timeline", "scroll()"); 70 71 // ::marker supports transition properties. 72 test_pseudo_computed_value("::marker", "transition", "display 1s linear 2s"); 73 test_pseudo_computed_value("::marker", "transition-delay", "1s"); 74 test_pseudo_computed_value("::marker", "transition-duration", "2s"); 75 test_pseudo_computed_value("::marker", "transition-property", "display"); 76 test_pseudo_computed_value("::marker", "transition-timing-function", "linear"); 77 78 // ::marker supports text properties. 79 test_pseudo_computed_value("::marker", "hyphens", "none"); 80 test_pseudo_computed_value("::marker", "letter-spacing", "10px"); 81 test_pseudo_computed_value("::marker", "line-break", "anywhere"); 82 test_pseudo_computed_value("::marker", "overflow-wrap", "anywhere"); 83 test_pseudo_computed_value("::marker", "tab-size", "10px"); 84 test_pseudo_computed_value("::marker", "text-transform", "uppercase"); 85 test_pseudo_computed_value("::marker", "word-break", "break-word"); 86 test_pseudo_computed_value("::marker", "word-spacing", "10px"); 87 88 // ::marker supports inherited text decoration properties. 89 test_pseudo_computed_value("::marker", "text-decoration-skip-ink", "none"); 90 test_pseudo_computed_value("::marker", "text-emphasis", "dot rgb(0, 255, 0)"); 91 test_pseudo_computed_value("::marker", "text-emphasis-color", "rgb(0, 255, 0)"); 92 test_pseudo_computed_value("::marker", "text-emphasis-position", "under left"); 93 test_pseudo_computed_value("::marker", "text-emphasis-style", "dot"); 94 test_pseudo_computed_value("::marker", "text-shadow", "rgb(0, 255, 0) 1px 2px 3px"); 95 96 // ::marker supports `cursor`. 97 test_pseudo_computed_value("::marker", "cursor", "move"); 98 99 // ::marker does NOT support layout properties 100 test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]); 101 test_pseudo_computed_value("::marker", "position", "absolute", "static"); 102 test_pseudo_computed_value("::marker", "float", "right", "none"); 103 104 // ::marker does NOT support list properties despite being affected by them, 105 // they apply to the list item instead. 106 test_pseudo_computed_value("::marker", "list-style", "inside url('foo') decimal", "outside none disc"); 107 test_pseudo_computed_value("::marker", "list-style-image", "url('foo')", "none"); 108 test_pseudo_computed_value("::marker", "list-style-position", "inside", "outside"); 109 test_pseudo_computed_value("::marker", "list-style-type", "decimal", "disc"); 110 </script>