| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" /> |
| <link rel="stylesheet" href="resources/simple-snap.css"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/gesture-util.js"></script> |
| <script src="../../resources/scrollbar-util.js"></script> |
| <script src="../../resources/blink-coordinates-util.js"></script> |
| |
| <div id='scroller'> |
| <div id="space"></div> |
| <div class="snap left top"></div> |
| <div class="snap right top"></div> |
| <div class="snap left bottom"></div> |
| </div> |
| |
| <script> |
| window.onload = () => { |
| const scroller = document.getElementById("scroller"); |
| const snapPoint = 400; |
| const scrollDelta = 100; |
| |
| function scrollTop() { |
| return scroller.scrollTop; |
| } |
| |
| function scrollLeft() { |
| return scroller.scrollLeft; |
| } |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| const thumb = horizontalThumb(scroller); |
| await mouseDragAndDrop(thumb.x, thumb.y, thumb.x + scrollDelta, thumb.y); |
| await waitForScrollEnd(scroller, scrollLeft, snapPoint); |
| }, "Snaps after dragging the horizontal scrollbar."); |
| |
| promise_test (async () => { |
| scroller.scrollTo(0, 0); |
| const thumb = verticalThumb(scroller); |
| await mouseDragAndDrop(thumb.x, thumb.y, thumb.x, thumb.y + scrollDelta); |
| await waitForScrollEnd(scroller, scrollTop, snapPoint); |
| }, "Snaps after dragging the vertical scrollbar."); |
| }; |
| </script> |
| |
