marker-content-020.html (1999B)
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-020-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-content/#content-property"> 9 <meta name="assert" content="Checks that the ::marker is updated when 'content: none' is applied or unapplied dynamically."> 10 <style> 11 .no-marker ::marker { 12 content: none; 13 } 14 .inside { 15 list-style-position: inside; 16 } 17 .symbol { 18 list-style-type: disc; 19 } 20 .decimal { 21 list-style-type: decimal; 22 } 23 .string { 24 list-style-type: "string"; 25 } 26 .image { 27 list-style-image: url("/images/green-100x50.png"); 28 } 29 </style> 30 <div class="no-marker"> 31 <ol class="inside"> 32 <li class="symbol">inside symbol</li> 33 <li class="decimal">inside decimal</li> 34 <li class="string">inside string</li> 35 <li class="image">inside image</li> 36 </ol> 37 <ol class="outside"> 38 <li class="symbol">outside symbol</li> 39 <li class="decimal">outside decimal</li> 40 <li class="string">outside string</li> 41 <li class="image">outside image</li> 42 </ol> 43 </div> 44 <div> 45 <ol class="inside"> 46 <li class="symbol">inside symbol</li> 47 <li class="decimal">inside decimal</li> 48 <li class="string">inside string</li> 49 <li class="image">inside image</li> 50 </ol> 51 <ol class="outside"> 52 <li class="symbol">outside symbol</li> 53 <li class="decimal">outside decimal</li> 54 <li class="string">outside string</li> 55 <li class="image">outside image</li> 56 </ol> 57 </div> 58 <script src="/common/reftest-wait.js"></script> 59 <script> 60 "use strict"; 61 addEventListener("load", function() { 62 requestAnimationFrame(() => { 63 for (const div of document.querySelectorAll("div")) { 64 div.classList.toggle("no-marker"); 65 } 66 takeScreenshot(); 67 }); 68 }, {once: true}); 69 </script> 70 </html>