scrollsnapchange-on-interrupted-scroll.tentative.html (2125B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> CSS Scroll Snap 2 Test: scrollsnapchange events</title> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/dom/events/scrolling/scroll_support.js"></script> 10 </head> 11 <body> 12 <style> 13 #container { 14 overflow-y: scroll; 15 height: 500px; 16 width: 300px; 17 border: solid 1px black; 18 position: absolute; 19 scroll-snap-type: y mandatory; 20 } 21 .snap_area { 22 scroll-snap-align: start; 23 height: 400px; 24 width: 200px; 25 left: 50px; 26 position: absolute; 27 } 28 #area1 { 29 background-color: blue; 30 } 31 #area2 { 32 top: 400px; 33 background-color: yellow; 34 } 35 #area3 { 36 top: 800px; 37 background-color: green; 38 } 39 </style> 40 <div id="container"> 41 <div id="area1" class="snap_area"></div> 42 <div id="area2" class="snap_area"></div> 43 <div id="area3" class="snap_area"></div> 44 </div> 45 <script> 46 promise_test(async (t) => { 47 await waitForCompositorCommit(); 48 49 container.addEventListener("scrollsnapchange", 50 t.unreached_func("scrollsnapchange should not fire")); 51 let reset = () => { 52 container.scrollTo({ top: 0, behavior: "smooth"}); 53 container.removeEventListener("scroll", reset); 54 }; 55 container.addEventListener("scroll", reset); 56 57 let scrollend_promise = waitForScrollendEventNoTimeout(container); 58 container.scrollTo({ top: 250, behavior: "smooth"}); 59 await scrollend_promise; 60 assert_equals(container.scrollTop, 0, "scroll position is reset"); 61 62 // scrollsnapchange should not fire since the scroll ended on the same snap 63 // target as the one it started on. 64 await waitForCompositorCommit(); 65 }, "scrollsnapchange doesn't fire if interrupting scroll cancels snap"); 66 </script> 67 </body> 68 </html>