viewport-units-dynamic.html (1971B)
1 <!doctype html> 2 <title>CSS Container Queries Test: @container-dependent elements respond to viewport unit 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: 100px; 10 height: 100px; 11 } 12 </style> 13 <iframe id="iframe" srcdoc=" 14 <style> 15 #vw, #vh { 16 container-type: inline-size; 17 width: 100px; 18 } 19 20 @container (min-width: 50vw) { 21 #vw span { color: green } 22 } 23 @container (min-width: 100vw) { 24 #vw span { color: red } 25 } 26 @container (min-width: 50vh) { 27 #vh span { color: green } 28 } 29 @container (min-width: 100vh) { 30 #vh span { color: red } 31 } 32 </style> 33 <div id=vw><span>Green</span></div> 34 <div id=vh><span>Green</span></div> 35 "></iframe> 36 <script> 37 setup(() => assert_implements_size_container_queries()); 38 39 function waitForLoad(w) { 40 return new Promise(resolve => w.addEventListener('load', resolve)); 41 } 42 43 promise_test(async () => { 44 await waitForLoad(window); 45 const vw_child = iframe.contentDocument.querySelector("#vw > span"); 46 const vh_child = iframe.contentDocument.querySelector("#vh > span"); 47 48 assert_equals(getComputedStyle(vw_child).color, "rgb(255, 0, 0)", "vw before resize"); 49 assert_equals(getComputedStyle(vh_child).color, "rgb(255, 0, 0)", "vh before resize"); 50 51 iframe.style.width = "200px"; 52 assert_equals(getComputedStyle(vw_child).color, "rgb(0, 128, 0)", "vw after width resize"); 53 assert_equals(getComputedStyle(vh_child).color, "rgb(255, 0, 0)", "vh after width resize"); 54 55 iframe.style.height = "200px"; 56 assert_equals(getComputedStyle(vw_child).color, "rgb(0, 128, 0)", "vw after height resize"); 57 assert_equals(getComputedStyle(vh_child).color, "rgb(0, 128, 0)", "vh after height resize"); 58 }); 59 </script>