scrollsnapchange-on-programmatic-scroll.tentative.html (4778B)
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="/css/css-scroll-snap/snap-events/resources/common.js"></script> 11 <script src="/dom/events/scrolling/scroll_support.js"></script> 12 <script src="/web-animations/testcommon.js"></script> 13 </head> 14 15 <body onload="runTests()"> 16 <style> 17 body { 18 margin: 0px; 19 } 20 21 div { 22 position: absolute; 23 margin: 0px; 24 } 25 26 #spacer { 27 width: 2000px; 28 height: 2000px; 29 } 30 31 .scroller { 32 height: 400px; 33 width: 400px; 34 overflow: scroll; 35 scroll-snap-type: both mandatory; 36 } 37 38 .snap_point { 39 width: 300px; 40 height: 300px; 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: 300px; 52 left: 300px; 53 background-color: orange; 54 } 55 56 #snap_point_3 { 57 left: 600px; 58 top: 600px; 59 background-color: blue; 60 } 61 </style> 62 <div id="scroller" class="scroller"> 63 <div id="spacer"></div> 64 <div id="snap_point_1" class="snap_point"></div> 65 <div id="snap_point_2" class="snap_point"></div> 66 <div id="snap_point_3" class="snap_point"></div> 67 </div> 68 <script> 69 function runTests () { 70 let scroller = document.getElementById("scroller"); 71 let snap_point_2 = document.getElementById("snap_point_2"); 72 73 promise_test(async (t) => { 74 await waitForCompositorCommit(); 75 const test_data = { 76 scroller: scroller, 77 scrolling_function: () => { 78 scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop); 79 }, 80 expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, 81 expected_scroll_offsets: { 82 x: snap_point_2.offsetLeft, 83 y: snap_point_2.offsetTop, 84 } 85 }; 86 await test_scrollsnapchange(t, test_data); 87 }, "scrollsnapchange event fires after snap target changes via scrollTo"); 88 89 promise_test(async (t) => { 90 await waitForCompositorCommit(); 91 const test_data = { 92 scroller: scroller, 93 scrolling_function: () => { 94 scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop); 95 }, 96 expected_snap_targets: { block: snap_point_2, inline: snap_point_2 }, 97 expected_scroll_offsets: { 98 x: snap_point_2.offsetLeft, 99 y: snap_point_2.offsetTop, 100 } 101 }; 102 await test_scrollsnapchange(t, test_data, /*use_onsnap_member*/true); 103 }, "Element.onscrollsnapchange event fires after snap target changes via" + 104 "scrollTo"); 105 106 promise_test(async (t) => { 107 checkSnapEventSupport("scrollsnapchange"); 108 await waitForScrollReset(t, scroller); 109 await waitForCompositorCommit(); 110 assert_equals(scroller.scrollTop, 0, 111 "scroller is initially not scrolled vertically"); 112 assert_equals(scroller.scrollLeft, 0, 113 "scroller is initially not scrolled horizontally"); 114 115 let scrollsnapchange_promise = waitForScrollSnapChangeEvent(scroller, false); 116 // Set the scroll destination to just a little off (0, 0) so we snap 117 // back to the top box. 118 let scroll_top_target = 10; 119 let scroll_left_target = 10; 120 121 scroller.scrollTo(scroll_left_target, scroll_top_target); 122 let evt = await scrollsnapchange_promise; 123 assert_equals(evt, null, "no snapchanges since scroller is back to top"); 124 // scroller should snap back to (0,0) with no scrollsnapchange event. 125 assert_equals(scroller.scrollTop, 0, "scroller snaps back to the top"); 126 assert_equals(scroller.scrollLeft, 0, "scroller snaps back to the left"); 127 128 scrollsnapchange_promise = waitForScrollSnapChangeEvent(scroller); 129 scroll_top_target = snap_point_2.offsetTop + 10; 130 scroll_left_target = snap_point_2.offsetLeft + 10; 131 // This scroll should snap to snap_point_2, so scrollsnapchange should be 132 // fired. 133 scroller.scrollTo(scroll_left_target, scroll_top_target); 134 135 evt = await scrollsnapchange_promise; 136 assertSnapEvent(evt, { block: snap_point_2, inline: snap_point_2 }) 137 assert_approx_equals(scroller.scrollTop, snap_point_2.offsetTop, 1, 138 "scroller snaps to the top of snap_point_2"); 139 assert_approx_equals(scroller.scrollLeft, snap_point_2.offsetLeft, 1, 140 "scroller snaps to the left of snap_point_2"); 141 }, "scrollsnapchange is not fired if snap target doesn't change on " + 142 "programmatic scroll"); 143 } 144 </script> 145 </body> 146 </html>