<!DOCTYPE html>
<html>
<head>
    <script src="../../resources/js-test-pre.js"></script>
</head>
<body>
    <input id="editable" contenteditable value="abc" onbeforeinput=logInputEvent(event) oninput=logInputEvent(event)></input>
    <script type="text/javascript">
        description("To manually test this, recompose existing 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();
            textInputController.setMarkedText("abc", 0, 3);
            textInputController.setMarkedText("def", 0, 3);
            textInputController.setMarkedText("ghi", 0, 3);
            textInputController.insertText("ghi");
        }

        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>