container-query.html (498B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <style> 4 #container { 5 width: 100px; 6 container-type: inline-size; 7 } 8 @container (width > 200px) { 9 #target { background-color: green } 10 } 11 </style> 12 <div id="container"> 13 <div id="target"> 14 <div id="scope">Scope</div> 15 </div> 16 </div> 17 <script> 18 onload = async () => { 19 await scope.startViewTransition(() => { 20 container.style.width = "300px"; 21 }).ready; 22 document.documentElement.classList.remove("test-wait"); 23 }; 24 </script>