LayoutTests/editing/pasteboard/data-transfer-item-list-add-file-multiple-times.html - WebKit - Git at Google

 <!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">Copy this text!</div>
     <p>To manually test, copy 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 removeAt(itemList, index) {
     const removedItem = itemList[index];
     itemList.remove(index);
     return removedItem;
 }

 function updateOutputText(description, event, itemList, fileList) {
     const dataInfo = {};
     for (const type of event.clipboardData.types)
         dataInfo[type] = event.clipboardData.getData(type);
     const itemsInfo = []
     for (const item of itemList) {
         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(fileList).map(representationForFile)
     }, null, "    ")}`);
 }

 source.addEventListener("copy", event => {
     const file = new File([ "This is a text file." ], "file.txt", { type: "text/plain" });

     let itemList = event.clipboardData.items;
     let fileList = event.clipboardData.files;
     event.clipboardData.items.add(file);
     event.clipboardData.items.add(file);
     event.clipboardData.items.add("plain text string", "text/plain");
     event.clipboardData.items.add("https://webkit.org", "text/uri-list");
     event.clipboardData.items.add(file);
     event.clipboardData.items.add(file);
     updateOutputText("1. After adding all items", event, itemList, fileList);

     itemList = event.clipboardData.items;
     fileList = event.clipboardData.files;
     let removedItem = removeAt(itemList, 4);
     updateOutputText("2. After removing at index 4", event, itemList, fileList);
     write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

     itemList = event.clipboardData.items;
     fileList = event.clipboardData.files;
     removedItem = removeAt(itemList, 1);
     updateOutputText("3. After removing at index 1", event, itemList, fileList);
     write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

     itemList = event.clipboardData.items;
     fileList = event.clipboardData.files;
     removedItem = removeAt(itemList, 3);
     updateOutputText("4. After removing at index 3", event, itemList, fileList);
     write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

     itemList = event.clipboardData.items;
     fileList = event.clipboardData.files;
     event.clipboardData.items.clear();
     updateOutputText("5. After clearing items", event, itemList, fileList);

     event.clipboardData.items.add(file);
     event.clipboardData.items.add("<strong>some styled text</strong>", "text/html");
     event.clipboardData.items.add("some plain text", "text/plain");
     itemList = event.clipboardData.items;
     fileList = event.clipboardData.files;
     event.clipboardData.items.add(file);
     updateOutputText("6. After adding two files and some string data again", event, itemList, fileList);

     itemList = event.clipboardData.items;
     fileList = event.clipboardData.files;
     removedItem = removeAt(itemList, 2);
     updateOutputText("7. After removing at index 2", event, itemList, fileList);
     write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

     itemList = event.clipboardData.items;
     fileList = event.clipboardData.files;
     removedItem = removeAt(itemList, 2);
     updateOutputText("8. After removing at index 2", event, itemList, fileList);
     write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

     itemList = event.clipboardData.items;
     fileList = event.clipboardData.files;
     removedItem = removeAt(itemList, 1);
     updateOutputText("9. After removing at index 1", event, itemList, fileList);
     write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

     itemList = event.clipboardData.items;
     fileList = event.clipboardData.files;
     removedItem = removeAt(itemList, 0);
     updateOutputText("10. After removing at index 0", event, itemList, fileList);
     write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

     event.preventDefault();
 });

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

 if (window.testRunner && window.internals) {
     internals.settings.setCustomPasteboardDataEnabled(true);
     testRunner.dumpAsText();
     document.execCommand("Copy");
 }
 </script>
 </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">Copy this text!</div>
	<p>To manually test, copy 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 removeAt(itemList, index) {
	const removedItem = itemList[index];
	itemList.remove(index);
	return removedItem;
	}

	function updateOutputText(description, event, itemList, fileList) {
	const dataInfo = {};
	for (const type of event.clipboardData.types)
	dataInfo[type] = event.clipboardData.getData(type);
	const itemsInfo = []
	for (const item of itemList) {
	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(fileList).map(representationForFile)
	}, null, " ")}`);
	}

	source.addEventListener("copy", event => {
	const file = new File([ "This is a text file." ], "file.txt", { type: "text/plain" });

	let itemList = event.clipboardData.items;
	let fileList = event.clipboardData.files;
	event.clipboardData.items.add(file);
	event.clipboardData.items.add(file);
	event.clipboardData.items.add("plain text string", "text/plain");
	event.clipboardData.items.add("https://webkit.org", "text/uri-list");
	event.clipboardData.items.add(file);
	event.clipboardData.items.add(file);
	updateOutputText("1. After adding all items", event, itemList, fileList);

	itemList = event.clipboardData.items;
	fileList = event.clipboardData.files;
	let removedItem = removeAt(itemList, 4);
	updateOutputText("2. After removing at index 4", event, itemList, fileList);
	write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

	itemList = event.clipboardData.items;
	fileList = event.clipboardData.files;
	removedItem = removeAt(itemList, 1);
	updateOutputText("3. After removing at index 1", event, itemList, fileList);
	write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

	itemList = event.clipboardData.items;
	fileList = event.clipboardData.files;
	removedItem = removeAt(itemList, 3);
	updateOutputText("4. After removing at index 3", event, itemList, fileList);
	write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

	itemList = event.clipboardData.items;
	fileList = event.clipboardData.files;
	event.clipboardData.items.clear();
	updateOutputText("5. After clearing items", event, itemList, fileList);

	event.clipboardData.items.add(file);
	event.clipboardData.items.add("<strong>some styled text</strong>", "text/html");
	event.clipboardData.items.add("some plain text", "text/plain");
	itemList = event.clipboardData.items;
	fileList = event.clipboardData.files;
	event.clipboardData.items.add(file);
	updateOutputText("6. After adding two files and some string data again", event, itemList, fileList);

	itemList = event.clipboardData.items;
	fileList = event.clipboardData.files;
	removedItem = removeAt(itemList, 2);
	updateOutputText("7. After removing at index 2", event, itemList, fileList);
	write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

	itemList = event.clipboardData.items;
	fileList = event.clipboardData.files;
	removedItem = removeAt(itemList, 2);
	updateOutputText("8. After removing at index 2", event, itemList, fileList);
	write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

	itemList = event.clipboardData.items;
	fileList = event.clipboardData.files;
	removedItem = removeAt(itemList, 1);
	updateOutputText("9. After removing at index 1", event, itemList, fileList);
	write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

	itemList = event.clipboardData.items;
	fileList = event.clipboardData.files;
	removedItem = removeAt(itemList, 0);
	updateOutputText("10. After removing at index 0", event, itemList, fileList);
	write(`removedItem.getAsFile() should be null: ${removedItem.getAsFile()}`);

	event.preventDefault();
	});

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

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