mouse-wheel.html (2287B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> 3 <title>Mouse-wheel scroll snapping speed</title> 4 <meta name="assert" 5 content="Test passes if mousewheel snaps without pausing"> 6 <style> 7 #scroller { 8 scroll-snap-type: block mandatory; 9 overflow: scroll; 10 height: 400px; 11 width: 400px 12 } 13 #space { 14 width: 200px; 15 height: 4000px; 16 } 17 .box { 18 scroll-snap-align: start; 19 background: blue; 20 margin-bottom: 10px; 21 width: 100px; 22 height: 100px; 23 } 24 </style> 25 <script src="/resources/testharness.js"></script> 26 <script src="/resources/testharnessreport.js"></script> 27 <script src="/resources/testdriver.js"></script> 28 <script src="/resources/testdriver-vendor.js"></script> 29 <script src="/resources/testdriver-actions.js"></script> 30 <script src="/dom/events/scrolling/scroll_support.js"></script> 31 <script src="../support/common.js"></script> 32 33 <div id="scroller"> 34 <div class="box"></div> 35 <div id="target" class="box"></div> 36 <div id="space"></div> 37 </div> 38 <script> 39 promise_test(async t => { 40 await waitForCompositorReady(); 41 const scroller = document.getElementById("scroller"); 42 scroller.scrollTo(0, 0); 43 assert_equals(scroller.scrollTop, 0, "verify test pre-condition"); 44 const scrollTop = () => { 45 return scroller.scrollTop; 46 }; 47 const scrollPromise = waitForScrollEvent(scroller); 48 const wheelPromise = waitForWheelEvent(scroller); 49 const targetBounds = 50 document.getElementById('target').getBoundingClientRect(); 51 const dy = targetBounds.top / 2 + 1; 52 const actions = new test_driver.Actions() 53 .scroll(50, 50, 0, dy, {origin: scroller, duration: 100}); 54 await actions.send(); 55 await wheelPromise; 56 await scrollPromise; 57 // Detect first pause in scrolling. As expected to snap right at the end of 58 // the scroll, there should be no appreciable pause before the snap takes 59 // place. Once the scrolling settles, we are expected to be at the snap 60 // position. 61 const scrollStabilizedPromise = waitForAnimationEnd(scrollTop); 62 await scrollStabilizedPromise; 63 assert_approx_equals(scroller.scrollTop, 110, 0.5, 64 'Failed to advance to next snap target'); 65 }, "Wheel-scroll triggers snap to target position without intermediate pause."); 66 </script>