| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <meta charset="utf-8"> |
| <title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> |
| <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> |
| <style> |
| iframe { |
| width: 600px; |
| border: none; |
| } |
| </style> |
| <body> |
| <script src="/common/reftest-wait.js"></script> |
| <script> |
| "use strict"; |
| const code = ` |
| <!DOCTYPE html> |
| <style> |
| ::marker { |
| font-size: 3vw; |
| } |
| ol { |
| float: left; |
| } |
| .inside { |
| list-style-position: inside; |
| } |
| .decimal { |
| list-style-type: decimal; |
| } |
| .string { |
| list-style-type: "1. "; |
| } |
| .marker::marker { |
| content: "1. "; |
| } |
| </style> |
| <ol> |
| <li class="decimal">item</li> |
| <li class="string">item</li> |
| <li class="marker">item</li> |
| </ol> |
| <ol class="inside"> |
| <li class="decimal">item</li> |
| <li class="string">item</li> |
| <li class="marker">item</li> |
| </ol> |
| `; |
| const iframe = document.createElement("iframe"); |
| iframe.src = "data:text/html," + encodeURI(code); |
| iframe.addEventListener("load", function() { |
| takeScreenshot(); |
| }, {once: true}); |
| document.body.appendChild(iframe); |
| </script> |
| </body> |
| </html> |
