| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #grid-container { |
| width: 400px; |
| height: 400px; |
| overflow: scroll; |
| white-space: nowrap; |
| -webkit-overflow-scrolling: touch; |
| scroll-snap-type: both mandatory; |
| line-height: 0px; |
| } |
| |
| .cell { |
| width: 400px; |
| height: 400px; |
| display: inline-block; |
| scroll-snap-align: start; |
| background-color: red; |
| margin: 0; |
| padding: 0; |
| position: relative; |
| } |
| |
| #green { |
| background-color: green; |
| } |
| |
| #snap-from > p { |
| position: absolute; |
| top: 0px; |
| left: 10px; |
| margin-top: 0px; |
| } |
| </style> |
| <script src="../../../resources/js-test.js"></script> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| var divTarget; |
| var divScrollPositionBeforeGlide; |
| var divScrollPositionBeforeSnap; |
| var divScrollPositionBeforeSingleAxisGlide; |
| |
| function checkForSingleAxisGlide() { |
| if (divTarget.scrollTop == divScrollPositionBeforeSingleAxisGlide.y + 400 && divTarget.scrollLeft == divScrollPositionBeforeSingleAxisGlide.x) |
| testPassed("div successfully snapped after dragging along one axis and then scrolling in the other."); |
| else |
| testFailed("div did not honor 2D snap points. (single axis scroll followed by flick on other axis)"); |
| finishJSTest(); |
| } |
| |
| function scrollAndGlideInSingleAxisTest() { |
| divScrollPositionBeforeSingleAxisGlide = { |
| x: divTarget.scrollLeft, |
| y: divTarget.scrollTop |
| }; |
| eventSender.mouseMoveTo(100, 100); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "began", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "begin"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "continue"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end"); |
| eventSender.callAfterScrollingCompletes(checkForSingleAxisGlide); |
| } |
| |
| function checkForScrollSnap() { |
| if (divTarget.scrollTop == divScrollPositionBeforeSnap.y && divTarget.scrollLeft == divScrollPositionBeforeSnap.x) |
| testPassed("div successfully snapped diagonally."); |
| else |
| testFailed("div did not honor 2D snap points. (diagonal snap)"); |
| setTimeout(scrollAndGlideInSingleAxisTest, 0); |
| } |
| |
| function scrollSnapTest() { |
| divScrollPositionBeforeSnap = { |
| x: divTarget.scrollLeft, |
| y: divTarget.scrollTop |
| }; |
| |
| eventSender.mouseMoveTo(100, 100); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "began", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "changed", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "changed", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none"); |
| eventSender.callAfterScrollingCompletes(checkForScrollSnap); |
| } |
| |
| function checkForScrollGlide() { |
| // The div should have scrolled (glided) to the next snap point. |
| if (divTarget.scrollTop == divScrollPositionBeforeGlide.y + 400 && divTarget.scrollLeft == divScrollPositionBeforeGlide.x + 400) |
| testPassed("div successfully scrolled diagonally."); |
| else |
| testFailed("div did not honor 2D snap points. (diagonal glide)"); |
| setTimeout(scrollSnapTest, 0); |
| } |
| |
| function scrollGlideTest() { |
| divTarget = document.getElementById("grid-container"); |
| divScrollPositionBeforeGlide = { |
| x: divTarget.scrollLeft, |
| y: divTarget.scrollTop |
| }; |
| |
| eventSender.mouseMoveTo(100, 100); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "began", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "begin"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "continue"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end"); |
| eventSender.callAfterScrollingCompletes(checkForScrollGlide); |
| } |
| |
| function onLoad() { |
| if (window.eventSender) { |
| eventSender.monitorWheelEvents(); |
| internals.setPlatformMomentumScrollingPredictionEnabled(false); |
| setTimeout(scrollGlideTest, 0); |
| } else { |
| var messageLocation = document.getElementById("snap-from"); |
| var message = document.createElement("p"); |
| message.innerHTML = "<p>This test is better run under DumpRenderTree." + |
| "</p><p>To manually test it, place the mouse pointer inside the" + |
| "</p><p>red box and perform a small swipe to the lower right" + |
| "</p><p>with some momentum. The grid should scroll to show a" + |
| "</p><p>green cell. Then scroll a bit to the upper left and" + |
| "</p><p>release without momentum. It should snap back to show" + |
| "</p><p>the green cell. Finally, drag slightly to the right and" + |
| "</p><p>then directly down. It should snap to reveal another" + |
| "</p><p>green cell directly below the previous one.</p>" |
| messageLocation.appendChild(message); |
| } |
| } |
| </script> |
| </head> |
| <body onload="onLoad();"> |
| <div id="grid-container"> |
| <div class="cell" id="snap-from"></div><div class="cell"></div><div class="cell"></div><br/> |
| <div class="cell"></div><div class="cell" id="green"></div><div class="cell"></div><br/> |
| <div class="cell"></div><div class="cell" id="green"></div><div class="cell"></div> |
| </div> |
| </body> |
| </html> |
