<!DOCTYPE html>
<html>
<body>
    <style>
    #source, #destination, #copy {
        width: 100vw;
        height: 20vh;
        border: blue dashed 1px;
        font-size: 18vh;
        position: absolute;
        opacity: 0.5;
        text-align: center;
    }
    #source {
        top: 0vh;
    }
    #destination {
        top: 20vh;
    }
    </style>
    <p>To manually test this, drag the text in the first editing area into the second. The first area should retain the
    text, the second area should be blank, and the third area should show an HTML representation of the first area with
    style information.</p>
    <p>Source:</p>
    <div id="source" contenteditable onbeforeinput=handleBeforeInput(event)><code>input events</code></div>
    <p>Destination:</p>
    <div id="destination" contenteditable onbeforeinput=handleBeforeInput(event)></div>
    <p>HTML content:</p>
    <div id="result"></div>
    <script type="text/javascript">
        if (window.internals && window.testRunner) {
            internals.settings.setInputEventsEnabled(true);
            testRunner.dumpAsText();
        }

        source.focus();
        document.execCommand("selectAll");

        if (window.eventSender) {
            moveToCenter(source);
            eventSender.leapForward(500);
            eventSender.mouseDown();
            eventSender.leapForward(1000);
            moveToCenter(destination);
            eventSender.leapForward(500);
            eventSender.mouseUp();
        }

        function handleBeforeInput(event)
        {
            if (event.inputType === "insertFromDrop") {
                result.textContent = event.dataTransfer.getData("text/html");
                event.preventDefault();
                return;
            }

            if (event.inputType === "deleteByDrag")
                event.preventDefault();
        }

        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>