<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
    width: 100%;
    height: 100%;
}
</style>
<body contenteditable>
    <div id="source">Copy me</div>
    <pre id="output">
        To manually test, copy the above text and paste anywhere in the body.
        This will dump the contents of the DataTransfer on copy and paste events as output text.
        You should see the custom types "text" and "url" written to the DataTransfer as custom
        data exposed on the DataTransfer's item list, on both copy and paste.
    </pre>
</body>
<script>

function write(markup) {
    output.insertAdjacentHTML("beforeend", markup);
}

function outputForFile(file) {
    return file ? `(name = '${file.name}', size = ${file.size} bytes, type = '${file.type}')` : "(null)";
}

globalStringLoadCount = 0;
currentStringLoadCount = 0;

function loadString(item) {
    currentStringLoadCount++;
    const outputElementId = `string-${++globalStringLoadCount}`;
    item.getAsString(string => {
        document.getElementById(outputElementId).textContent = string;
        currentStringLoadCount--;
        if (!currentStringLoadCount && window.didFinishLoadingAllStrings)
            didFinishLoadingAllStrings();
    });
    return `<span id=${outputElementId}></span>`;
}

function writeOutputForEvent(event) {
    write(`<br><h3>*** Handling ${event.type} ***</h3>`);
    write(`<div><strong>Types => data</strong></div>`);
    for (const type of event.clipboardData.types)
        write(`<div>${type} => "${event.clipboardData.getData(type)}"</div>`);
    let index = 0;
    write(`<div><strong>Item list</strong></div>`);
    for (const item of event.clipboardData.items) {
        if (item.kind === "file")
            write(`<div>[${index++}] => ${outputForFile(item.getAsFile())}</div>`);
        else
            write(`<div>[${index++}] => (type = "${item.type}", string = "${loadString(item)}")</div>`);
    }
    write(`<div><strong>File list</strong></div>`);
    index = 0;
    for (const file of event.clipboardData.files)
        write(`<div>[${index++}] => ${outputForFile(file)}</div>`);
}

function setCustomData(event) {
    output.textContent = "";

    event.clipboardData.setData("text/html", "<i>HTML data written using setData</i>");
    event.clipboardData.items.add("plain text data written using items.add", "text/plain");
    event.clipboardData.items.add("https://www.webkit.org/", "text/uri-list");
    event.clipboardData.setData("using setData", "data written using DataTransfer.setData");
    event.clipboardData.items.add("data written using DataTransferItemList.add", "using add");

    // Per the spec, "text" and "url" will be normalized to "text/plain" and "text/uri-list" when using
    // DataTransfer.getData. However, this custom data should still be accessible through DataTransferItems.
    event.clipboardData.items.add("this should be custom data", "text");
    event.clipboardData.items.add("this should also be custom data", "url");

    writeOutputForEvent(event);
}

getSelection().setBaseAndExtent(source, 0, source, 1);

document.body.addEventListener("paste", event => {
    event.preventDefault();
    writeOutputForEvent(event);
});
source.addEventListener("copy", event => {
    event.preventDefault();
    setCustomData(event);
});

if (window.testRunner && window.internals) {
    internals.settings.setCustomPasteboardDataEnabled(true);
    testRunner.waitUntilDone();
    testRunner.dumpAsText();

    document.execCommand("Copy");
    document.execCommand("Paste");

    didFinishLoadingAllStrings = () => testRunner.notifyDone();
}
</script>