scrollsnapchange-on-user-scroll.tentative.html (6273B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title> CSS Scroll Snap 2 Test: scrollsnapchange events</title> 7 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src="/css/css-scroll-snap/snap-events/resources/common.js"></script> 14 <script src="/css/css-scroll-snap/snap-events/resources/user-scroll-common.js"></script> 15 <script src="/dom/events/scrolling/scroll_support.js"></script> 16 <script src="/web-animations/testcommon.js"></script> 17 </head> 18 19 <body> 20 <style> 21 body { 22 margin: 0px; 23 } 24 25 div { 26 position: absolute; 27 margin: 0px; 28 } 29 30 #spacer { 31 width: 200vw; 32 height: 200vh; 33 } 34 35 .scroller { 36 height: 400px; 37 width: 400px; 38 overflow: scroll; 39 scroll-snap-type: both mandatory; 40 } 41 42 .snap_point { 43 width: 40%; 44 height: 40%; 45 scroll-snap-align: start; 46 } 47 48 #snap_point_1 { 49 left: 0px; 50 top: 0px; 51 background-color: red; 52 } 53 54 #snap_point_2 { 55 top: 35%; 56 left: 35%; 57 background-color: orange; 58 } 59 60 #snap_point_3 { 61 top: 70%; 62 left: 70%; 63 background-color: blue; 64 } 65 </style> 66 <div id="scroller" class="scroller"> 67 <div id="spacer"></div> 68 <div id="snap_point_1" class="snap_point"></div> 69 <div id="snap_point_2" class="snap_point"></div> 70 <div id="snap_point_3" class="snap_point"></div> 71 </div> 72 <script> 73 const scroller = document.getElementById("scroller"); 74 const snap_point_1 = document.getElementById("snap_point_1"); 75 const snap_point_2 = document.getElementById("snap_point_2"); 76 const offset_to_snap_point_2 = { 77 x: snap_point_2.offsetLeft, 78 y: snap_point_2.offsetTop 79 }; 80 81 // Touch scroll test. 82 promise_test(async (t) => { 83 await waitForCompositorCommit(); 84 const start_pos = { 85 x: scroller.clientWidth / 2, 86 y: scroller.clientHeight / 2, 87 }; 88 const end_pos = { x: 0, y: 0 }; 89 const test_data = { 90 scroller: scroller, 91 scrolling_function: async () => { 92 await snap_event_touch_scroll_helper(start_pos, end_pos); 93 }, 94 expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, 95 expected_scroll_offsets: { 96 x: offset_to_snap_point_2.x, 97 y: offset_to_snap_point_2.y, 98 } 99 }; 100 await test_scrollsnapchange(t, test_data); 101 }, "scrollsnapchange event fires after snap target changes on touch scroll"); 102 103 // Wheel scroll test. 104 promise_test(async (t) => { 105 await waitForCompositorCommit(); 106 const test_data = { 107 scroller: scroller, 108 scrolling_function: async () => { 109 await new test_driver.Actions().scroll(0, 0, 110 offset_to_snap_point_2.x, 111 offset_to_snap_point_2.y, 112 { origin: scroller }).send(); 113 }, 114 expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, 115 expected_scroll_offsets: { 116 x: offset_to_snap_point_2.x, 117 y: offset_to_snap_point_2.y, 118 } 119 }; 120 await test_scrollsnapchange(t, test_data); 121 }, "scrollsnapchange event fires after snap target changes on wheel scroll"); 122 123 // Scrollbar drag test. 124 promise_test(async (t) => { 125 await waitForCompositorCommit(); 126 // Skip test on platforms that do not have a visible scrollbar (e.g. 127 // overlay scrollbar). 128 const scrollbar_width = scroller.offsetWidth - scroller.clientWidth; 129 if (scrollbar_width == 0) 130 return; 131 const test_data = { 132 scroller: scroller, 133 scrolling_function: async () => { 134 const scrollbar_to_scroller_ratio = 135 getScrollbarToScrollerRatio(scroller); 136 // Scroll by just over half of the top box's height. 137 const drag_amt = (offset_to_snap_point_2.y / 2 + 1) * 138 scrollbar_to_scroller_ratio; 139 await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt); 140 }, 141 expected_snap_targets: { block: snap_point_2, inline: snap_point_1 }, 142 expected_scroll_offsets: { 143 x: 0, 144 y: offset_to_snap_point_2.y, 145 } 146 }; 147 await test_scrollsnapchange(t, test_data); 148 }, "scrollsnapchange event fires after snap target changes on scrollbar drag"); 149 150 // Keyboard test. 151 promise_test(async (t) => { 152 await waitForCompositorCommit(); 153 const test_data = { 154 scroller: scroller, 155 scrolling_function: async () => { 156 scroller.focus(); 157 window.test_driver.send_keys(scroller, '\ue015'/*ArrowDown*/); 158 }, 159 expected_snap_targets: { block: snap_point_2, inline: snap_point_1 }, 160 expected_scroll_offsets: { 161 x: 0, 162 y: offset_to_snap_point_2.y, 163 } 164 }; 165 await test_scrollsnapchange(t, test_data); 166 }, "scrollsnapchange event fires after snap target changes on keydown press"); 167 168 // Touch scroll test (onscrollsnapchange variant). 169 promise_test(async (t) => { 170 await waitForCompositorCommit(); 171 const start_pos = { 172 x: scroller.clientWidth / 2, 173 y: scroller.clientHeight / 2, 174 }; 175 const end_pos = { x: 0, y: 0 }; 176 const test_data = { 177 scroller: scroller, 178 scrolling_function: async () => { 179 await snap_event_touch_scroll_helper(start_pos, end_pos); 180 }, 181 expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, 182 expected_scroll_offsets: { 183 x: offset_to_snap_point_2.x, 184 y: offset_to_snap_point_2.y, 185 } 186 }; 187 await test_scrollsnapchange(t, test_data, /*use_onsnap_memeber*/true); 188 }, "Element.onscrollsnapchange event fires after snap target changes on touch " + 189 "scroll"); 190 191 promise_test(async (t) => { 192 await test_no_scrollsnapchange(t, scroller, /*delta*/10); 193 }, "scrollsnapchange is not fired if snap target doesn't change on user scroll"); 194 </script> 195 </body>