container-units-basic.html (1811B)
1 <!doctype html> 2 <title>Container Relative Units: cqi, cqb, etc</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 .inline { container-type: inline-size; } 9 .size { container-type: size; } 10 .inline.outer { width: 500px; } 11 .size.outer { height: 400px; } 12 .inline.inner { width: 300px; } 13 </style> 14 <div id=ref></div> 15 <div class="inline outer"> 16 <div class="size outer"> 17 <div class="inline inner"> 18 <div id=child>Test</div> 19 </div> 20 </div> 21 </div> 22 <script> 23 setup(() => assert_implements_size_container_queries()); 24 25 function assert_unit_equals(element, actual, expected) { 26 try { 27 element.style.padding = actual; 28 ref.style.padding = expected; 29 assert_equals(getComputedStyle(element).paddingLeft, 30 getComputedStyle(ref).paddingLeft); 31 } finally { 32 element.style = ''; 33 ref.style = ''; 34 } 35 } 36 37 test(function() { 38 assert_unit_equals(child, '0cqi', '0px'); 39 assert_unit_equals(child, '1cqi', '3px'); 40 assert_unit_equals(child, '10cqi', '30px'); 41 assert_unit_equals(child, '10cqw', '30px'); 42 assert_unit_equals(child, '10cqb', '40px'); 43 assert_unit_equals(child, '10cqh', '40px'); 44 assert_unit_equals(child, '10cqmin', '30px'); 45 assert_unit_equals(child, '10cqmax', '40px'); 46 }, 'Container relative units'); 47 48 test(function() { 49 assert_unit_equals(child, '10cqi', '30px'); 50 assert_unit_equals(child, '10cqb', '40px'); 51 assert_unit_equals(child, 'calc(10cqi + 10cqb)', '70px'); 52 assert_unit_equals(child, 'max(10cqi, 10cqb)', '40px'); 53 }, 'Container relative units in math functions'); 54 </script>