117 lines
4.3 KiB
HTML
117 lines
4.3 KiB
HTML
<!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>
|