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