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..32a090234e4c9ca99caab3a1c13bf4745e1eac8b |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/dnd/file-drag-drop-on-page.html |
@@ -0,0 +1,215 @@ |
+<!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(); |
jsbell
2016/12/16 21:16:15
nit: no () needed around single argument (here and
jsbell
2016/12/16 21:16:16
Something we should decide on in the style guide:
pwnall
2016/12/17 00:44:48
Done.
pwnall
2016/12/17 00:44:48
Done.
|
+ |
+ 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) => { |
+ dropZone.ondrop = (event) => { |
+ event.preventDefault(); // Needed to prevent drop navigation. |
+ resolve(copyDataTransfer(event.dataTransfer)); |
+ }; |
+}); |
+ |
+const wrapperRect = dropWrapper.getBoundingClientRect(); |
jsbell
2016/12/16 21:16:15
These can move into the if block.
pwnall
2016/12/17 00:44:48
I have them outside so I can see typos in the cons
jsbell
2016/12/19 17:25:17
OK to leave as is.
|
+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); |
jsbell
2016/12/16 21:16:15
Why 16?
pwnall
2016/12/17 00:44:48
I wanted to have the move go in a different frame
|
+} |
+ |
+promise_test(() => { |
+ return dragEnterPromise.then((dataTransfer) => { |
+ assert_equals(JSON.stringify(dataTransfer.types), '["Files"]'); |
jsbell
2016/12/16 21:16:15
Will this work?
assert_array_equals(dataTransfer.
pwnall
2016/12/17 00:44:48
Done.
FWIW, I had assert_array_equals at first, b
jsbell
2016/12/19 17:25:17
Agreed. I think the tests should focus on expressi
pwnall
2016/12/19 21:51:19
Done.
I filed https://github.com/w3c/testharness.j
|
+ }); |
+}, 'dragenter types'); |
jsbell
2016/12/16 21:16:15
Can you clarify - in either the test names or asse
pwnall
2016/12/17 00:44:48
Done.
|
+ |
+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), '[]'); |
jsbell
2016/12/16 21:16:15
Can you assert that length is 0 rather than using
pwnall
2016/12/17 00:44:48
Done.
I guess I don't have the same issue here as
|
+ }); |
+}, '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> |