<!DOCTYPE html>
<html>
<body>
    <div id="source" contenteditable onbeforeinput=beforeInput(event)></div>
    <div id="destination" contenteditable></div>
    <script src="../../resources/dump-as-markup.js"></script>
    <script>
        Markup.description(`To manually test this, make a typo in the first contenteditable and use spell checking to correct it. The corrected value should appear below.`);
        source.focus();

        if (window.internals && window.eventSender) {
            eventSender.keyDown("e", []);
            eventSender.keyDown("s", []);
            eventSender.keyDown("c", []);
            internals.handleAcceptedCandidate("<p>escape me!</p>", 0, 3);
        }

        Markup.dump("destination", "after autocorrection");

        function beforeInput(event)
        {
            if (!event.dataTransfer)
                return;

            destination.innerHTML = event.dataTransfer.getData("text/html");
            event.preventDefault();
        }
    </script>
</body>
</html>