scrollsnapchanging-on-programmatic-scroll.tentative.html (3849B)
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="/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 26 .box { 27 position: absolute; 28 left: 150px; 29 height: 350px; 30 width: 100px; 31 border: solid 1px white; 32 } 33 34 .snap { 35 scroll-snap-align: start; 36 } 37 38 .blue { 39 background-color: blue; 40 } 41 42 .green { 43 background-color: green; 44 } 45 46 .yellow { 47 background-color: yellow; 48 } 49 50 #snap_area_1 { 51 top: 0px; 52 } 53 54 #snap_area_2 { 55 top: 352px; 56 } 57 58 #snap_area_3 { 59 top: 704px; 60 } 61 62 .large_space { 63 height: 400vh; 64 width: 400vw; 65 position: absolute; 66 } 67 </style> 68 <div id="scroller"> 69 <div class="large_space"></div> 70 <div id="snap_area_1" class="blue snap box"></div> 71 <div id="snap_area_2" class="green snap box"></div> 72 <div id="snap_area_3" class="yellow snap box"></div> 73 </div> 74 <script> 75 const scroller = document.getElementById("scroller"); 76 const snap_area_2 = document.getElementById("snap_area_2"); 77 78 promise_test(async (t) => { 79 await waitForCompositorCommit(); 80 const test_data = { 81 scroller: scroller, 82 scrolling_function: async () => { 83 scroller.scrollTo(0, snap_area_2.offsetTop); 84 }, 85 expected_snap_targets: { block: snap_area_2, inline: null }, 86 expected_scroll_offsets: { 87 x: 0, 88 y: snap_area_2.offsetTop 89 } 90 }; 91 await test_snap_event(t, test_data, "scrollsnapchanging"); 92 }, "scrollsnapchanging fires on programmatic scrolls that changes a scroller's" + 93 " snap targets."); 94 95 promise_test(async (t) => { 96 await waitForCompositorCommit(); 97 const test_data = { 98 scroller: scroller, 99 scrolling_function: async () => { 100 scroller.scrollTo(0, snap_area_2.offsetTop); 101 }, 102 expected_snap_targets: { block: snap_area_2, inline: null }, 103 expected_scroll_offsets: { 104 x: 0, 105 y: snap_area_2.offsetTop 106 } 107 }; 108 await test_snap_event(t, test_data, "scrollsnapchanging", 109 /*use_onsnap_member*/true); 110 }, "Element.onscrollsnapchanging fires on programmatic scrolls that changes a " + 111 "scroller's snap targets."); 112 113 promise_test(async (t) => { 114 checkSnapEventSupport("scrollsnapchanging"); 115 await waitForScrollReset(t, scroller); 116 await waitForCompositorCommit(); 117 let snap_event_promise = waitForSnapEvent(scroller, "scrollsnapchanging", false); 118 // The snap areas are far apart enough that 10px is not enough to trigger 119 // a change in snap targets. 120 const small_scroll_offset = 10; 121 // Set the scroll destination to just a little off (0, 0) top so we snap 122 // back to the top box. 123 scroller.scrollTo(0, small_scroll_offset); 124 let evt = await snap_event_promise; 125 assert_equals(evt, null, "no snap event since scroller is back to top"); 126 assert_equals(scroller.scrollTop, 0, "scroller snaps back to the top"); 127 assert_equals(scroller.scrollLeft, 0, "scroller snaps back to the left"); 128 }, "scrollsnapchanging should not fire since the snap target doesn't change."); 129 </script> 130 </body> 131 132 </html>