scrollsnapchanging-on-user-scroll.tentative.html (7644B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/dom/events/scrolling/scroll_support.js"></script> 10 <script src="/css/css-scroll-snap/snap-events/resources/common.js"></script> 11 <script src="/css/css-scroll-snap/snap-events/resources/user-scroll-common.js"></script> 12 <script src="/web-animations/testcommon.js"></script> 13 </head> 14 15 <body> 16 <style> 17 #scroller { 18 height: 400px; 19 width: 400px; 20 position: relative; 21 overflow: scroll; 22 scroll-snap-type: y mandatory; 23 border: solid 1px black; 24 } 25 .box { 26 position: absolute; 27 left: 150px; 28 height: 350px; 29 width: 100px; 30 border: solid 1px white; 31 } 32 .snap { 33 scroll-snap-align: start; 34 } 35 .blue { 36 background-color: blue; 37 } 38 .green { 39 background-color: green; 40 } 41 .yellow { 42 background-color: yellow; 43 } 44 #snap_area_1 { 45 top: 0px; 46 } 47 #snap_area_2 { 48 top: 352px; 49 } 50 #snap_area_3 { 51 top: 704px; 52 } 53 .large_space { 54 height: 400vh; 55 width: 400vw; 56 position: absolute; 57 } 58 </style> 59 <div id="scroller"> 60 <div class="large_space"></div> 61 <div id="snap_area_1" class="blue snap box"></div> 62 <div id="snap_area_2" class="green snap box"></div> 63 <div id="snap_area_3" class="yellow snap box"></div> 64 </div> 65 <script> 66 const scroller = document.getElementById("scroller"); 67 const snap_area_2 = document.getElementById("snap_area_2"); 68 const snap_area_1 = document.getElementById("snap_area_1"); 69 70 // Touch scroll test. 71 promise_test(async (t) => { 72 await waitForCompositorCommit(); 73 const scroller_middle = Math.round(scroller.clientWidth / 2); 74 const test_data = { 75 scroller: scroller, 76 scrolling_function: async () => { 77 const start_pos = { x: scroller_middle, y: snap_area_2.offsetTop }; 78 const end_pos = { x: scroller_middle, y: 0 }; 79 await snap_event_touch_scroll_helper(start_pos, end_pos); 80 }, 81 expected_snap_targets: { block: snap_area_2, inline: null }, 82 expected_scroll_offsets: { 83 x: 0, 84 y: snap_area_2.offsetTop 85 } 86 }; 87 await test_snap_event(t, test_data, "scrollsnapchanging"); 88 }, "touch scrolling fires scrollsnapchanging."); 89 90 // Wheel scroll test. 91 promise_test(async (t) => { 92 await waitForCompositorCommit(); 93 const test_data = { 94 scroller: scroller, 95 scrolling_function: async () => { 96 await new test_driver.Actions().scroll(0, 0, 0, 97 Math.round(snap_area_2.offsetTop / 2) + 1, 98 { origin: scroller }).send(); 99 }, 100 expected_snap_targets: { block: snap_area_2, inline: null }, 101 expected_scroll_offsets: { 102 x: 0, 103 y: snap_area_2.offsetTop 104 } 105 }; 106 await test_snap_event(t, test_data, "scrollsnapchanging"); 107 }, "mouse wheel scroll triggers scrollsnapchanging."); 108 109 // Scrollbar drag test. 110 promise_test(async (t) => { 111 await waitForCompositorCommit(); 112 // Skip test on platforms that do not have a visible scrollbar (e.g. 113 // overlay scrollbar). 114 const scrollbar_width = scroller.offsetWidth - scroller.clientWidth; 115 if (scrollbar_width == 0) 116 return; 117 const test_data = { 118 scroller: scroller, 119 scrolling_function: async () => { 120 const scrollbar_to_scroller_ratio = 121 getScrollbarToScrollerRatio(scroller); 122 // Scroll by just over half of the top box's height. 123 const drag_amt = (snap_area_2.offsetTop / 2 + 1) * 124 scrollbar_to_scroller_ratio; 125 await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); 126 }, 127 expected_snap_targets: { block: snap_area_2, inline: null }, 128 expected_scroll_offsets: { 129 x: 0, 130 y: snap_area_2.offsetTop 131 } 132 }; 133 await test_snap_event(t, test_data, "scrollsnapchanging"); 134 }, "scrollbar dragging fires scrollsnapchanging."); 135 136 // Keyboard test. 137 promise_test(async (t) => { 138 await waitForCompositorCommit(); 139 const test_data = { 140 scroller: scroller, 141 scrolling_function: async () => { 142 scroller.focus(); 143 window.test_driver.send_keys(scroller, '\ue015'/*ArrowDown*/); 144 }, 145 expected_snap_targets: { block: snap_area_2, inline: null }, 146 expected_scroll_offsets: { 147 x: 0, 148 y: snap_area_2.offsetTop 149 } 150 }; 151 await test_snap_event(t, test_data, "scrollsnapchanging"); 152 }, "keyboard scroll triggers scrollsnapchanging."); 153 154 // Touch scroll test: peek at snap_area_2 and then drag back to 155 // snap_area_1. 156 promise_test(async (t) => { 157 await waitForScrollReset(t, scroller); 158 await waitForCompositorCommit(); 159 const pos_x = Math.round(scroller.clientWidth / 2); 160 const start_pos_y = Math.round(snap_area_2.offsetTop); 161 let evts_promise = waitForEventsUntil(scroller, "scrollsnapchanging", 162 waitForScrollendEventNoTimeout(scroller)); 163 await new test_driver.Actions() 164 .addPointer("TestPointer", "touch") 165 .pointerMove(pos_x, start_pos_y) 166 .pointerDown() 167 .addTick() 168 .pause(200) 169 // Drag up to y=0, which should trigger a scrollsnapchanging event. 170 .pointerMove(pos_x, 0) 171 .addTick() 172 .pause(200) 173 // Drag down again to start position, which should trigger a 174 // scrollsnapchanging event. 175 .pointerMove(pos_x, start_pos_y) 176 .pointerUp() 177 .send(); 178 let evts = await evts_promise; 179 assert_equals(evts.length, 2, "2 scrollsnapchanging events are seens"); 180 assertSnapEvent(evts[0], { block: snap_area_2, inline: null }); 181 assertSnapEvent(evts[1], { block: snap_area_1, inline: null }); 182 }, "scrollsnapchanging fires as scroll moves through different snap targets."); 183 184 // Touch scroll test. 185 promise_test(async (t) => { 186 await waitForCompositorCommit(); 187 const scroller_middle = Math.round(scroller.clientWidth / 2); 188 const test_data = { 189 scroller: scroller, 190 scrolling_function: async () => { 191 const start_pos = { x: scroller_middle, y: snap_area_2.offsetTop }; 192 const end_pos = { x: scroller_middle, y: 0 }; 193 await snap_event_touch_scroll_helper(start_pos, end_pos); 194 }, 195 expected_snap_targets: { block: snap_area_2, inline: null }, 196 expected_scroll_offsets: { 197 x: 0, 198 y: snap_area_2.offsetTop 199 } 200 }; 201 await test_snap_event(t, test_data, "scrollsnapchanging", 202 /*use_onsnap_member*/true); 203 }, "touch scrolling fires Element.onscrollsnapchanging."); 204 205 // scrollsnapchanging doesn't fire test. 206 promise_test(async (t) => { 207 test_no_scrollsnapchanging(t, scroller, 10); 208 }, "scrollsnapchanging doesn't fire if scroll doesn't reach different snap " + 209 "targets."); 210 </script> 211 </body> 212 </html>