blob: 5c3ee99830c0225bfc1f366c88915e86507709b0 [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true internal:AsyncOverflowScrollingEnabled=true internal:AsyncFrameScrollingEnabled=true ] -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
<script src="../../../resources/ui-helper.js"></script>
<style>
html, body { width: 100vw; height: 100vh; margin: 0px; padding: 0px; }
#content { width: 100vw; height: 100vh; box-sizing: border-box; padding: 20px; background: #ccc; }
#target { position: absolute; bottom: 1em; }
</style>
<script>
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsText();
}
function listenForEventOnce(target, name, timeout) {
return new Promise((resolve, reject) => {
const timer = timeout ? setTimeout(reject, timeout) : null;
target.addEventListener(name, () => {
if (timer)
clearTimeout(timer);
resolve();
}, {once: true});
});
}
async function runTest() {
const target = document.getElementById('target');
var output = '';
const firstScrollEvent = listenForEventOnce(target, 'focus').then(() => listenForEventOnce(visualViewport, 'scroll', window.testRunner ? 3000 : 500));
if (window.testRunner) {
await UIHelper.setHardwareKeyboardAttached(false);
await UIHelper.activateElementAndWaitForInputSession(target);
}
try {
await firstScrollEvent;
} catch (error) { }
output += document.documentElement.scrollTop >= 50 ? 'PASS - the document did scroll on focus' : 'FAIL - the document did not scroll on focus';
output += '<br>';
const secondScrollEvent = listenForEventOnce(visualViewport, 'scroll', window.testRunner ? 3000 : 500);
if (window.testRunner) {
document.activeElement.blur();
await UIHelper.waitForKeyboardToHide();
}
try {
await secondScrollEvent;
} catch (error) { }
output += document.documentElement.scrollTop == 0 ? 'PASS - the document did scroll on blur' : 'FAIL - the document did not scroll on blur';
document.getElementById('result').innerHTML = output;
if (window.testRunner)
testRunner.notifyDone();
}
</script>
<body onload="runTest()">
<div id="content">
This tests focusing an element right above the keyboard. WebKit should scroll the document to reveal the element and then scroll back when the keyboard is dismissed.<br>
To manually test, focus the text field below on iPad to bring up the docked software keyboard.<br>
The document should scroll. Dimiss the keyboard and the document should scroll back to its original position.<br>
<div id="result"></div>
<input id="target">
</div>
</html>