<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
</style>
<body>
    <div style="font-size: 40px;" id="source" draggable="true">Drag me out.</div>
    <p>To manually test, drag the above text. The output below dumps DataTransfer state following each operation,</p>
    <p>described directly above the output text for each step. The DataTransfer state should be consistent with the</p>
    <p>operation performed at each step.</p>
    <pre style="width: 100%; height: 100%" id="output"></pre>
</body>
<script>
function write(message) {
    output.textContent += `${message}\n`;
}

function representationForFile(file) {
    return file ? {
        name: file.name,
        bytes: file.size,
        type: file.type
    } : null;
}

function updateOutputText(description, event) {
    const dataInfo = {};
    for (const type of event.dataTransfer.types)
        dataInfo[type] = event.dataTransfer.getData(type);
    const itemsInfo = []
    for (const item of event.dataTransfer.items) {
        itemsInfo.push({
            type: item.type,
            kind: item.kind,
            file: representationForFile(item.getAsFile())
        });
    }
    write(`\n${description}\n${JSON.stringify({
        data: dataInfo,
        items: itemsInfo,
        files: Array.from(event.dataTransfer.files).map(representationForFile)
    }, null, "    ")}`);
}

function removeAt(itemList, index) {
    const removedItem = itemList[index];
    itemList.remove(index);
    return removedItem;
}

output.addEventListener("dragover", event => event.preventDefault());
output.addEventListener("drop", event => event.preventDefault());
source.addEventListener("dragstart", event => {
    const fileList = event.dataTransfer.files;
    event.dataTransfer.items.add("hello world", "text/plain");
    updateOutputText("1. After adding a string", event);

    const buffer = new ArrayBuffer(64);
    const array = new Int8Array(buffer);
    array.fill(15);
    event.dataTransfer.items.add(new File([ buffer ], "foo", { type: "custom" }));
    updateOutputText("2. After adding a file of custom type", event);

    event.dataTransfer.items.add(new File([
        new Blob(["This part is from a JavaScript Blob"], { type : "text/plain" }),
        "This part is just from a plain string"
    ], "first.txt", { type: "text/plain" }));
    updateOutputText("3. After adding the first plain text file", event);

    removedItem = removeAt(event.dataTransfer.items, 2);
    updateOutputText("4. After removing the last file", event);
    write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

    event.dataTransfer.items.add("<a>goodbye world</a>", "text/html");
    updateOutputText("5. After adding an HTML string", event);

    event.dataTransfer.items.add(new File([ "This is just a plain string" ], "second.txt", { type: "text/plain" }));
    updateOutputText("6. After adding another plain text file", event);

    removedItem = removeAt(event.dataTransfer.items, 1);
    updateOutputText("7. After removing the custom file", event);
    write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

    removedItem = removeAt(event.dataTransfer.items, 1);
    updateOutputText("8. After removing the HTML string", event);
    write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

    removedItem = removeAt(event.dataTransfer.items, 1);
    updateOutputText("9. After removing the second text file", event);
    write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

    removedItem = removeAt(event.dataTransfer.items, 0);
    updateOutputText("10. After removing the plain text string", event);
    write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);
    write(`The DataTransfer's FileList should be the same object: ${fileList == event.dataTransfer.files}`);

    event.preventDefault();
});

if (window.testRunner && window.eventSender && window.internals) {
    internals.settings.setCustomPasteboardDataEnabled(true);
    testRunner.dumpAsText();
    eventSender.mouseMoveTo(100, 25);
    eventSender.mouseDown();
    eventSender.leapForward(1000);
    eventSender.mouseMoveTo(100, 400);
    eventSender.mouseUp();
}
</script>
</html>