<!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/ui-helper.js"></script>
        <script src="../../../resources/js-test.js"></script>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                font-size: 20px;
            }

            #editor {
                width: 100%;
                height: 100px;
                border: 1px solid tomato;
            }
        </style>
    </head>
    <body>
        <p contenteditable id="editor"></p>
        <p id="description"></p>
        <p id="console"></p>
    </body>
    <script>
        jsTestIsAsync = true;

        addEventListener("load", runTest);

        async function runTest()
        {
            description("This test verifies that when setting the selection inside an editable element while the web view is not first responder, the caret should appear after tapping the editable element to show the keyboard. This test requires WebKitTestRunner.");

            const editor = document.getElementById("editor");
            await UIHelper.setHardwareKeyboardAttached(false);
            await UIHelper.resignFirstResponder();
            getSelection().setPosition(editor);
            await UIHelper.activateElement(editor);
            do {
                caretRect = await UIHelper.getUICaretViewRect();
            } while (!caretRect.width || !caretRect.height);

            shouldBe("caretRect.left", "9");
            shouldBe("caretRect.top", "21");
            shouldBe("caretRect.width", "2");
            shouldBe("caretRect.height", "24");

            editor.blur();
            await UIHelper.waitForKeyboardToHide();

            finishJSTest();
        }
    </script>
</html>