blob: 4242aa2d9860f1f4850a8ac49cf96549bdeb64bd [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ ShouldIgnoreMetaViewport=true ] -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="../../../resources/js-test-pre.js"></script>
<script src="../../../resources/ui-helper.js"></script>
<style>
html, body {
margin: 0;
width: 320px;
height: 100%;
overflow: scroll;
}
input {
width: 44px;
height: 40px;
font-size: 18px;
}
.outer-container {
display: flex;
align-items: center;
justify-content: center;
height: 400px;
width: 100%;
}
.inner-container {
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<input name="search" type="tel" id="first"></input>
<input type="tel" id="second"></input>
</div>
</div>
<div id="description"></div>
<div id="output"></div>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
firstField = document.getElementById("first");
secondField = document.getElementById("second");
output = document.getElementById("output");
currentScrollPosition = 0;
shouldLogScrollDeltas = false;
observedUnnecessaryScrolling = false;
function moveFocusToOtherField(event) {
event.target.value = event.data;
const fieldToFocus = event.target == firstField ? secondField : firstField;
fieldToFocus.focus();
event.preventDefault();
}
firstField.addEventListener("input", moveFocusToOtherField);
secondField.addEventListener("input", moveFocusToOtherField);
document.addEventListener("scroll", () => {
const scrollDelta = document.scrollingElement.scrollTop - currentScrollPosition;
if (shouldLogScrollDeltas && Math.abs(scrollDelta) > 1) {
testFailed(`Scrolled by amount: ${scrollDelta}`);
observedUnnecessaryScrolling = true;
}
currentScrollPosition = document.scrollingElement.scrollTop;
});
addEventListener("load", async () => {
description("This test verifies that moving focus between two fields that are at the same y offset does not induce vertical scrolling. To test manually, focus the left field and press any key. Focus should move to the right field, and there should be no scrolling.");
if (!window.testRunner) {
shouldLogScrollDeltas = true;
return;
}
await UIHelper.setHardwareKeyboardAttached(false);
await UIHelper.activateElementAndWaitForInputSession(firstField);
await UIHelper.ensureVisibleContentRectUpdate();
shouldLogScrollDeltas = true;
for (let i = 0; i < 10; ++i) {
const observedInputEvent = new Promise(resolve => {
const resolveAfterZeroDelay = () => setTimeout(resolve, 0);
document.activeElement.addEventListener("input", resolveAfterZeroDelay, { "once" : true });
});
await UIHelper.keyDown(String(i));
await observedInputEvent;
}
if (observedUnnecessaryScrolling)
testFailed("Observed unnecessary scrolling");
else
testPassed("Did not observe unnecessary scrolling");
shouldLogScrollDeltas = false;
document.activeElement.blur();
await UIHelper.waitForKeyboardToHide();
testRunner.notifyDone();
});
</script>
</body>
</html>