scroll-state-scrollable-axis.html (2276B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrollable) axis matching</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrollable"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 7 <script src="/css/css-transitions/support/helper.js"></script> 8 <style> 9 .scroller { 10 writing-mode: vertical-lr; 11 width: 200px; 12 height: 200px; 13 container-type: scroll-state; 14 overflow: scroll; 15 } 16 .scroller.horizontal::after { 17 content: " "; 18 display: block; 19 width: 10000px; 20 height: 10px; 21 } 22 .scroller.vertical::after { 23 content: " "; 24 display: block; 25 width: 10px; 26 height: 10000px; 27 } 28 span { 29 --inline: no; 30 --block: no; 31 --x: no; 32 --y: no; 33 } 34 @container scroll-state(scrollable: inline) { 35 span { --inline: yes; } 36 } 37 @container scroll-state(scrollable: block) { 38 span { --block: yes; } 39 } 40 @container scroll-state(scrollable: x) { 41 span { --x: yes; } 42 } 43 @container scroll-state(scrollable: y) { 44 span { --y: yes; } 45 } 46 </style> 47 <div class="horizontal scroller"><span id="t1"></span></div> 48 <div class="vertical scroller"><span id="t2"></span></div> 49 <script> 50 setup(() => assert_implements_scroll_state_container_queries()); 51 52 promise_test(async t => { 53 await waitForAnimationFrames(2); 54 assert_equals(getComputedStyle(t1).getPropertyValue("--x"), "yes", "x-axis"); 55 assert_equals(getComputedStyle(t1).getPropertyValue("--y"), "no", "y-axis"); 56 assert_equals(getComputedStyle(t1).getPropertyValue("--block"), "yes", "block-axis"); 57 assert_equals(getComputedStyle(t1).getPropertyValue("--inline"), "no", "inline-axis"); 58 }, "Horizontal scroller with orthogonal writing mode"); 59 60 promise_test(async t => { 61 assert_equals(getComputedStyle(t2).getPropertyValue("--x"), "no", "x-axis"); 62 assert_equals(getComputedStyle(t2).getPropertyValue("--y"), "yes", "y-axis"); 63 assert_equals(getComputedStyle(t2).getPropertyValue("--block"), "no", "block-axis"); 64 assert_equals(getComputedStyle(t2).getPropertyValue("--inline"), "yes", "inline-axis"); 65 }, "Vertical scroller with orthogonal writing mode"); 66 67 </script>