<!DOCTYPE html>
<html>
<body>
    <style>
        #source, #richDestination, #plainDestination {
            font-size: 30px;
            border: 1px blue dashed;
            width: 100px;
        }
    </style>
    <p>To manually test this, drag the text into the contenteditable, and then into the textarea. Observe the output.
    You should see a pair of insertFromDrop events dispatched on richDestination followed by another pair of
    insertFromDrop events dispatched on plainDestination.</p>
    <div id="source">WebKit</div>
    <div id="richDestination" contenteditable onbeforeinput=logInputEvent(event) oninput=logInputEvent(event)></div>
    <textarea id="plainDestination" onbeforeinput=logInputEvent(event) oninput=logInputEvent(event)></textarea>
    <div id="output"></div>
    <script type="text/javascript">
        if (window.internals && window.testRunner) {
            internals.settings.setInputEventsEnabled(true);
            testRunner.dumpAsText();
        }

        if (window.eventSender) {
            moveToCenter(source);
            doubleClick();
            eventSender.leapForward(1000);

            eventSender.mouseDown();
            eventSender.leapForward(1000);
            moveToCenter(richDestination);
            eventSender.leapForward(1000);
            eventSender.mouseUp();
            eventSender.leapForward(1000);

            moveToCenter(source);
            doubleClick();
            eventSender.leapForward(1000);

            eventSender.mouseDown();
            eventSender.leapForward(1000);
            moveToCenter(plainDestination);
            eventSender.leapForward(1000);
            eventSender.mouseUp();
        }

        function dataTransferToString(dataTransfer)
        {
            if (!dataTransfer)
                return "(null)"

            return `{rich:${dataTransfer.getData("text/html")} plain:${dataTransfer.getData("text/plain")}}`;
        }

        function logInputEvent(event)
        {
            output.innerHTML += `(${event.target.id}): type=${event.type}, inputType=${event.inputType}, data="${event.data}" dataTransfer=${dataTransferToString(event.dataTransfer)}<br>`;
        }

        function doubleClick() {
            eventSender.mouseDown();
            eventSender.mouseUp();
            eventSender.leapForward(100);
            eventSender.mouseDown();
            eventSender.mouseUp();
        }

        function moveToCenter(element)
        {
            let x = element.offsetParent.offsetLeft + element.offsetLeft + element.offsetWidth / 2;
            let y = element.offsetParent.offsetTop + element.offsetTop + element.offsetHeight / 2;
            eventSender.mouseMoveTo(x, y);
        }
    </script>
</body>
</html>