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

<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <script id="ui-script" type="text/plain">
        (function() {
            uiController.didShowKeyboardCallback = function() {
                uiController.typeCharacterUsingHardwareKeyboard("t", function() {
                    uiController.selectTextCandidateAtIndex(1, function() {
                        uiController.uiScriptComplete();
                    });
                });
            }
            uiController.singleTapAtPoint($x, $y, function() {});
        })();
    </script>

    <script>
        var progress = 0;
        let write = (message) => output.innerHTML += (message + "<br>");
        function getUIScript() {
            let rect = editable.getBoundingClientRect();
            let script = document.getElementById("ui-script").text;
            script = script.replace("$x", rect.left + rect.width / 2);
            return script.replace("$y", rect.top + rect.height / 2);
        }

        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
            internals.settings.setInputEventsEnabled(true);
        }

        function incrementProgress()
        {
            progress++;
            if (!window.testRunner || progress !== 3)
                return;

            setTimeout(function() {
                editable.textContent = "";
                testRunner.notifyDone();
            }, 0);
        }

        function runTest()
        {
            editable.addEventListener("input", logInputEvent);
            editable.addEventListener("beforeinput", logInputEvent);
            if (!window.testRunner || !testRunner.runUIScript)
                return;

            testRunner.runUIScript(getUIScript(), function(result) {
                incrementProgress();
            });
        }

        function logInputEvent(event)
        {
            if (event.inputType !== "insertReplacementText")
                return;

            if (event.type === "beforeinput") {
                let firstRange = event.getTargetRanges()[0];
                write(`PASS: Handled text replacement before input event with range: [${firstRange.startOffset}, ${firstRange.endOffset}].`);
            } else
                write(`PASS: Handled text replacement input event.`);
            incrementProgress();
        }
    </script>
    <style>
    #editable {
        width: 200px;
        height: 200px;
        top: 0;
        left: 0;
        position: absolute;
    }
    </style>
</head>

<body style="margin: 0;" onload=runTest()>
    <div contenteditable id="editable"></div>
    <p>To manually test, type 't' into the contenteditable and try to select a candidate. The output should indicate that the beforeinput and input events for the text replacement were handled, and that the range of the beforeinput event is from 0 to 1.</p>
    <div id="output"></div>
</body>

</html>