marker-computed-size.html (2937B)
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-lists/#content-property"> 6 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 7 <meta name="assert" content="This test checks that getComputedStyle exposes the resolved sizes of a ::marker." /> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 :root { 11 --image: url('/images/green-100x50.png'); 12 } 13 :root::after { 14 /* Preload image */ 15 content: var(--image); 16 } 17 #target { 18 font: 10px/1 Ahem; 19 --content: normal; 20 } 21 #target::marker { 22 content: var(--content); 23 } 24 </style> 25 <div id="log"></div> 26 <ul> 27 <li id="target"></li> 28 </ul> 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script> 32 const target = document.getElementById("target"); 33 function checkMarkerSize(expectedWidth, expectedHeight) { 34 const {width, height} = getComputedStyle(target, "::marker"); 35 assert_equals(width, expectedWidth, "width"); 36 assert_equals(height, expectedHeight, "height"); 37 } 38 setup({explicit_done: true}); 39 addEventListener("load", () => { 40 document.fonts.load("10px Ahem").then(() => { 41 test(() => { 42 // Marker string: "1. " 43 target.style.listStyleType = "decimal"; 44 checkMarkerSize("30px", "10px"); 45 }, "Decimal ::marker"); 46 test(() => { 47 // Marker string: "10. " 48 target.setAttribute("value", "10"); 49 checkMarkerSize("40px", "10px"); 50 }, "Decimal ::marker with custom value"); 51 test(() => { 52 // Marker string: "st" 53 target.style.listStyleType = "'st'"; 54 checkMarkerSize("20px", "10px"); 55 }, "String ::marker"); 56 test(() => { 57 // No marker box 58 target.style.listStyleType = "none"; 59 checkMarkerSize("auto", "auto"); 60 }, "::marker with no box due to 'list-style'"); 61 test(() => { 62 // Marker contents: "foo", "bar" 63 target.style.setProperty("--content", "'foo' 'bar'"); 64 checkMarkerSize("60px", "10px"); 65 }, "::marker with custom string contents"); 66 test(() => { 67 // Marker contents: 100x50 image (+2px due to baseline alignment) 68 target.style.setProperty("--content", "var(--image)"); 69 checkMarkerSize("100px", "52px"); 70 }, "::marker with custom image contents"); 71 test(() => { 72 // Marker contents: "foo", 100x50 image (+2px due to baseline alignment) 73 target.style.setProperty("--content", "'foo' var(--image)"); 74 checkMarkerSize("130px", "52px"); 75 }, "::marker with custom string and image contents"); 76 test(() => { 77 // No marker box 78 target.style.listStyleType = ""; 79 target.style.setProperty("--content", "none"); 80 checkMarkerSize("auto", "auto"); 81 }, "::marker with no box due to 'content'"); 82 done(); 83 }); 84 }, {once: true}); 85 </script>