marker-content-014.html (1593B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Test: ::marker pseudo elements styled with 'content' property</title> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 6 <link rel="match" href="marker-content-014-ref.html"> 7 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> 8 <link rel="help" href="https://drafts.csswg.org/css-values/#viewport-relative-lengths"> 9 <meta name="assert" content="Checks that viewport units in ::marker are recalculated when viewport size changes."> 10 <style> 11 iframe { 12 width: 300px; 13 border: none; 14 } 15 iframe.big { 16 width: 600px; 17 } 18 </style> 19 <body> 20 <script src="/common/reftest-wait.js"></script> 21 <script> 22 "use strict"; 23 const code = ` 24 <!DOCTYPE html> 25 <style> 26 ::marker { 27 font-size: 3vw; 28 } 29 ol { 30 float: left; 31 } 32 .inside { 33 list-style-position: inside; 34 } 35 .decimal { 36 list-style-type: decimal; 37 } 38 .string { 39 list-style-type: "1. "; 40 } 41 .marker::marker { 42 content: "1. "; 43 } 44 </style> 45 <ol> 46 <li class="decimal">item</li> 47 <li class="string">item</li> 48 <li class="marker">item</li> 49 </ol> 50 <ol class="inside"> 51 <li class="decimal">item</li> 52 <li class="string">item</li> 53 <li class="marker">item</li> 54 </ol> 55 `; 56 const iframe = document.createElement("iframe"); 57 iframe.src = "data:text/html," + encodeURI(code); 58 iframe.addEventListener("load", function() { 59 requestAnimationFrame(() => { 60 iframe.classList.add("big"); 61 takeScreenshot(); 62 }); 63 }, {once: true}); 64 document.body.appendChild(iframe); 65 </script> 66 </body> 67 </html>