counters-in-container-dynamic.html (636B)
1 <!doctype html> 2 <title>CSS Container Queries Test: counter updates</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-type"> 4 <link rel="match" href="counters-ref.html"> 5 <style> 6 #container { 7 container-type: size; 8 width: 200px; 9 height: 200px; 10 } 11 12 #counter::before { 13 content: counter(my-counter); 14 } 15 16 @container (min-width: 300px) { 17 #counter { 18 counter-reset: my-counter 100; 19 } 20 } 21 </style> 22 <p>Pass if you see the number 100 below.</p> 23 <div id="container"> 24 <div id="counter"></div> 25 </div> 26 <script> 27 container.offsetTop; 28 container.style.width = "400px"; 29 </script>