80 lines
3.1 KiB
HTML
80 lines
3.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#container {
|
|
width: 600px;
|
|
height: 600px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
overflow-y: scroll;
|
|
scroll-snap-type: y proximity;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.area {
|
|
height: 100%;
|
|
width: 100%;
|
|
float: left;
|
|
scroll-snap-align: start;
|
|
}
|
|
</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>
|