| <!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> |
