blob: eef22d67f426da8ebd28d96873aaecb77ea0b977 [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
<style>
body {
height: 2000px;
}
.scroll-wrapper {
position: fixed;
left: 10px;
top: 10px;
width: 300px;
height: 500px;
background-color: silver;
}
#scroller {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
scroll-snap-type: y mandatory;
border: 1px solid black;
}
.inner-content {
margin: 20px;
width: auto;
height: 75%;
scroll-snap-align: center;
background-color: green;
}
</style>
<script src="../../../resources/ui-helper.js"></script>
<script src="../../../resources/js-test-pre.js"></script>
<script>
jsTestIsAsync = true;
var overflowScrollEventCount = 0;
var windowScrollEventCount = 0;
function checkForScrolls()
{
shouldBeTrue('overflowScrollEventCount > 0');
shouldBe('windowScrollEventCount', '0');
}
async function sendWheelEvents()
{
eventSender.monitorWheelEvents();
eventSender.mouseMoveTo(100, 100);
// This sequence needs to be long enough (> resetLatchedStateTimeout or 100ms) to allow latching to time out.
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -2, 'changed', 'none');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -3, 'changed', 'none');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'begin');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -5, 'none', 'continue');
await UIHelper.renderingUpdate();
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
await UIHelper.waitForScrollCompletion();
}
async function scrollTest()
{
await sendWheelEvents();
checkForScrolls();
finishJSTest();
}
window.addEventListener('load', () => {
description("Tests that scrolling in an overflow-scroll with scroll-snap doesn't fail to latch and scroll the document");
document.getElementById('scroller').addEventListener('scroll', () => {
++overflowScrollEventCount;
}, false);
window.addEventListener('scroll', () => {
++windowScrollEventCount;
}, false);
if (window.eventSender) {
setTimeout(scrollTest, 0);
return;
}
finishJSTest();
}, false);
</script>
</head>
<body>
<div class="scroll-wrapper">
<div id="scroller">
<div class="inner-content"></div>
<div class="inner-content"></div>
</div>
</div>
<div id="console"></div>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>