marker-content-014-ref.html (1159B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 6 <style> 7 iframe { 8 width: 600px; 9 border: none; 10 } 11 </style> 12 <body> 13 <script src="/common/reftest-wait.js"></script> 14 <script> 15 "use strict"; 16 const code = ` 17 <!DOCTYPE html> 18 <style> 19 ::marker { 20 font-size: 3vw; 21 } 22 ol { 23 float: left; 24 } 25 .inside { 26 list-style-position: inside; 27 } 28 .decimal { 29 list-style-type: decimal; 30 } 31 .string { 32 list-style-type: "1. "; 33 } 34 .marker::marker { 35 content: "1. "; 36 } 37 </style> 38 <ol> 39 <li class="decimal">item</li> 40 <li class="string">item</li> 41 <li class="marker">item</li> 42 </ol> 43 <ol class="inside"> 44 <li class="decimal">item</li> 45 <li class="string">item</li> 46 <li class="marker">item</li> 47 </ol> 48 `; 49 const iframe = document.createElement("iframe"); 50 iframe.src = "data:text/html," + encodeURI(code); 51 iframe.addEventListener("load", function() { 52 takeScreenshot(); 53 }, {once: true}); 54 document.body.appendChild(iframe); 55 </script> 56 </body> 57 </html>