marker-computed-content.html (1926B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: Computed size of ::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-content/#content-property"> 6 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 7 <meta name="assert" content="This test checks that 'content' resolves correctly in ::marker." /> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .no-list > li { 11 display: block; 12 } 13 .normal::marker { 14 content: normal; 15 } 16 .string::marker { 17 content: "string"; 18 } 19 .image::marker { 20 content: url("about:invalid"); 21 } 22 .none::marker { 23 content: none; 24 } 25 </style> 26 <div id="log"></div> 27 <ol class="list"> 28 <li class="default">item</li> 29 <li class="normal">item</li> 30 <li class="string">item</li> 31 <li class="image">item</li> 32 <li class="none">item</li> 33 </ol> 34 <ol class="no-list"> 35 <li class="default">item</li> 36 <li class="normal">item</li> 37 <li class="string">item</li> 38 <li class="image">item</li> 39 <li class="none">item</li> 40 </ol> 41 <script src="/resources/testharness.js"></script> 42 <script src="/resources/testharnessreport.js"></script> 43 <script> 44 const expectations = { 45 default: 'normal', 46 normal: 'normal', 47 string: '"string"', 48 image: 'url("about:invalid")', 49 none: 'none', 50 }; 51 for (const target of document.querySelectorAll('.list > li')) { 52 const {content} = getComputedStyle(target, '::marker'); 53 test(() => { 54 assert_equals(content, expectations[target.className]); 55 }, `Computed 'content' for list-item ::marker, variant ${target.className}`); 56 } 57 for (const target of document.querySelectorAll('.no-list > li')) { 58 const {content} = getComputedStyle(target, '::marker'); 59 test(() => { 60 assert_equals(content, expectations[target.className]); 61 }, `Computed 'content' for non-list-item ::marker, variant ${target.className}`); 62 } 63 </script>