marker-default-styles.html (1805B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: Default styles for ::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 ::marker gets assigned some styles in UA origin." /> 7 <style> 8 .outside { list-style-position: outside } 9 .inside { list-style-position: inside } 10 .symbol { list-style-type: symbol } 11 .decimal { list-style-type: decimal } 12 .string { list-style-type: "string" } 13 .marker::marker { content: "marker" } 14 li { 15 /* These inheritable properties should not be inherited by ::marker */ 16 text-transform: lowercase; 17 text-indent: 1px; 18 } 19 </style> 20 <div id="log"></div> 21 <ul> 22 <li class="outside symbol">outside symbol</li> 23 <li class="outside decimal">outside decimal</li> 24 <li class="outside string">outside string</li> 25 <li class="outside marker">outside marker</li> 26 <li class="inside symbol">inside symbol</li> 27 <li class="inside decimal">inside decimal</li> 28 <li class="inside string">inside string</li> 29 <li class="inside marker">inside marker</li> 30 </ul> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/css/support/computed-testcommon.js"></script> 34 <script> 35 const defaultStyles = [ 36 ["unicode-bidi", "isolate"], 37 ["font-variant-numeric", "tabular-nums"], 38 ["text-transform", "none"], 39 ["text-indent", "0px"], 40 ]; 41 for (const target of document.querySelectorAll("li")) { 42 const cs = getComputedStyle(target, "::marker"); 43 for (const [prop, value] of defaultStyles) { 44 test(function() { 45 assert_equals(cs.getPropertyValue(prop), value); 46 }, `Computed value of '${prop}' for ${target.className}`); 47 } 48 } 49 </script>