blob: 6ccba286a8bb41cd003b734ad0830de35fd016b6 [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
<style>
.gallery {
width: 400px;
height: 400px;
display: inline-block;
overflow-x: hidden;
overflow-y: auto;
scroll-snap-type: y mandatory;
}
.colorBox {
height: 400px;
width: 400px;
scroll-snap-align: start;
}
#item0, #item2 { background-color: red; }
#item1 { background-color: green; }
</style>
<script src="../../../resources/js-test.js"></script>
<script>
window.jsTestIsAsync = true;
function locationInWindowCoordinates(element)
{
var position = {};
position.x = element.offsetLeft;
position.y = element.offsetTop;
while (element.offsetParent) {
position.x = position.x + element.offsetParent.offsetLeft;
position.y = position.y + element.offsetParent.offsetTop;
if (element == document.getElementsByTagName("body")[0])
break;
element = element.offsetParent;
}
return position;
}
function scrollSnapTest()
{
var divTarget = document.getElementById("target");
var windowPosition = locationInWindowCoordinates(divTarget);
var startPosX = windowPosition.x + 0.5 * divTarget.clientWidth;
var startPosY = windowPosition.y + 0.5 * divTarget.clientHeight;
eventSender.mouseMoveTo(startPosX, startPosY);
// Each unit of stateless scroll is scaled by 10 pixels.
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none");
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none");
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none");
// Wait for the snapping to finish.
setTimeout(function() {
if (divTarget.scrollTop != 400)
testFailed("div did not snap to the green region. Expected 400, but got " + divTarget.scrollTop + ".");
else
testPassed("div honored snap points.");
finishJSTest();
}, 2000);
}
function onLoad()
{
if (window.eventSender) {
eventSender.monitorWheelEvents();
internals.setPlatformMomentumScrollingPredictionEnabled(false);
setTimeout(scrollSnapTest, 0);
} else {
var messageLocationH = document.getElementById("item0");
var message = document.createElement("div");
message.innerHTML = "This test is better run under DumpRenderTree. To manually<br/>"
+ "test it, place the mouse pointer inside the red region at the<br/>"
+ "top of the page, and then, using a mechanical mouse wheel,<br/>"
+ "scroll so that the green region takes up more of the<br/>"
+ "container than the surrounding red regions. After a brief<br/>"
+ "pause, the target should scroll so that the green region is<br/>"
+ "fully visible, and no red is visible.";
messageLocationH.appendChild(message);
}
}
</script>
</head>
<body onload="onLoad();">
<div style="position: relative; width: 400px">
<div>Tests that the scroll-snap feature works properly in overflow regions when using a mechanical mouse wheel.</div>
<div class="gallery" id="target">
<div id="item0" class="colorBox"></div>
<div id="item1" class="colorBox"></div>
<div id="item2" class="colorBox"></div>
</div>
<div id="console"></div>
</div>
</body>
</html>