| <!DOCTYPE html> |
| <script src="../../resources/gesture-util.js"></script> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| html { |
| scroll-snap-type: y mandatory; |
| } |
| |
| body { |
| overflow: scroll; |
| height: 300px; |
| width: 300px; |
| margin: 0; |
| padding: 0; |
| } |
| |
| #container { |
| margin: 0; |
| padding: 0; |
| width: 600px; |
| height: 2000px; |
| } |
| |
| #initial-area { |
| position: relative; |
| top: 0; |
| width: 200px; |
| height: 200px; |
| background-color: red; |
| scroll-snap-align: start; |
| } |
| |
| #target-area { |
| position: relative; |
| top: 200px; |
| width: 200px; |
| height: 200px; |
| background-color: green; |
| scroll-snap-align: start; |
| } |
| </style> |
| |
| <div id="container"> |
| <div id="initial-area"></div> |
| <div id="target-area"></div> |
| </div> |
| |
| <script> |
| const scroller = document.scrollingElement; |
| const target_area = document.getElementById('target-area'); |
| |
| function cleanup() { |
| scroller.scrollTo(0,0); |
| assert_equals(scroller.scrollTop, 0); |
| |
| target_area.style.setProperty('top', '200px'); |
| assert_equals(scroller.scrollTop, 0); |
| } |
| |
| function wheelScroll(delta, x, y, direction) { |
| // A mouse wheel scroll comes from mouse input with imprecise delta. |
| return smoothScroll(delta, x ,y , GestureSourceType.MOUSE_INPUT, direction, |
| SPEED_INSTANT, false /* is precise delta */); |
| } |
| |
| function keyPress(key) { |
| return new Promise((resolve, reject) => { |
| if (window.eventSender) { |
| eventSender.keyDown(key); |
| resolve(); |
| } |
| else { |
| reject('This test requires window.eventSender'); |
| } |
| }) |
| } |
| |
| function touchScroll(delta, x, y, direction) { |
| return smoothScroll(delta, x, y, GestureSourceType.TOUCH_INPUT, direction, |
| SPEED_INSTANT); |
| } |
| |
| promise_test (async t => { |
| t.add_cleanup(cleanup); |
| |
| await mouseClickOn(10, 10); |
| await wheelScroll(250 /* pixels to scroll */, 50, 50, 'down'); |
| await waitForAnimationEndTimeBased(() => { return scroller.scrollTop; }); |
| assert_approx_equals(scroller.scrollTop, 400, 1); |
| |
| target_area.style.setProperty('top', '600px'); |
| assert_equals(scroller.scrollTop, 800); |
| }, "Layout changes should make the scroller resnap to targets set from wheel" |
| + " scrolling"); |
| |
| promise_test (async t => { |
| t.add_cleanup(cleanup); |
| |
| await mouseClickOn(10, 10); |
| await keyPress('ArrowDown'); |
| await waitForAnimationEndTimeBased(() => { return scroller.scrollTop; }); |
| assert_equals(scroller.scrollTop, 400); |
| |
| target_area.style.setProperty('top', '600px'); |
| assert_equals(scroller.scrollTop, 800); |
| }, "Layout changes should make the scroller resnap to targets set from keyboard" |
| + " scrolling"); |
| |
| promise_test (async t => { |
| t.add_cleanup(cleanup); |
| |
| await mouseClickOn(10, 10); |
| await touchScroll(250 /* delta */, 50, 50, 'down'); |
| await waitForAnimationEndTimeBased(() => { return scroller.scrollTop; }); |
| assert_equals(scroller.scrollTop, 400); |
| |
| target_area.style.setProperty('top', '600px'); |
| assert_equals(scroller.scrollTop, 800); |
| }, "Layout changes should make the scroller resnap to targets set from gesture" |
| + " scrolling"); |
| </script> |
