pseudo-elements-012.html (955B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>CSS Container Queries Test: ::highlight pseudo size container change</title> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#query-container"> 5 <link rel="match" href="pseudo-elements-010-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <style> 8 #container { 9 width: 300px; 10 container-type: inline-size; 11 } 12 #container::highlight(hi) { 13 color: red; 14 background: transparent; 15 } 16 @container (width >= 400px) { 17 #container::highlight(hi) { 18 color: green; 19 background: transparent; 20 } 21 } 22 </style> 23 <div id="container">Highlight</div> 24 <script> 25 let highlight_range = document.createRange(); 26 highlight_range.selectNode(container); 27 CSS.highlights.set("hi", new Highlight(highlight_range)); 28 29 requestAnimationFrame(() => { 30 requestAnimationFrame(() => { 31 container.style.width = "500px"; 32 takeScreenshot(); 33 }); 34 }); 35 </script>