<!DOCTYPE html>
<html>
<head>
    <script src="../../resources/js-test-pre.js"></script>
</head>
<body>
    <input id="editable" contenteditable onbeforeinput=logInputEvent(event) oninput=logInputEvent(event)></input>
    <script type="text/javascript">
        description("To manually test this, insert text via IME and observe the resulting debug messages.");
        if (window.internals)
            internals.settings.setInputEventsEnabled(true);

        editable.addEventListener("compositionend", logCompositionEvent);
        editable.focus();

        if (window.testRunner && window.textInputController) {
            testRunner.dumpAsText();
            debug("* * * First case: typing a new composition * * *");
            textInputController.setMarkedText("a", 1, 0);
            textInputController.setMarkedText("ab", 2, 0);
            textInputController.setMarkedText("abc", 3, 0);
            textInputController.insertText("abc");
            debug("* * * Second case: canceling a new composition * * *");
            textInputController.setMarkedText("a", 1, 0);
            textInputController.setMarkedText("ab", 2, 0);
            textInputController.setMarkedText(" ", 0, 1);
            textInputController.setMarkedText("", 0, 0);
            debug("* * * Third case: replacing a composition * * *");
            textInputController.setMarkedText("a", 1, 0);
            textInputController.setMarkedText("ab", 2, 0);
            textInputController.setMarkedText("cde", 0, 3);
            textInputController.setMarkedText("fg", 0, 2);
            textInputController.insertText("fg");
            debug("* * * Fourth case: partially committing a composition * * *");
            textInputController.setMarkedText("a", 1, 0);
            textInputController.setMarkedText("aa", 2, 0);
            textInputController.setMarkedText("aaa", 3, 0);
            textInputController.insertText("a");
            textInputController.setMarkedText("aa", 2, 0);
        }

        function logInputEvent(event)
        {
            debug(`${event.type}(inputType = '${event.inputType}', data = '${event.data}', cancelable = ${event.cancelable})`);
        }

        function logCompositionEvent(event)
        {
            debug(`${event.type}(data = '${event.data}')`);
        }
    </script>
    <script src="../../resources/js-test-post.js"></script>
</body>
</html>