scroll-state-scrollable-wm.html (5392B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrollable) matching for writing direction</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 .scrollable { 10 container-type: scroll-state; 11 width: 100px; 12 height: 100px; 13 overflow: auto; 14 &::before { 15 display: block; 16 content: " " 17 } 18 &.h::before { 19 width: 200px; 20 height: 10px; 21 } 22 &.v::before { 23 width: 10px; 24 height: 200px; 25 } 26 } 27 .target { 28 @container scroll-state(scrollable: block-start) { --block-start: yes } 29 @container scroll-state(scrollable: block-end) { --block-end: yes } 30 @container scroll-state(scrollable: inline-start) { --inline-start: yes } 31 @container scroll-state(scrollable: inline-end) { --inline-end: yes } 32 @container scroll-state(scrollable: top) { --top: yes } 33 @container scroll-state(scrollable: left) { --left: yes } 34 @container scroll-state(scrollable: bottom) { --bottom: yes } 35 @container scroll-state(scrollable: right) { --right: yes } 36 } 37 .ltr { direction: ltr; } 38 .rtl { direction: rtl; } 39 .htb { writing-mode: horizontal-tb; } 40 .vlr { writing-mode: vertical-lr; } 41 .vrl { writing-mode: vertical-rl; } 42 </style> 43 <div class="scrollable h htb ltr"><span class="target"></span></div> 44 <div class="scrollable h htb rtl"><span class="target"></span></div> 45 <div class="scrollable h vlr ltr"><span class="target"></span></div> 46 <div class="scrollable h vlr rtl"><span class="target"></span></div> 47 <div class="scrollable h vrl ltr"><span class="target"></span></div> 48 <div class="scrollable h vrl rtl"><span class="target"></span></div> 49 <div class="scrollable v htb ltr"><span class="target"></span></div> 50 <div class="scrollable v htb rtl"><span class="target"></span></div> 51 <div class="scrollable v vlr ltr"><span class="target"></span></div> 52 <div class="scrollable v vlr rtl"><span class="target"></span></div> 53 <div class="scrollable v vrl ltr"><span class="target"></span></div> 54 <div class="scrollable v vrl rtl"><span class="target"></span></div> 55 <script> 56 setup(() => assert_implements_scroll_state_container_queries()); 57 58 function match_scrollable(container_selector, expected_matches) { 59 let scroller = document.querySelector(container_selector + " .target"); 60 let style = getComputedStyle(scroller); 61 for (let custom_prop of [ "--block-start", 62 "--block-end", 63 "--inline-start", 64 "--inline-end", 65 "--top", 66 "--left", 67 "--bottom", 68 "--right" ]) { 69 assert_equals(style.getPropertyValue(custom_prop) === "yes", 70 expected_matches[custom_prop] === true, custom_prop); 71 } 72 } 73 74 promise_test(async t => { 75 await waitForAnimationFrames(2); 76 match_scrollable(".scrollable.h.htb.ltr", {"--inline-end": true, "--right": true }); 77 }, "scroll-state(scrollable) horizontal scrollbar horizontal-tb/ltr"); 78 79 promise_test(async t => { 80 match_scrollable(".scrollable.h.htb.rtl", {"--inline-end": true, "--left": true }); 81 }, "scroll-state(scrollable) horizontal scrollbar horizontal-tb/rtl"); 82 83 promise_test(async t => { 84 match_scrollable(".scrollable.h.vlr.ltr", {"--block-end": true, "--right": true }); 85 }, "scroll-state(scrollable) horizontal scrollbar vertical-lr/ltr"); 86 87 promise_test(async t => { 88 match_scrollable(".scrollable.h.vlr.rtl", {"--block-end": true, "--right": true }); 89 }, "scroll-state(scrollable) horizontal scrollbar vertical-lr/rtl"); 90 91 promise_test(async t => { 92 match_scrollable(".scrollable.h.vrl.ltr", {"--block-end": true, "--left": true }); 93 }, "scroll-state(scrollable) horizontal scrollbar vertical-rl/ltr"); 94 95 promise_test(async t => { 96 match_scrollable(".scrollable.h.vrl.rtl", {"--block-end": true, "--left": true }); 97 }, "scroll-state(scrollable) horizontal scrollbar vertical-rl/rtl"); 98 99 promise_test(async t => { 100 match_scrollable(".scrollable.v.htb.ltr", {"--block-end": true, "--bottom": true }); 101 }, "scroll-state(scrollable) vertical scrollbar horizontal-tb/ltr"); 102 103 promise_test(async t => { 104 match_scrollable(".scrollable.v.htb.rtl", {"--block-end": true, "--bottom": true }); 105 }, "scroll-state(scrollable) vertical scrollbar horizontal-tb/rtl"); 106 107 promise_test(async t => { 108 match_scrollable(".scrollable.v.vlr.ltr", {"--inline-end": true, "--bottom": true }); 109 }, "scroll-state(scrollable) vertical scrollbar vertical-lr/ltr"); 110 111 promise_test(async t => { 112 match_scrollable(".scrollable.v.vlr.rtl", {"--inline-end": true, "--top": true }); 113 }, "scroll-state(scrollable) vertical scrollbar vertical-lr/rtl"); 114 115 promise_test(async t => { 116 match_scrollable(".scrollable.v.vrl.ltr", {"--inline-end": true, "--bottom": true }); 117 }, "scroll-state(scrollable) vertical scrollbar vertical-rl/ltr"); 118 119 promise_test(async t => { 120 match_scrollable(".scrollable.v.vrl.rtl", {"--inline-end": true, "--top": true }); 121 }, "scroll-state(scrollable) vertical scrollbar vertical-rl/rtl"); 122 123 </script>