| <!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: 1833px; /* use a percentage of this to make snap offsets float numbers */ |
| } |
| |
| #initial-area { |
| position: relative; |
| top: 10%; /* ~183.3 */ |
| width: 200px; |
| height: 200px; |
| background-color: blue; |
| scroll-snap-align: start; |
| } |
| |
| #target-area { |
| position: relative; |
| top: 30%; /* ~549.9 */ |
| width: 200px; |
| height: 200px; |
| background-color: blue; |
| 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 initial_area = document.getElementById('initial-area'); |
| const target_area = document.getElementById('target-area'); |
| |
| function cleanup() { |
| scroller.scrollTo(0, 183); |
| } |
| |
| function keyPress(key) { |
| return new Promise((resolve, reject) => { |
| if (window.eventSender) { |
| eventSender.keyDown(key); |
| resolve(); |
| } |
| else { |
| reject('This test requires window.eventSender'); |
| } |
| }) |
| } |
| |
| promise_test (async t => { |
| t.add_cleanup(cleanup); |
| scroller.scrollTo(0,183); |
| assert_approx_equals(scroller.scrollTop, initial_area.offsetTop, 1); |
| |
| await mouseClickOn(10, 10); |
| await keyPress('ArrowDown'); |
| await waitForAnimationEndTimeBased(() => { return scroller.scrollTop; }); |
| assert_approx_equals(scroller.scrollTop, target_area.offsetTop, 1); |
| |
| await keyPress('ArrowUp'); |
| await waitForAnimationEndTimeBased(() => { return scroller.scrollTop; }); |
| assert_approx_equals(scroller.scrollTop, initial_area.offsetTop, 1); |
| }, "Keyboard scrolling should ignore the current snapped element even when its" |
| + " offset is a fractional number."); |
| |
| promise_test (async t => { |
| t.add_cleanup(cleanup); |
| assert_approx_equals(scroller.scrollTop, initial_area.offsetTop, 1); |
| |
| scroller.scrollBy(0, 10); |
| await waitForAnimationEndTimeBased(() => { return scroller.scrollTop; }); |
| assert_approx_equals(scroller.scrollTop, target_area.offsetTop, 1); |
| |
| scroller.scrollBy(0, -10); |
| await waitForAnimationEndTimeBased(() => { return scroller.scrollTop; }); |
| assert_approx_equals(scroller.scrollTop, initial_area.offsetTop, 1); |
| }, "Programmatic directional scrolling should ignore the current snapped element" |
| + " even when its offset is a fractional number."); |
| |
| </script> |
