| <!doctype html> |
| <title>Container Relative Units: Advanced Container Selection</title> |
| <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/cq-testcommon.js"></script> |
| <style> |
| * { writing-mode: initial; } |
| .inline { container-type: inline-size; } |
| .size { container-type: size; } |
| .vertical { writing-mode: vertical-rl; } |
| .w500 { width: 500px; } |
| .h400 { height: 400px; } |
| .w300 { width: 300px; } |
| .h200 { height: 200px; } |
| .w100 { width: 100px; } |
| </style> |
| <div id=ref></div> |
| <div id=c1> |
| <div id=c2> |
| <div id=c3> |
| <div id=c4> |
| <div id=child>Test</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script> |
| setup(() => assert_implements_size_container_queries()); |
| |
| function assert_unit_equals(element, actual, expected) { |
| try { |
| element.style.margin = actual; |
| ref.style.margin = expected; |
| assert_equals(getComputedStyle(element).marginLeft, |
| getComputedStyle(ref).marginLeft); |
| } finally { |
| element.style = ''; |
| ref.style = ''; |
| } |
| } |
| |
| test(() => { |
| try { |
| c1.className = 'inline w500'; // Selected by nothing. |
| c2.className = 'size h400 w300'; // Selected by cqh, cqb. |
| c3.className = 'inline w100'; // Selected by cqw, cqi. |
| assert_unit_equals(child, '10cqw', '10px'); |
| assert_unit_equals(child, '10cqi', '10px'); |
| assert_unit_equals(child, '10cqh', '40px'); |
| assert_unit_equals(child, '10cqb', '40px'); |
| assert_unit_equals(child, '10cqmin', '10px'); |
| assert_unit_equals(child, '10cqmax', '40px'); |
| assert_unit_equals(child, '-10cqmin', '-10px'); |
| assert_unit_equals(child, '-10cqmax', '-40px'); |
| |
| c3.className = ''; // cqw, cqi now selects c2 instead. |
| assert_unit_equals(child, '10cqw', '30px'); |
| assert_unit_equals(child, '10cqi', '30px'); |
| assert_unit_equals(child, '10cqh', '40px'); |
| assert_unit_equals(child, '10cqb', '40px'); |
| assert_unit_equals(child, '10cqmin', '30px'); |
| assert_unit_equals(child, '10cqmax', '40px'); |
| assert_unit_equals(child, '-10cqmin', '-30px'); |
| assert_unit_equals(child, '-10cqmax', '-40px'); |
| |
| } finally { |
| for (let c of [c1, c2, c3, c4, child]) |
| c.className = ''; |
| } |
| }, 'Container units select the proper container'); |
| |
| test(() => { |
| try { |
| c1.className = 'size w500 h400'; |
| c2.className = 'inline w300 h200'; |
| |
| // [cqi, cqb] corresponds to [cqw, cqh]. |
| assert_unit_equals(child, '10cqw', '30px'); |
| assert_unit_equals(child, '10cqi', '30px'); |
| assert_unit_equals(child, '10cqh', '40px'); |
| assert_unit_equals(child, '10cqb', '40px'); |
| |
| child.className = 'vertical'; |
| // [cqi, cqb] now corresponds to [cqh, cqw]. |
| assert_unit_equals(child, '10cqw', '30px'); |
| assert_unit_equals(child, '10cqi', '40px'); |
| assert_unit_equals(child, '10cqh', '40px'); |
| assert_unit_equals(child, '10cqb', '30px'); |
| |
| c2.classList.add('vertical'); |
| // The inline containment on #c2 now applies to the vertical axis. |
| // [cqi, cqb] still corresponds to [cqh, cqw], but we now expect |
| // cqh to resolve against #c2, and cqw to resolve against #c1. |
| assert_unit_equals(child, '10cqw', '50px'); |
| assert_unit_equals(child, '10cqi', '20px'); |
| assert_unit_equals(child, '10cqh', '20px'); |
| assert_unit_equals(child, '10cqb', '50px'); |
| |
| } finally { |
| for (let c of [c1, c2, c3, c4, child]) |
| c.className = ''; |
| } |
| }, 'Units respond to the writing-mode of the element'); |
| </script> |
