<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<head>
    <script src="../../../resources/js-test-pre.js"></script>
    <style>
        body {
            margin: 0;
        }

        input {
            width: 100%;
            height: 50px;
            position: absolute;
            left: 0;
            top: 0;
        }

        div {
            background-image: linear-gradient(0deg, blue, red);
            height: 4000px;
        }
    </style>
    <script>
    window.jsTestIsAsync = true;

    function tapInInputScript(tapX, tapY)
    {
        return `
        var caretPositions = [];

        function pressArrow() {
            uiController.typeCharacterUsingHardwareKeyboard("leftArrow", function() {
                uiController.doAfterNextStablePresentationUpdate(function() {
                    var selectionRectLeft = uiController.textSelectionCaretRect.left;
                    var caretPositionsLength = caretPositions.length;
                    if (caretPositionsLength == 0 || caretPositions[caretPositionsLength - 1] != selectionRectLeft) {
                        caretPositions.push(selectionRectLeft);
                        pressArrow();
                    } else
                        uiController.uiScriptComplete(JSON.stringify(caretPositions));
                });
            });
        };

        (function() {
            uiController.didShowKeyboardCallback = function() {
                uiController.doAfterNextStablePresentationUpdate(function() {
                    pressArrow();
                });
            };
            uiController.singleTapAtPoint(${tapX}, ${tapY}, function() { });
        })()`;
    }

    var pixelWidth;
    var currentWidth;
    function run()
    {
        if (!window.testRunner || !testRunner.runUIScript) {
            description("To manually test, place the caret in the field above and use the arrow keys to make sure the carets don't appear in the middle of characters.");
            return;
        }

        testRunner.runUIScript(tapInInputScript(window.innerWidth * 2 / 3, 30), caretPositions => {
            caretPositions = JSON.parse(caretPositions);
            pixelWidth = -1;
            for (var i = 0; i < caretPositions.length - 1; ++i) {
                currentWidth = caretPositions[i] - caretPositions[i + 1];
                if (pixelWidth == -1)
                    pixelWidth = currentWidth;
                else
                    shouldBeCloseTo("currentWidth", pixelWidth, 1);
            }
            finishJSTest();
        });
    }
    </script>
</head>
<body onload=run()>
    <input value="&#x1f46b;&#x1f46b;&#x1f3fb;&#x1f46b;&#x1f3ff;&#x1f46c;&#x1f46c;&#x1f3fb;&#x1f46c;&#x1f3ff;&#x1f46d;&#x1f46d;&#x1f3fb;&#x1f46d;&#x1f3ff;&#x1f46a;&#x1f46a;&#x1f3fb;&#x1f46a;&#x1f3ff;"></input>
    <script src="../../../resources/js-test-post.js"></script>
</body>

</html>