<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<head>
<meta charset="utf-8">
<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>
html, body {
    margin: 0;
    padding: 0;
}

input {
    font-size: 18px;
}

.scroller {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.content-view {
    transform: translateX(-100vw);
    display: flex;
    flex-wrap: nowrap;
}

.page {
    flex-grow: 1;
    flex-shrink: 0;
    flex-flow: column nowrap;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}
</style>
<script>
jsTestIsAsync = true;

addEventListener("load", async () => {
    description("This test verifies that after focusing a visible input field in a <code>display: flex</code> container that has been translated horizontally out of view, the caret is still visible. To run the test manually, tap the input field and check that the caret shows up.");

    if (!window.testRunner)
        return;

    await UIHelper.activateAndWaitForInputSessionAt(160, 20);

    caretRect = null;
    while (!caretRect || !caretRect.width || !caretRect.height)
        caretRect = await UIHelper.getUICaretViewRect();

    shouldBe("caretRect.left", "12");
    shouldBe("caretRect.top", "6");
    shouldBe("caretRect.width", "2");
    shouldBe("caretRect.height", "23");

    document.activeElement.blur();
    await UIHelper.waitForKeyboardToHide();
    finishJSTest();
});
</script>
</head>
<body>
    <div class="scroller">
        <div class="content-view">
            <div class="page"></div>
            <div class="page"><input></div>
        </div>
    </div>
    <p id="description"></p>
    <p id="console"></p>
</body>
</html>