<!DOCTYPE html>
<meta charset="utf-8">
<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);
    result[event.type] = eventData;
    output.textContent = JSON.stringify(result, null, "    ");
    event.preventDefault();
}

function setCustomData(event) {
    event.clipboardData.setData("text/plain", "ben bitdiddle");
    event.clipboardData.setData("foo/🤔👌🙃", "🤔👌🙃");
    event.clipboardData.setData("text/html", "<b>年年年</b>");
    event.clipboardData.setData("bar/מקור השם עברית", `<i>מקור השם עברית</i>`);
    event.clipboardData.setData("text/uri-list", "https://www.apple.com");
    event.clipboardData.setData("baz/年年年", "https://www.webkit.org");
    event.clipboardData.setData("text/rtf", "AAAAAAAAAAA");
    event.preventDefault();
}

getSelection().setBaseAndExtent(source, 0, source, 1);
source.addEventListener("copy", setCustomData);
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>