container-size-invalidation-after-load.html (1030B)
1 <!DOCTYPE html> 2 <title>@container: invalidation of container size after load event</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 #container { 9 container-type: size; 10 width: 200px; 11 height: 4em; 12 border: 1px solid black; 13 } 14 @container (width > 300px) { 15 #child { color: green; } 16 } 17 </style> 18 <div id=container> 19 <div id=child> 20 Green 21 </div> 22 </div> 23 <script> 24 setup(() => assert_implements_size_container_queries()); 25 26 function waitForLoad(w) { 27 return new Promise(resolve => w.addEventListener('load', resolve)); 28 } 29 30 promise_test(async () => { 31 await waitForLoad(window); 32 container.offsetTop; 33 34 container.style.width = '400px'; 35 container.style.setProperty('--x', 'x'); // crbug.com/1321010 36 37 assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)'); 38 }); 39 </script>