container-units-content-box.html (1836B)
1 <!doctype html> 2 <title>Container Relative Units: evaluate against the content box</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 .size { 9 container-type: size; 10 width:100px; 11 height:50px; 12 border: 10px solid green; 13 padding: 10px; 14 } 15 .border-box { 16 box-sizing: border-box; 17 } 18 </style> 19 <div id=ref></div> 20 <div class="size"> 21 <div id=child></div> 22 </div> 23 <div class="size border-box"> 24 <div id=child2></div> 25 </div> 26 <script> 27 setup(() => assert_implements_size_container_queries()); 28 29 function assert_unit_equals(element, actual, expected) { 30 try { 31 element.style.padding = actual; 32 ref.style.padding = expected; 33 assert_equals(getComputedStyle(element).paddingLeft, 34 getComputedStyle(ref).paddingLeft); 35 } finally { 36 element.style = ''; 37 ref.style = ''; 38 } 39 } 40 41 test(function() { 42 assert_unit_equals(child, '10cqi', '10px'); 43 assert_unit_equals(child, '10cqw', '10px'); 44 assert_unit_equals(child, '10cqb', '5px'); 45 assert_unit_equals(child, '10cqh', '5px'); 46 assert_unit_equals(child, '10cqmin', '5px'); 47 assert_unit_equals(child, '10cqmax', '10px'); 48 }, 'Container units are relative to the content box of the container'); 49 50 test(function() { 51 assert_unit_equals(child2, '10cqi', '6px'); 52 assert_unit_equals(child2, '10cqw', '6px'); 53 assert_unit_equals(child2, '10cqb', '1px'); 54 assert_unit_equals(child2, '10cqh', '1px'); 55 assert_unit_equals(child2, '10cqmin', '1px'); 56 assert_unit_equals(child2, '10cqmax', '6px'); 57 }, 'Container units are relative to the content box of the container (box-sizing: border-box)'); 58 </script>