fragmented-container-001.html (1346B)
1 <!doctype html> 2 <title>CSS Container Queries Test: Query fragmented inline-size 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 width: 400px; 10 column-count: 2; 11 column-fill: auto; 12 column-gap: 0; 13 height: 100px; 14 } 15 #float { 16 float: left; 17 width: 100px; 18 height: 50px; 19 } 20 #container { 21 container-type: inline-size; 22 display: flow-root; 23 height: 200px; 24 } 25 #first-child { 26 break-after: column; 27 } 28 @container (width = 100px) { 29 #first-child { color: green; } 30 #second-child { color: green; } 31 } 32 </style> 33 <div id="multicol"> 34 <div id="float"></div> 35 <div id="container"> 36 <div id="first-child"></div> 37 <div id="second-child"></div> 38 </div> 39 </div> 40 <script> 41 setup(() => assert_implements_size_container_queries()); 42 43 test(() => { 44 const green = "rgb(0, 128, 0)"; 45 assert_equals(getComputedStyle(document.querySelector("#first-child")).color, green); 46 assert_equals(getComputedStyle(document.querySelector("#second-child")).color, green); 47 }, "Children of fragmented inline-size container should match inline-size of first fragment"); 48 </script>