<!DOCTYPE html>
<html>
<body>
    <div id="editable" contenteditable onbeforeinput=handleBeforeInput(event) oninput=handleInput(event)></div>
    <script src="../../resources/dump-as-markup.js"></script>
    <script type="text/javascript">
        Markup.description(`To manually test this, turn on bold, italic and underline via the context menu, and then type some text into the contenteditable. The text should be italicized and underlined, but not bold.`);

        (function() {
            if (!window.internals || !window.eventSender || !window.testRunner)
                return;

            document.querySelector("#editable").focus();

            eventSender.keyDown("a", []);
            eventSender.keyDown("b", []);
            eventSender.keyDown("c", []);

            testRunner.execCommand("ToggleBold");
            testRunner.execCommand("ToggleItalic");
            testRunner.execCommand("ToggleUnderline");

            eventSender.keyDown("d", []);
            eventSender.keyDown("e", []);
            eventSender.keyDown("f", []);
            Markup.dump("editable", "after typing");

        })();

        function handleBeforeInput(event)
        {
            if (event.inputType === "formatBold")
                event.preventDefault();
        }

        function handleInput(event)
        {
            if (event.inputType === "formatBold")
                Markup.dump("editable", "FAILED: received input event");
        }
    </script>
</body>

</html>