container-units-selection.html (3675B)
1 <!doctype html> 2 <title>Container Relative Units: Advanced Container Selection</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 * { writing-mode: initial; } 9 .inline { container-type: inline-size; } 10 .size { container-type: size; } 11 .vertical { writing-mode: vertical-rl; } 12 .w500 { width: 500px; } 13 .h400 { height: 400px; } 14 .w300 { width: 300px; } 15 .h200 { height: 200px; } 16 .w100 { width: 100px; } 17 </style> 18 <div id=ref></div> 19 <div id=c1> 20 <div id=c2> 21 <div id=c3> 22 <div id=c4> 23 <div id=child>Test</div> 24 </div> 25 </div> 26 </div> 27 </div> 28 <script> 29 setup(() => assert_implements_size_container_queries()); 30 31 function assert_unit_equals(element, actual, expected) { 32 try { 33 element.style.margin = actual; 34 ref.style.margin = expected; 35 assert_equals(getComputedStyle(element).marginLeft, 36 getComputedStyle(ref).marginLeft); 37 } finally { 38 element.style = ''; 39 ref.style = ''; 40 } 41 } 42 43 test(() => { 44 try { 45 c1.className = 'inline w500'; // Selected by nothing. 46 c2.className = 'size h400 w300'; // Selected by cqh, cqb. 47 c3.className = 'inline w100'; // Selected by cqw, cqi. 48 assert_unit_equals(child, '10cqw', '10px'); 49 assert_unit_equals(child, '10cqi', '10px'); 50 assert_unit_equals(child, '10cqh', '40px'); 51 assert_unit_equals(child, '10cqb', '40px'); 52 assert_unit_equals(child, '10cqmin', '10px'); 53 assert_unit_equals(child, '10cqmax', '40px'); 54 assert_unit_equals(child, '-10cqmin', '-10px'); 55 assert_unit_equals(child, '-10cqmax', '-40px'); 56 57 c3.className = ''; // cqw, cqi now selects c2 instead. 58 assert_unit_equals(child, '10cqw', '30px'); 59 assert_unit_equals(child, '10cqi', '30px'); 60 assert_unit_equals(child, '10cqh', '40px'); 61 assert_unit_equals(child, '10cqb', '40px'); 62 assert_unit_equals(child, '10cqmin', '30px'); 63 assert_unit_equals(child, '10cqmax', '40px'); 64 assert_unit_equals(child, '-10cqmin', '-30px'); 65 assert_unit_equals(child, '-10cqmax', '-40px'); 66 67 } finally { 68 for (let c of [c1, c2, c3, c4, child]) 69 c.className = ''; 70 } 71 }, 'Container units select the proper container'); 72 73 test(() => { 74 try { 75 c1.className = 'size w500 h400'; 76 c2.className = 'inline w300 h200'; 77 78 // [cqi, cqb] corresponds to [cqw, cqh]. 79 assert_unit_equals(child, '10cqw', '30px'); 80 assert_unit_equals(child, '10cqi', '30px'); 81 assert_unit_equals(child, '10cqh', '40px'); 82 assert_unit_equals(child, '10cqb', '40px'); 83 84 child.className = 'vertical'; 85 // [cqi, cqb] now corresponds to [cqh, cqw]. 86 assert_unit_equals(child, '10cqw', '30px'); 87 assert_unit_equals(child, '10cqi', '40px'); 88 assert_unit_equals(child, '10cqh', '40px'); 89 assert_unit_equals(child, '10cqb', '30px'); 90 91 c2.classList.add('vertical'); 92 // The inline containment on #c2 now applies to the vertical axis. 93 // [cqi, cqb] still corresponds to [cqh, cqw], but we now expect 94 // cqh to resolve against #c2, and cqw to resolve against #c1. 95 assert_unit_equals(child, '10cqw', '50px'); 96 assert_unit_equals(child, '10cqi', '20px'); 97 assert_unit_equals(child, '10cqh', '20px'); 98 assert_unit_equals(child, '10cqb', '50px'); 99 100 } finally { 101 for (let c of [c1, c2, c3, c4, child]) 102 c.className = ''; 103 } 104 }, 'Units respond to the writing-mode of the element'); 105 </script>