<!DOCTYPE html>
<html>
<body>
    <input id="input" contenteditable></input>
    <select id="select"><option></option></select>
    <div id="output"></div>
    <script type="text/javascript">
        let write = s => output.innerHTML += `${s}<br>`;
        input.focus();

        if (window.testRunner) {
            testRunner.dumpAsText();
            textInputController.setMarkedText("a", 1, 0);
            textInputController.setMarkedText("ab", 2, 0);
            textInputController.setMarkedText("abc", 3, 0);
            select.focus();
            textInputController.insertText(null);
            write(`The text field's value is: "${input.value}"`);
            write(`Is there marked text? ${!!textInputController.markedRange()}`);
        } else {
            write(`To manually test, insert some marked text in the left text field without committing it, then focus
                the right select menu. The composition text should be committed, and the composition should no longer
                be highlighted.`);
        }
    </script>
</body>
</html>