overscroll-snap.html (1760B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta viewport="width=device-width, initial-scale=1" /> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/dom/events/scrolling/scroll_support.js"></script> 12 </head> 13 <body> 14 <style> 15 #scroller { 16 width: 200px; 17 height: 400px; 18 overflow-y: scroll; 19 scroll-snap-type: y mandatory; 20 background-color: blue; 21 } 22 #snap_target { 23 width: 100px; 24 height: 1942.5px; 25 scroll-snap-align: start; 26 background-color: pink; 27 } 28 </style> 29 <div id="scroller"> 30 <div id="snap_target"></div> 31 </div> 32 <script> 33 promise_test(async (t) => { 34 await waitForCompositorCommit(); 35 let scrollend_promise = new Promise((resolve) => { 36 scroller.addEventListener("scrollend", resolve); 37 }); 38 let scroll_promise = new Promise((resolve) => { 39 scroller.addEventListener("scroll", resolve); 40 }); 41 await new test_driver.Actions().scroll(0, 0, 0, 42 scroller.scrollHeight, { origin: scroller }).send(); 43 await scroll_promise; 44 await scrollend_promise; 45 assert_approx_equals(scroller.scrollTop, 46 scroller.scrollHeight - scroller.clientHeight, 1, 47 "scroller is scrolled to its bottom and not its top."); 48 }, "snapport covered by snap area doesn't jump"); 49 </script> 50 </body> 51 </html>