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