<!DOCTYPE html><!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<script src="../../../resources/ui-helper.js"></script>
<script>

const frame = document.createElement('iframe');
document.body.appendChild(frame);
frame.contentDocument.body.innerHTML = `
<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body { background: #6cf; }
#description { position: absolute; top: 50%; padding: 10px; }
#container { position: absolute; top: 90%; left: 20%; width: 60%; padding: 10px; font-size: 20px; text-align: center; height: 200px; border: solid 1px #ccc; }
</style>
<div id="container" onclick="this.contentEditable = true; this.focus();">click here</div>
<p id="description">
    This tests focusing an element inside an iframe at the bottom of the page.<br>
    To manually test, tap on "click here" below with docked software keyboard.<br>
    <span id="result"></span>
</p>
`;

let keyboardHeight = 250;

function checkScrollTop() {
    frame.contentWindow.result.textContent = visualViewport.pageTop > keyboardHeight ? 'PASS' : `FAIL - ${visualViewport.offsetTop}px`;
}

async function runTest() {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
    testRunner.dumpChildFramesAsText();
    await UIHelper.setHardwareKeyboardAttached(false);
    await UIHelper.activateAndWaitForInputSessionAt(frame.offsetWidth / 2, frame.offsetHeight - 5);
    await UIHelper.ensurePresentationUpdate();
    const rect = await UIHelper.inputViewBounds();
    keyboardHeight = rect.height;
    checkScrollTop();
    testRunner.notifyDone();
}

if (window.testRunner)
    runTest();
else
    frame.contentWindow.container.addEventListener('focus', () => setTimeout(checkScrollTop, 500));

</script>
</body>
</html>