iframe-invalidation.html (1197B)
1 <!doctype html> 2 <title>@container-dependent elements respond to iframe size changes</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 iframe { 9 width: 200px; 10 height: 40px; 11 } 12 </style> 13 <iframe id=iframe srcdoc=" 14 <style> 15 div#container { 16 container-type: size; 17 height: 20px; 18 } 19 div#child { color: red; } 20 @container (min-width: 300px) { 21 div#child { color: green; } 22 } 23 </style> 24 <div id=container> 25 <div id=child>Test</div> 26 </div> 27 "></iframe> 28 <script> 29 setup(() => assert_implements_size_container_queries()); 30 31 function waitForLoad(w) { 32 return new Promise(resolve => w.addEventListener('load', resolve)); 33 } 34 35 promise_test(async () => { 36 await waitForLoad(window); 37 let inner_div = iframe.contentDocument.querySelector('div#child'); 38 assert_equals(getComputedStyle(inner_div).color, 'rgb(255, 0, 0)'); 39 40 iframe.style = 'width:400px'; 41 assert_equals(getComputedStyle(inner_div).color, 'rgb(0, 128, 0)'); 42 }) 43 </script>