<!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;
        var replacementText = "";
        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 !== 2)
                return;

            setTimeout(function() {
                if (editable.value.indexOf(replacementText) == -1)
                    write(`PASS: The replacement text was prevented.`);
                else
                    write(`FAIL: The input value ${editable.value} should not contain replacement text ${replacementText}.`);
                testRunner.notifyDone();
            }, 0);
        }

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

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

        function preventBeforeInput(event)
        {
            if (event.inputType === "insertReplacementText") {
                replacementText = event.data;
                if (!replacementText)
                    write("FAIL: The replacement text input event lacks data.");
                event.preventDefault();
                incrementProgress();
            }
        }

    </script>
    <style>
    #editable {
        width: 200px;
        height: 100px;
        top: 0;
        left: 0;
        position: absolute;
    }
    </style>
</head>

<body style="margin: 0;" onload=runTest()>
    <input contenteditable id="editable"></input>
    <p>To manually test, type 't' into the contenteditable and try to select a candidate. The replacement text should not be inserted.</p>
    <div id="output"></div>
</body>

</html>