<!DOCTYPE html>
<html>
<body>
    <style>
    #source, #destination {
        width: 100vw;
        height: 50vh;
        border: blue dashed 1px;
        font-size: 40vh;
        position: absolute;
        opacity: 0.5;
    }
    #source {
        top: 0vh;
    }
    #destination {
        top: 50vh;
    }
    </style>
    <p>To manually test this, drag the text in the first input into the second, then undo (cmd-z) and observe the
    output. You should see two deleteByDrag events (beforeinput and input) followed by two insertFromDrop events. After
    undoing, you should see two historyUndo events, and redoing should output two historyRedo events.</p>
    <input id="source" onbeforeinput=logInputEvent(event) oninput=logInputEvent(event) value="Input events!"></input>
    <input id="destination" onbeforeinput=logInputEvent(event) oninput=logInputEvent(event)></input>
    <div id="output"></div>
    <script type="text/javascript">
        let write = s => output.innerHTML += s + "<br>";
        if (window.internals && window.testRunner) {
            internals.settings.setInputEventsEnabled(true);
            testRunner.dumpAsText();
        }

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

        if (window.eventSender) {
            write("Performing drag and drop");
            moveToCenter(source);
            eventSender.leapForward(500);
            eventSender.mouseDown();
            eventSender.leapForward(1000);
            moveToCenter(destination);
            eventSender.leapForward(500);
            eventSender.mouseUp();

            write("");
            write("Undoing drag and drop");
            document.execCommand("Undo");

            write("");
            write("Redoing drag and drop");
            document.execCommand("Redo");
        }

        function logInputEvent(event)
        {
            write(`(${event.target.id}): type=${event.type}, inputType=${event.inputType}, data=\`${event.data}\``);
        }

        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>