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