blob: 5b052fdbf94c84a3d8e0d1a28fcb52202aef9f2f [file] [log] [blame]
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0;
overflow: hidden;
}
#container {
width: 600px;
height: 600px;
position: absolute;
top: 0;
left: 0;
overflow-x: none;
overflow-y: scroll;
scroll-snap-type: y proximity;
-webkit-scroll-snap-type: proximity;
scroll-snap-type: proximity;
opacity: 0.5;
}
.area {
height: 600px;
width: 600px;
float: left;
scroll-snap-align: start;
-webkit-scroll-snap-coordinate: 0 0;
scroll-snap-coordinate: 0 0;
}
</style>
<script>
let write = s => output.innerHTML += s + "<br>";
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function verticalScrollInContainer(dragDeltas)
{
return new Promise(resolve => {
write(`Scrolling in ${container.id} with ${dragDeltas.length} drag ticks`);
eventSender.monitorWheelEvents();
internals.setPlatformMomentumScrollingPredictionEnabled(false);
eventSender.mouseMoveTo(300, 300);
dragDeltas.forEach((delta, i) => eventSender.mouseScrollByWithWheelAndMomentumPhases(0, delta, i == 0 ? "began" : "changed", "none"));
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
eventSender.callAfterScrollingCompletes(() => {
write(`- Did the scrolling snap to the top? ${container.scrollTop == 0 ? "YES" : "NO"}`);
write(`- Did scrolling snap to the second box? ${container.scrollTop == 600 ? "YES" : "NO"}`);
container.scrollTop = 0;
setTimeout(resolve, 0);
});
});
}
function run() {
if (!window.testRunner || !window.eventSender) {
write("To manually test, verify that scrolling near one of the boundaries between the colored boxes");
write("snaps to the edge of the nearest colored box, but scrolling somewhere near the middle of two");
write("boxes does not cause the scroll offset to snap.");
return;
}
verticalScrollInContainer(new Array(2).fill(-1))
.then(() => verticalScrollInContainer(new Array(31).fill(-1)))
.then(() => verticalScrollInContainer(new Array(59).fill(-1)))
.then(() => testRunner.notifyDone());
}
</script>
</head>
<body onload=run()>
<div id="container">
<div class="area" style="background-color: red;"></div>
<div class="area" style="background-color: green;"></div>
<div class="area" style="background-color: blue;"></div>
<div class="area" style="background-color: aqua;"></div>
<div class="area" style="background-color: yellow;"></div>
<div class="area" style="background-color: fuchsia;"></div>
</div>
<div id="output"></div>
</body>
</html>