blob: 5e849b5c52d3e59fbeeee289bf12a084ad5ebdf0 [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
<style>
#container {
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
border: 1px black dashed;
opacity: 0.75;
background-color: #EEE;
}
.child {
width: 400px;
height: 400px;
scroll-snap-align: end;
position: absolute;
left: 0;
}
</style>
<script>
let write = s => output.innerHTML += s + "<br>";
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function run()
{
if (!window.testRunner || !window.internals) {
write(`To manually test, verify that scrolling in the container snaps such that the bottom tip of each
colored box aligns with the bottom of the scrolling container.`);
return;
}
setTimeout(() => {
write("Scroll-snap offsets are: " + internals.scrollSnapOffsets(container));
testRunner.notifyDone();
}, 0);
}
</script>
</head>
<body onload=run()>
<div id="container">
<div class="child" style="background-color: red; top: 0px; overflow: visible;"></div>
<div class="child" style="background-color: green; top: 720px; overflow: hidden;"></div>
<div class="child" style="background-color: blue; top: 1440px; overflow: scroll;"></div>
<div class="child" style="background-color: aqua; top: 2160px; overflow: auto;"></div>
<div class="child" style="background-color: yellow; top: 2880px; overflow: overlay;"></div>
<div class="child" style="background-color: fuchsia; top: 3600px;"></div>
</div>
<div id="output"></div>
</body>
</html>