blob: 97f6db40451cbe85389d52fab9bfbbe149db48b2 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
#grid-container {
width: 415px;
height: 415px;
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.monitorWheelEvents();
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.monitorWheelEvents();
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.monitorWheelEvents();
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) {
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>