Chromium Code Reviews| Index: third_party/WebKit/LayoutTests/fast/dnd/file-drag-drop-on-page.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/dnd/file-drag-drop-on-page.html b/third_party/WebKit/LayoutTests/fast/dnd/file-drag-drop-on-page.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..e09411e477756d6a5b174e23b4fb43b9cd033ffc |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/dnd/file-drag-drop-on-page.html |
| @@ -0,0 +1,217 @@ |
| +<!doctype html> |
| +<meta charset="utf-8" /> |
| +<script src="../../resources/testharness.js"></script> |
| +<script src="../../resources/testharnessreport.js"></script> |
| +<script src="resources/copy-data-transfer.js"></script> |
| +<style> |
| +#dropwrapper { |
| + display: block; |
| + width: 400px; |
| + height: 200px; |
| + position: relative; |
| + padding: 50px 0 0 100px; |
| +} |
| +#dropzone { |
| + display: block; |
| + border: 1px solid black; |
| + width: 200px; |
| + height: 100px; |
| +} |
| +</style> |
| + |
| +<p> |
| + Please download <a download href="resources/dragged-file.txt">this file</a>, |
| + and drag it into the box below. |
| +</p> |
| + |
| +<div id="dropwrapper"> |
| + <div id="dropzone"> |
| + Drop Here |
| + </div> |
| +</div> |
| + |
| +<script> |
| + |
| +const dropWrapper = document.querySelector('#dropwrapper'); |
| +const dropZone = document.querySelector('#dropzone'); |
| + |
| +const dragEnterPromise = new Promise((resolve, reject) => { |
| + // Needed to keep the drag-and-drop going. |
| + dropWrapper.ondragenter = (event) => event.preventDefault(); |
| + |
| + dropZone.ondragenter = (event) => { |
| + event.preventDefault(); // Needed to keep the drag-and-drop going. |
| + resolve(copyDataTransfer(event.dataTransfer)); |
| + }; |
| +}); |
| +const dragOverPromise = new Promise((resolve, reject) => { |
| + // Needed to keep the drag-and-drop going. |
| + dropZone.ondragover = (event) => event.preventDefault(); |
| + |
| + dropWrapper.ondragover = (event) => { |
| + event.preventDefault(); // Needed to keep the drag-and-drop going. |
| + resolve(copyDataTransfer(event.dataTransfer)); |
| + }; |
| +}); |
| +const dragLeavePromise = new Promise((resolve, reject) => { |
| + dropWrapper.ondragleave = (event) => { |
| + resolve(copyDataTransfer(event.dataTransfer)); |
| + }; |
| +}); |
| +const dropPromise = new Promise((resolve, reject) => { |
| + dropWrapper.ondrop = (event) => event.preventDefault(); |
|
dcheng
2016/12/16 18:41:57
Why do we need to install listeners on the wrapper
pwnall
2016/12/16 19:37:38
Ahh, good point. Thank you very much for catching
|
| + |
| + dropZone.ondrop = (event) => { |
| + event.preventDefault(); // Needed to prevent drop navigation. |
| + resolve(copyDataTransfer(event.dataTransfer)); |
| + }; |
| +}); |
| + |
| +const wrapperRect = dropWrapper.getBoundingClientRect(); |
| +const dropRect = dropZone.getBoundingClientRect(); |
| +if (window.eventSender) { |
| + eventSender.mouseMoveTo(0, 0); |
| + eventSender.beginDragWithFiles(['resources/dragged-file.txt']); |
| + |
| + // dragenter + dragover on #dropwrapper |
| + const wrapperX = wrapperRect.left + 10; |
| + const wrapperY = wrapperRect.top + 10; |
| + eventSender.mouseMoveTo(wrapperX, wrapperY); |
| + |
| + // dragleave on #dropwrapper and dragenter + dragover + dragleave on #dropzone |
| + setTimeout(() => { |
| + const centerX = (dropRect.left + dropRect.right) / 2; |
| + const centerY = (dropRect.top + dropRect.bottom) / 2; |
| + eventSender.mouseMoveTo(centerX, centerY); |
| + eventSender.mouseUp(); |
| + }, 16); |
| +} |
| + |
| +promise_test(() => { |
| + return dragEnterPromise.then((dataTransfer) => { |
| + assert_equals(JSON.stringify(dataTransfer.types), '["Files"]'); |
| + }); |
| +}, 'dragenter types'); |
| + |
| +promise_test(() => { |
| + return dragOverPromise.then((dataTransfer) => { |
| + assert_equals(JSON.stringify(dataTransfer.types), '["Files"]'); |
| + }); |
| +}, 'dragover types'); |
| + |
| +promise_test(() => { |
| + return dragLeavePromise.then((dataTransfer) => { |
| + assert_equals(JSON.stringify(dataTransfer.types), '["Files"]'); |
| + }); |
| +}, 'dragleave types'); |
| + |
| +promise_test(() => { |
| + return dropPromise.then((dataTransfer) => { |
| + assert_equals(JSON.stringify(dataTransfer.types), '["Files"]'); |
| + }); |
| +}, 'drop types'); |
| + |
| +promise_test(() => { |
| + return dragEnterPromise.then((dataTransfer) => { |
| + assert_equals(dataTransfer.data['Files'], ''); |
| + }); |
| +}, 'dragenter getData() return value'); |
| + |
| +promise_test(() => { |
| + return dragOverPromise.then((dataTransfer) => { |
| + assert_equals(dataTransfer.data['Files'], ''); |
| + }); |
| +}, 'dragover getData() return value'); |
| + |
| +promise_test(() => { |
| + return dragLeavePromise.then((dataTransfer) => { |
| + assert_equals(dataTransfer.data['Files'], ''); |
| + }); |
| +}, 'dragleave getData() return value'); |
| + |
| +promise_test(() => { |
| + return dropPromise.then((dataTransfer) => { |
| + assert_equals(dataTransfer.data['Files'], ''); |
| + }); |
| +}, 'drop getData() return value'); |
| + |
| +promise_test(() => { |
| + return dragEnterPromise.then((dataTransfer) => { |
| + assert_equals(JSON.stringify(dataTransfer.files), '[]'); |
| + }); |
| +}, 'dragenter files'); |
| + |
| +promise_test(() => { |
| + return dragOverPromise.then((dataTransfer) => { |
| + assert_equals(JSON.stringify(dataTransfer.files), '[]'); |
| + }); |
| +}, 'dragover files'); |
| + |
| +promise_test(() => { |
| + return dragLeavePromise.then((dataTransfer) => { |
| + assert_equals(JSON.stringify(dataTransfer.files), '[]'); |
| + }); |
| +}, 'dragleave files'); |
| + |
| +promise_test(() => { |
| + return dropPromise.then((dataTransfer) => { |
| + assert_equals(dataTransfer.files.length, 1); |
| + const file = dataTransfer.files[0]; |
| + assert_equals(file.file.name, 'dragged-file.txt'); |
| + assert_equals(file.file.type, 'text/plain'); |
| + assert_equals(file.file.size, 21); |
| + assert_equals(file.data, 'The test has FAILED.\n'); |
| + }); |
| +}, 'drop files'); |
| + |
| +promise_test(() => { |
| + return dragEnterPromise.then((dataTransfer) => { |
| + assert_equals(dataTransfer.items.length, 1); |
| + const item = dataTransfer.items[0]; |
| + assert_equals(item.kind, 'file'); |
| + assert_equals(item.type, 'text/plain'); // application/x-moz-file in FF |
| + assert_equals(item.file, null); // FF returns the file's metadata. |
| + assert_equals(item.data, undefined); |
| + assert_equals(item.error, undefined); // FF throws a SecurityError. |
| + }); |
| +}, 'dragenter items'); |
| + |
| +promise_test(() => { |
| + return dragOverPromise.then((dataTransfer) => { |
| + assert_equals(dataTransfer.items.length, 1); |
| + const item = dataTransfer.items[0]; |
| + assert_equals(item.kind, 'file'); |
| + assert_equals(item.type, 'text/plain'); // application/x-moz-file in FF |
| + assert_equals(item.file, null); // FF returns the file's metadata. |
| + assert_equals(item.data, undefined); |
| + assert_equals(item.error, undefined); // FF throws a SecurityError. |
| + }); |
| +}, 'dragover items'); |
| + |
| +promise_test(() => { |
| + return dragLeavePromise.then((dataTransfer) => { |
| + assert_equals(dataTransfer.items.length, 1); |
| + const item = dataTransfer.items[0]; |
| + assert_equals(item.kind, 'file'); |
| + assert_equals(item.type, 'text/plain'); // application/x-moz-file in FF |
| + assert_equals(item.file, null); // FF returns the file's metadata. |
| + assert_equals(item.data, undefined); |
| + assert_equals(item.error, undefined); // FF throws a SecurityError. |
| + }); |
| +}, 'dragleave items'); |
| + |
| +promise_test(() => { |
| + return dropPromise.then((dataTransfer) => { |
| + assert_equals(dataTransfer.items.length, 1); |
| + const item = dataTransfer.items[0]; |
| + assert_equals(item.kind, 'file'); |
| + assert_equals(item.type, 'text/plain'); // application/x-moz-file in FF |
| + assert_equals(item.error, undefined); |
| + assert_equals(item.file.name, 'dragged-file.txt'); |
| + assert_equals(item.file.type, 'text/plain'); |
| + assert_equals(item.file.size, 21); |
| + assert_equals(item.data, 'The test has FAILED.\n'); |
| + }); |
| +}, 'drop items'); |
| + |
| +</script> |