container-units-in-at-container-fallback.html (2088B)
1 <!DOCTYPE html> 2 <title>Container Relative Units: container relative units fall back to small viewport</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 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: 320px; 11 } 12 </style> 13 <iframe id=iframe srcdoc=" 14 <style> 15 #parent { 16 container-type: inline-size; 17 width: 64px; 18 height: 50px; 19 } 20 #container { 21 container-type: size; 22 width: 32px; 23 height: 32px; 24 } 25 26 #target1, #target2 { color: green; } 27 28 /* Unit should evaluate against width of #parent */ 29 @container ((height = 32px) and (height = 50cqw)) { 30 #target1 { color: blue; } 31 } 32 33 /* Unit should evaluate against height of iframe */ 34 @container ((height = 32px) and (height = 10cqh)) { 35 #target2 { color: blue; } 36 } 37 38 </style> 39 <div id=parent> 40 <div id=container> 41 <div id=target1></div> 42 <div id=target2></div> 43 </div> 44 </div> 45 "></iframe> 46 <script> 47 setup(() => assert_implements_size_container_queries()); 48 49 function waitForLoad(w) { 50 return new Promise(resolve => w.addEventListener('load', resolve)); 51 } 52 53 promise_test(async () => { 54 await waitForLoad(window); 55 let inner_target1 = iframe.contentDocument.querySelector('#target1'); 56 let inner_target2 = iframe.contentDocument.querySelector('#target2'); 57 assert_equals(getComputedStyle(inner_target1).color, 'rgb(0, 0, 255)'); 58 assert_equals(getComputedStyle(inner_target2).color, 'rgb(0, 0, 255)'); 59 60 iframe.style = 'height:400px'; 61 62 // #target1 is not affected since it evaluated against another container. 63 // #target2 *is* affected, because it evaluated against the iframe size 64 // which just changed. 65 assert_equals(getComputedStyle(inner_target1).color, 'rgb(0, 0, 255)'); 66 assert_equals(getComputedStyle(inner_target2).color, 'rgb(0, 128, 0)'); 67 }, 'Use small viewport size as fallback'); 68 </script>