iframe-in-container-invalidation.html (1670B)
1 <!DOCTYPE html> 2 <title>@container-dependent elements respond to size changes of an @container-dependent iframe</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: 200px; 12 } 13 iframe { 14 width: 200px; 15 height: 40px; 16 } 17 @container (width > 300px) { 18 iframe { width: 400px; } 19 } 20 </style> 21 <div id=container> 22 <iframe id=iframe srcdoc=" 23 <style> 24 div#container { 25 container-type: size; 26 height: 20px; 27 } 28 div#child { color: red; } 29 @container (width > 300px) { 30 div#child { color: green; } 31 } 32 </style> 33 <div id=container> 34 <div id=child>Test</div> 35 </div> 36 "></iframe> 37 </div> 38 <script> 39 setup(() => assert_implements_size_container_queries()); 40 41 function waitForLoad(w) { 42 return new Promise(resolve => w.addEventListener('load', resolve)); 43 } 44 45 promise_test(async () => { 46 await waitForLoad(window); 47 let inner_div = iframe.contentDocument.querySelector('div#child'); 48 assert_equals(getComputedStyle(inner_div).color, 'rgb(255, 0, 0)'); 49 50 // Changing the size of the outer container changes the size of the iframe, 51 // which in turn should change the size of the inner container (inside that 52 // iframe). 53 container.style.width = '400px'; 54 container.style.setProperty('--x', 'x'); // crbug.com/1312940 55 56 assert_equals(getComputedStyle(inner_div).color, 'rgb(0, 128, 0)'); 57 }); 58 </script>