file-drag-over-page-cancel.html | Explore in Territory

<!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>
#dropzone {
  display: block;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
</style>

<p>
  Please download <a download href="resources/dragged-file.txt">this file</a>,
  drag it <em>over</em> the box below, then press the <key>ESC</key> key.
</p>

<div id="dropzone">
  Drop Here
</div>

<script>
'use strict';

const dropZone = document.querySelector('#dropzone');

const dragLeavePromise = new Promise((resolve, reject) => {
  dropZone.ondragleave = event => {
    resolve(copyDataTransfer(event.dataTransfer));
  };
});

const clientRect = dropZone.getBoundingClientRect();
if (window.eventSender) {
  // dragenter + dragover on #dropzone
  eventSender.beginDragWithFiles(['resources/dragged-file.txt']);
  const centerX = (clientRect.left + clientRect.right) / 2;
  const centerY = (clientRect.top + clientRect.bottom) / 2;
  eventSender.mouseMoveTo(centerX, centerY);

  // dragleave on #dropwrapper
  setTimeout(() => { eventSender.keyDown('Escape'); }, 0);
}

promise_test(() => {
  return dragLeavePromise.then((dataTransfer) => {
    assert_array_equals(dataTransfer.types, ['Files']);
  });
}, 'DataTransfer.types in dragleave');

promise_test(() => {
  return dragLeavePromise.then((dataTransfer) => {
    assert_object_equals(dataTransfer.data, {Files: ''});
  });
}, 'DataTransfer.getData() return values in dragleave');

promise_test(() => {
  return dragLeavePromise.then((dataTransfer) => {
    assert_equals(
        dataTransfer.files.length, 0,
        'DataTransfer is protected, so DataTransfer.files should be empty');
  });
}, 'DataTransfer.files in dragleave');

promise_test(() => {
  return dragLeavePromise.then((dataTransfer) => {
    assert_equals(
        dataTransfer.items.length, 1,
        'DataTransfer.items should have 1 element');
    const item = dataTransfer.items[0];
    assert_equals(
        item.kind, 'file',
        'DataTransferItem.kind should indicate that a file was dropped');
    assert_equals(
        item.type, 'text/plain',  // Firefox returns application/x-moz-file.
        "DataTransferItem.type should reflect the dropped file's MIME type");
    assert_equals(
        item.file, null,  // Firefox returns the file's metadata.
        'DataTransferItem.getAsFile() should reflect that the DataTransfer ' +
        'is protected');
  });
}, 'DataTransfer.items in dragleave');

</script>
chromium/third_party/blink/web_tests/fast/dnd/file-drag-over-page-cancel.html
