marker-display-computed.html (1955B)
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="help" href="https://drafts.csswg.org/css-lists/#list-style-position"> 6 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 7 <meta name="assert" content="This test checks the computed 'display' value of ::marker pseudo-elements." /> 8 <style> 9 .inside { 10 list-style-position: inside; 11 } 12 .color::marker { 13 color: blue; 14 } 15 .string { 16 list-style-type: "string"; 17 } 18 .content::marker { 19 content: "content"; 20 } 21 </style> 22 <div id="log"></div> 23 <ol class="inside"> 24 <li class="default">item</li> 25 <li class="color">item</li> 26 <li class="string">item</li> 27 <li class="content">item</li> 28 </ol> 29 <ol class="outside"> 30 <li class="default">item</li> 31 <li class="color">item</li> 32 <li class="string">item</li> 33 <li class="content">item</li> 34 </ol> 35 <script src="/resources/testharness.js"></script> 36 <script src="/resources/testharnessreport.js"></script> 37 <script src="/css/support/computed-testcommon.js"></script> 38 <script> 39 const inside = document.querySelectorAll(".inside > li"); 40 for (const target of inside) { 41 const {display} = getComputedStyle(target, "::marker"); 42 test(() => { 43 assert_equals(display, "inline", "Inside markers should be inline"); 44 }, `Computed 'display' for inside ::marker, variant ${target.className}`); 45 } 46 47 const outside = document.querySelectorAll(".outside > li"); 48 const firstDisplay = getComputedStyle(outside[0], "::marker").display; 49 for (const target of outside) { 50 const {display} = getComputedStyle(target, "::marker"); 51 test(() => { 52 assert_in_array(display, ["inline-block", "block"], "Outside markers should be block containers"); 53 assert_equals(display, firstDisplay, "The 'display' value shouldn't vary"); 54 }, `Computed 'display' for outside ::marker, variant ${target.className}`); 55 } 56 </script>