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