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