orthogonal-wm-container-query.html (1079B)
1 <!doctype html> 2 <title>CSS Container Queries Test: Orthogonal writing-mode change in @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 <link rel="stylesheet" href="/fonts/ahem.css"> 8 <style> 9 #container { 10 container-type: size; 11 width: 50vw; 12 height: 50vh; 13 } 14 #orthogonal { 15 font: 50px/1 Ahem; 16 } 17 @container (max-width: 100px) { 18 #orthogonal { 19 writing-mode: vertical-lr; 20 } 21 } 22 </style> 23 <div id="container"> 24 <div id="orthogonal">XX</div> 25 </div> 26 <script> 27 setup(() => assert_implements_size_container_queries()); 28 29 test(() => { 30 assert_equals(orthogonal.offsetWidth, container.offsetWidth); 31 }, "Initial non-orthogonal width"); 32 33 test(() => { 34 container.style.width = "100px"; 35 assert_equals(orthogonal.offsetWidth, 50); 36 assert_not_equals(orthogonal.offsetWidth, container.offsetWidth); 37 }, "Orthogonal width"); 38 </script>