blob: 0ca06c803a763eb668c5a449fdfc805bae7cc8cd [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/ui-helper.js"></script>
<style>
body {
width: 100%;
height: 100%;
margin: 0;
}
html {
overflow: hidden;
height: 0;
}
button {
width: 320px;
height: 80px;
display: block;
}
#container {
width: 0;
height: 0;
}
#description {
margin-top: 200px;
}
</style>
<script>
addEventListener("load", runTest);
jsTestIsAsync = true;
async function waitForCaretViewRectToBecome(left, top, width, height) {
return new Promise(async resolve => {
let caretViewRect = null;
do {
caretViewRect = await UIHelper.getUICaretViewRect();
if (caretViewRect.left === left
&& caretViewRect.top === top
&& caretViewRect.width === width
&& caretViewRect.height === height)
break;
} while (true);
debug(`Caret view rect became {{ ${left}, ${top} }, { ${width}, ${height} }}`);
resolve(caretViewRect);
});
}
async function runTest() {
description("Verifies that native selection UI is not suppressed when the document element has "
+ "<code>overflow: hidden;</code> and is empty, but the editable element is otherwise still visible. To "
+ "manually test, tap on the top button and then tap on the bottom button. In both cases, the platform "
+ "selection UI should be shown.");
if (!window.testRunner)
return;
frame = document.getElementById("frame");
caretViewRect = null;
await UIHelper.activateAndWaitForInputSessionAt(160, 40);
await waitForCaretViewRectToBecome(8, 165, 3, 14);
shouldBeEqualToString("document.activeElement.id", "editor");
document.activeElement.blur();
await UIHelper.waitForKeyboardToHide();
await UIHelper.activateAndWaitForInputSessionAt(160, 120);
await waitForCaretViewRectToBecome(18, 218, 3, 14);
shouldBeEqualToString("document.activeElement.id", "frame");
shouldBeEqualToString("frame.contentWindow.document.activeElement.id", "editor");
frame.contentWindow.document.activeElement.blur();
await UIHelper.waitForKeyboardToHide();
document.querySelectorAll("button, #container").forEach(element => element.remove())
finishJSTest();
}
</script>
</head>
<body>
<button onclick="document.getElementById('editor').focus()">Focus hidden textarea</button>
<button onclick="frame.contentWindow.document.getElementById('editor').focus()">
Focus hidden textarea (in subframe)
</button>
<div id="container">
<textarea id="editor"></textarea>
<iframe id="frame" srcdoc="<textarea id='editor'></textarea>"></iframe>
</div>
<div id="description"></div>
<div id="console"></div>
</body>
</html>