blob: 613bb60457611e22dc59ab4a6a63c5df78ca78a0 [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
<style>
body {
height: 2000px;
}
select {
display: block;
font-size: 11pt;
margin: 10px;
border: 1px solid black;
}
</style>
<script src="../../../resources/js-test-pre.js"></script>
<script src="../../../resources/ui-helper.js"></script>
<script>
jsTestIsAsync = true;
let select;
async function scrollTest()
{
select = document.getElementsByTagName('select')[0];
select.scrollTop = 90;
shouldBe('select.scrollTop', '90');
shouldBe('window.pageYOffset', '0');
if (!window.eventSender) {
finishJSTest();
return;
}
const selectBounds = select.getBoundingClientRect();
const x = selectBounds.left + 10;
const y = selectBounds.top + 10;
eventSender.monitorWheelEvents();
eventSender.mouseMoveTo(x, y);
debug('Scrolling up then down in the select');
// Scroll to the top of the select.
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 1, "began", "none");
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 20, "changed", "none");
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
await UIHelper.waitForScrollCompletion();
// Scroll up again to trigger a document bounce.
eventSender.monitorWheelEvents({ resetLatching: false });
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 1, "began", "none");
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 20, "changed", "none");
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
await UIHelper.waitForScrollCompletion();
// Scroll down. This should scroll the select, not the document.
eventSender.monitorWheelEvents({ resetLatching: false });
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -2, "began", "none");
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -20, "changed", "none");
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -20, "changed", "none");
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
await UIHelper.waitForScrollCompletion();
shouldBeTrue('select.scrollTop > 0');
shouldBe('window.pageYOffset', '0');
finishJSTest();
}
window.addEventListener('load', () => {
description("Tests that scrolling over a &lt;select&gt; doesn't latch on the document");
setTimeout(scrollTest, 0);
}, false);
</script>
</head>
<body>
<select size="5">
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<div id="console"></div>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>