| <!DOCTYPE html> |
| <html> |
| <style> |
| html, body { |
| margin: 0; |
| font-family: -apple-system; |
| } |
| |
| #source, #destination { |
| width: 100%; |
| margin: 0; |
| } |
| |
| #destination { |
| border: 1px blue green; |
| height: 1024px; |
| } |
| |
| #source { |
| font-size: 150px; |
| white-space: nowrap; |
| height: 200px; |
| } |
| </style> |
| <body> |
| <div id="source"><strong style="color: purple">Rich text</strong></div> |
| <div id="destination" contenteditable></div> |
| <pre id="output"></pre> |
| </body> |
| <script> |
| |
| // The contents of this `result` dictionary will contain a map of {event type => {MIME type => data}}. |
| result = {}; |
| |
| function updateResultWithEvent(event) { |
| const eventData = {}; |
| for (const type of event.dataTransfer.types) |
| eventData[type] = event.dataTransfer.getData(type); |
| result[event.type] = eventData; |
| if (event.type === "drop") |
| output.textContent = JSON.stringify(result, null, " "); |
| event.preventDefault(); |
| } |
| |
| destination.addEventListener("dragover", updateResultWithEvent); |
| destination.addEventListener("drop", updateResultWithEvent); |
| |
| getSelection().setBaseAndExtent(source, 0, source, 1); |
| |
| if (window.testRunner && window.eventSender && window.internals) { |
| internals.settings.setCustomPasteboardDataEnabled(true); |
| testRunner.dumpAsText(); |
| eventSender.mouseMoveTo(100, 100); |
| eventSender.mouseDown(); |
| eventSender.leapForward(500); |
| eventSender.mouseMoveTo(100, 400); |
| eventSender.mouseUp(); |
| } |
| </script> |
| </html> |
