drag-dataTransferItemList-file-handling.html

<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<style>
#drag {
    border: 1px solid black;
    height: 200px;
    width: 200px;
}
#drop {
    border: 1px solid black;
    height: 200px;
    width: 200px;
}
</style>

</head>
<body>
<p>To manually test, select a text file for the file input element, and then drag 'Drag Me' to 'Drop Here' and drop.
<!-- TODO(https://crbug.com/438479): File handling has never been fully
  implemented for DataTransferItemList.add, but is implemented in eventSender.
  Therefore, this test succeeds when run through content_shell, but fails
  when run manually. -->
<input id="inputElement" type="file"></input>
<div draggable="true" id="drag" ondragstart="dragstart(event)">Drag Me</div>
<div id="drop" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)">Drop Here</div>
</div>
<div id="console"></div>

<script>
let testFile = null;
const inputElement = document.getElementById('inputElement');
inputElement.onchange = event => { testFile = inputElement.files[0]; };

let testItem;
function dragstart(event)
{
    testItem = event.dataTransfer.items.add(testFile);
    shouldBeEqualToString('testItem.kind', 'file');
    shouldBeEqualToString('testItem.type', 'text/plain');
}

function dragenter(event)
{
    event.preventDefault();
}

function dragover(event)
{
    event.preventDefault();
}

var testItems;
function drop(event)
{
    testItems = event.dataTransfer.items;
    shouldBe('testItems.length', '1');
    shouldBeNull('testItems.add(testFile)'); // Read-only.
    shouldBe('testItems.length', '1');
    shouldBeEqualToString('testItems[0].kind', 'file');
    shouldBeEqualToString('testItems[0].type', 'text/plain');
    finishJSTest();
}

function runTest()
{
  if (!window.testRunner)
    return;

  // First, we need to generate a File object to use for our tests.
  eventSender.beginDragWithFiles(['test.txt']);
  eventSender.mouseMoveTo(inputElement.offsetLeft + inputElement.offsetWidth / 2,
                          inputElement.offsetTop + inputElement.offsetHeight / 2);
  eventSender.mouseUp();

  // Now run the actual test.
  const dragElement = document.getElementById('drag');
  eventSender.mouseMoveTo(dragElement.offsetLeft + dragElement.offsetWidth / 2,
                          dragElement.offsetTop + dragElement.offsetHeight / 2);
  eventSender.mouseDown();
  eventSender.leapForward(100);
  const dropElement = document.getElementById('drop');
  eventSender.mouseMoveTo(dropElement.offsetLeft + dropElement.offsetWidth / 2,
                          dropElement.offsetTop + dropElement.offsetHeight / 2);
  eventSender.mouseUp();
}

description("Tests DataTransferItemList file handling");
window.jsTestIsAsync = true;

window.onload = runTest;
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/events/drag-dataTransferItemList-file-handling.html
