<!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>
.container {
    width: 100%;
    display: -webkit-box;
}

.container > div {
    width: 100vw;
}

.hidden {
    overflow: hidden;
}

input {
    font-size: 18px;
}

button {
    margin: 1em;
}

.translated {
    transform: translate3d(-100vw, 0, 0);
}
</style>
<script>
jsTestIsAsync = true;

async function waitForCaretToAppear() {
    while (true) {
        const rect = await UIHelper.getUICaretViewRect();
        if (rect && rect.width && rect.height)
            return rect;
    }
}

addEventListener("load", async () => {
    description("This test verifies that after focusing a visible input field in a body element that has been translated horizontally out of view, the caret is still visible. To run the test manually, first tap the input field and check that the caret shows up. Then, tap the button to apply the CSS transform, tap the input field again, and check that the caret is still visible.");

    transformButton = document.querySelector("button");
    transformButton.addEventListener("click", () => document.body.classList.add("translated"));
    if (!window.testRunner)
        return;

    // Tap the input and wait for the caret.
    await UIHelper.activateAndWaitForInputSessionAt(20, 20);
    caretBefore = await waitForCaretToAppear();
    shouldBe("caretBefore.left", "20");
    shouldBe("caretBefore.top", "14");
    shouldBe("caretBefore.width", "2");
    shouldBe("caretBefore.height", "23");

    // Translate the body, tap the input again, and wait for the caret.
    await UIHelper.activateElement(transformButton);
    await UIHelper.waitForKeyboardToHide();
    await UIHelper.activateAndWaitForInputSessionAt(20, 20);
    caretAfter = await waitForCaretToAppear();
    shouldBe("caretAfter.left", "20");
    shouldBe("caretAfter.top", "14");
    shouldBe("caretAfter.width", "2");
    shouldBe("caretAfter.height", "23");

    document.activeElement.blur();
    await UIHelper.waitForKeyboardToHide();
    finishJSTest();
});
</script>
</head>
<body class="hidden">
    <div class="container">
        <div class="hidden">
            <input id="target">
        </div>
        <div class="hidden">
            <input>
        </div>
    </div>
    <button>Apply transform</button>
<div id="description"></div>
<div id="console"></div>
</body>
</html>