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