<!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">Rich text</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.clipboardData.types)
        eventData[type] = event.clipboardData.getData(type).replace(/style="[^"]+"/g, 'style="...""');
    result[event.type] = eventData;
    output.textContent = JSON.stringify(result, null, "    ");
    event.preventDefault();
}

getSelection().setBaseAndExtent(source, 0, source, 1);
destination.addEventListener("paste", updateResultWithEvent);

if (window.testRunner && window.internals) {
    internals.settings.setCustomPasteboardDataEnabled(true);
    testRunner.dumpAsText();
    testRunner.execCommand("Copy");
    destination.focus();
    testRunner.execCommand("Paste");
}
</script>
</html>