blob: 6518a7b5b60b207bea51b88077daca29b23f886f [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<head>
<script src="../../../resources/ui-helper.js"></script>
<script src="../../../resources/js-test.js"></script>
<style>
select {
width: 100%;
height: 80px;
}
#bottom {
margin-top: 1300px;
}
#tapToFocus {
width: 100%;
height: 80px;
background: tomato;
border-radius: 20px;
color: white;
font-size: 2em;
text-align: center;
cursor: pointer;
}
</style>
<script>
jsTestIsAsync = true;
async function tapAtLocationAndWaitForScrollingToEnd(x, y)
{
const uiScript = `
let doneCount = 0;
function checkDone() {
if (++doneCount == 2)
uiController.uiScriptComplete();
}
uiController.didEndZoomingCallback = checkDone;
uiController.singleTapAtPoint(${x}, ${y}, checkDone);`;
return new Promise(resolve => testRunner.runUIScript(uiScript, resolve));
}
async function run()
{
description("Verifies that focusing a select element after user interaction scrolls to reveal the select element. "
+ "To manually test, focus the top select element and tap the red box to focus the bottom select element. The "
+ "bottom select element should be scrolled into view.");
if (!window.testRunner)
return;
// Focus the first select element.
await UIHelper.activateAndWaitForInputSessionAt(160, 40);
document.activeElement.blur();
await UIHelper.waitForContextMenuToHide();
// Focus the second select element.
await tapAtLocationAndWaitForScrollingToEnd(160, 120);
await UIHelper.waitForContextMenuToShow();
shouldBe("document.activeElement", "document.getElementById('bottom')");
shouldBeGreaterThanOrEqual("pageYOffset", "1000");
document.activeElement.blur();
await UIHelper.waitForContextMenuToHide();
tapToFocus.remove();
finishJSTest();
}
</script>
</head>
<body onload=run()>
<div>
<select id="top"><option selected>First</option><option>Second</option></select>
</div>
<div id="tapToFocus" onclick="bottom.focus()">Tap to focus the<br>bottom select</div>
<div id="description"></div>
<div id="console"></div>
<select id="bottom">
<option selected>Third</option>
<option>Fourth</option>
</select>
</body>
</html>