multicol-container-001.html (1061B)
1 <!doctype html> 2 <title>CSS Container Queries Test: Query multicol container</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 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 #multicol { 9 container-type: inline-size; 10 width: 400px; 11 column-count: 2; 12 column-gap: 0; 13 } 14 @container (width = 400px) { 15 #first-child { color: green; } 16 #second-child { color: green; } 17 } 18 </style> 19 <div id="multicol"> 20 <div id="first-child">First</div> 21 <div id="second-child">Second</div> 22 </div> 23 <script> 24 setup(() => assert_implements_size_container_queries()); 25 26 test(() => { 27 const green = "rgb(0, 128, 0)"; 28 assert_equals(getComputedStyle(document.querySelector("#first-child")).color, green); 29 assert_equals(getComputedStyle(document.querySelector("#second-child")).color, green); 30 }, "Children of multicol inline-size container should match inline-size of the container"); 31 </script>