<!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>