<!DOCTYPE html> <!-- Tests the string displayed when a File created using the File constructor is used in the FileList of a <input type="file"> element. To run this test manually, drag the black box over the input field. Expectation: the file name displayed by the <input> UI should be hello.txt. The renderer should not crash after the name shows up. --> <style> html { font: 10px Ahem; -webkit-font-smoothing: none; } #dragSource { border: 1px solid black; width: 100px; height: 100px; color: black; margin-bottom: 50px; } #inputElement { width: 100px; height: 100px; } </style> <div id="dragSource" draggable="true" title="Drag this box onto the file input below"> </div> <form action="#"> <p> <input id="fileInput" type="file" /> </p> </form> <script> if (window.testRunner) testRunner.waitUntilDone(); // FIXME: dragging will become unnecessary if/when we implement a FileList constructor var dragSource = document.getElementById('dragSource'); var inputElement = document.getElementById('fileInput'); var outputFileList = null; dragSource.addEventListener('dragstart', function (event) { var testFile = new File(['Hello world!'], 'hello.txt'); console.log(event.dataTransfer); event.dataTransfer.effectAllowed = 'copy'; event.dataTransfer.items.add(testFile); outputFileList = event.dataTransfer.files; }); inputElement.addEventListener('dragenter', function (event) { event.preventDefault(); }); inputElement.addEventListener('dragover', function (event) { event.preventDefault(); }); inputElement.addEventListener('drop', function (event) { event.target.files = outputFileList; if (window.testRunner) testRunner.notifyDone(); }); function dragSourceToInput() { var startX = dragSource.offsetLeft + dragSource.offsetWidth / 2; var startY = dragSource.offsetTop + dragSource.offsetHeight / 2; var targetX = inputElement.offsetLeft + inputElement.offsetWidth / 2; var targetY = inputElement.offsetTop + inputElement.offsetHeight / 2; if (window.eventSender) { eventSender.dragMode = true; eventSender.mouseMoveTo(startX, startY); eventSender.mouseDown(); eventSender.leapForward(250); eventSender.mouseMoveTo(targetX, targetY); eventSender.mouseUp(); } } dragSourceToInput(); </script>