inline-size-containment-vertical-rl.html (1152B)
1 <!doctype html> 2 <title>CSS Container Queries Test: query of inline-size container in vertical-rl</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 5 <style> 6 #ancestry { writing-mode: vertical-rl; } 7 #keg { container-type: inline-size; } 8 @container (max-height: 200px) { 9 #target { width: 400px; } 10 } 11 @container (min-height: 400px) { 12 #target { width: 20px; } 13 } 14 </style> 15 <div id="ancestry"> 16 <div id="keg"> 17 <div id="target"> 18 <div style="width:50px;"></div> 19 </div> 20 </div> 21 </div> 22 <script src="/resources/testharness.js"></script> 23 <script src="/resources/testharnessreport.js"></script> 24 <script src="support/cq-testcommon.js"></script> 25 <script> 26 setup(() => assert_implements_size_container_queries()); 27 28 test(()=> { 29 ancestry.style.height = "100px"; 30 assert_equals(keg.offsetWidth, 400); 31 32 ancestry.style.height = "300px"; 33 assert_equals(keg.offsetWidth, 50); 34 35 ancestry.style.height = "500px"; 36 assert_equals(keg.offsetWidth, 20); 37 }, "inline-size containment only"); 38 </script>