<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->

<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <script>
        let write = message => output.innerHTML += message + "<br>";
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        let remainingInputEventCount = 0;
        let resolveExpectedInputEvents = null;
        function handleInput() {
            remainingInputEventCount--;
            if (resolveExpectedInputEvents && !remainingInputEventCount)
                resolveExpectedInputEvents();
        }

        function runUIScriptAndExpectInputEvents(inputEventCount, nextAutocorrectValue)
        {
            remainingInputEventCount = inputEventCount;
            resolveExpectedInputEvents = () => {
                write(`With autocorrect ${editable.autocorrect ? "on" : "off"}, the result is: "${editable.textContent.trim()}"`);
                editable.textContent = "";
                editable.autocorrect = nextAutocorrectValue;
                editable.blur();
            };

            return new Promise(function(resolve) {
                let rect = editable.getBoundingClientRect();
                testRunner.runUIScript(`(function() {
                    uiController.removeAllDynamicDictionaries();
                    uiController.didShowKeyboardCallback = function() {
                        uiController.typeCharacterUsingHardwareKeyboard("t", function() {
                            uiController.typeCharacterUsingHardwareKeyboard("i", function() {
                                uiController.typeCharacterUsingHardwareKeyboard(" ", function() { });
                            });
                        });
                    }
                    uiController.didHideKeyboardCallback = function() {
                        uiController.uiScriptComplete();
                    }
                    uiController.singleTapAtPoint(${rect.left + rect.width / 2}, ${rect.top + rect.height / 2}, function() {});
                })();`, resolve);
            });
        }

        function runTest()
        {
            if (!window.testRunner || !testRunner.runUIScript)
                return;

            runUIScriptAndExpectInputEvents(3, "on")
                .then(() => runUIScriptAndExpectInputEvents(4, null))
                .then(() => testRunner.notifyDone());
        }
    </script>
    <style>
    #editable {
        width: 200px;
        height: 100px;
        top: 0;
        left: 0;
        position: absolute;
    }
    </style>
</head>

<body onload=runTest()>
    <div style="font-size: 24px;" contenteditable autocorrect="off" id="editable" oninput=handleInput()></div>
    <p>To manually test, type 'Ti' into the contenteditable and a space. The 'Ti' should not be autocorrected.</p>
    <code><div id="output"></div></code>
</body>

</html>