column-spanner-in-container.html (1244B)
1 <!doctype html> 2 <title>CSS Container Queries Test: Column-spanner depending on container in column</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: 600px; 11 columns: 2; 12 column-gap: 0; 13 height: 200px; 14 } 15 #spanner { height: 100px; } 16 @container (width = 600px) { 17 #spanner { 18 column-span: all; 19 } 20 } 21 </style> 22 <div id="multicol"> 23 <div id="spanner"></div> 24 </div> 25 <script> 26 setup(() => assert_implements_size_container_queries()); 27 28 test(() => { 29 assert_equals(getComputedStyle(spanner).width, "600px"); 30 }, "#spanner matching container with column-width 300px, getting column-span:all"); 31 32 test(() => { 33 multicol.style.width = "500px"; 34 assert_equals(getComputedStyle(spanner).width, "250px"); 35 }, "Reducing #multicol width means #spanner no longer gets column-span:all"); 36 37 test(() => { 38 multicol.style.width = ""; 39 assert_equals(getComputedStyle(spanner).width, "600px"); 40 }, "Back to matching 300px and column-span:all"); 41 </script>