| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #drag { |
| border: 1px solid black; |
| height: 200px; |
| width: 200px; |
| } |
| #drop { |
| border: 1px solid black; |
| height: 200px; |
| width: 200px; |
| } |
| </style> |
| <script> |
| function assertEq(left, right) |
| { |
| if (left === right) |
| log('PASS: ' + left + " === " + right); |
| else |
| log('FAIL: ' + left + " (of type " + (typeof left) + ") !== " + right + " (of type " + (typeof right) + ")"); |
| } |
| function log(str) |
| { |
| var result = document.getElementById('result'); |
| result.appendChild(document.createTextNode(str)); |
| result.appendChild(document.createElement('br')); |
| } |
| |
| var testFile; |
| function dragstart(event) |
| { |
| event.dataTransfer.items.add(testFile); |
| } |
| |
| function dragenter(event) |
| { |
| event.preventDefault(); |
| } |
| |
| function dragover(event) |
| { |
| event.preventDefault(); |
| } |
| |
| function drop(event) |
| { |
| assertEq(1, event.dataTransfer.items.length); |
| assertEq('file', event.dataTransfer.items[0].kind); |
| assertEq('text/plain', event.dataTransfer.items[0].type); |
| testRunner.notifyDone(); |
| } |
| |
| function runTest() |
| { |
| // First, we need to generate a File object to use for our tests. |
| eventSender.beginDragWithFiles(['test.txt']); |
| var inputElement = document.getElementsByTagName('input')[0]; |
| eventSender.mouseMoveTo(inputElement.offsetLeft + inputElement.offsetWidth / 2, |
| inputElement.offsetTop + inputElement.offsetHeight / 2); |
| eventSender.mouseUp(); |
| testFile = inputElement.files[0]; |
| |
| // Now run the actual test. |
| var dragElement = document.getElementById('drag'); |
| eventSender.mouseMoveTo(dragElement.offsetLeft + dragElement.offsetWidth / 2, |
| dragElement.offsetTop + dragElement.offsetHeight / 2); |
| eventSender.mouseDown(); |
| eventSender.leapForward(100); |
| var dropElement = document.getElementById('drop'); |
| eventSender.mouseMoveTo(dropElement.offsetLeft + dropElement.offsetWidth / 2, |
| dropElement.offsetTop + dropElement.offsetHeight / 2); |
| eventSender.mouseUp(); |
| } |
| |
| window.onload = function() |
| { |
| if (!window.testRunner) |
| return; |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| |
| runTest(); |
| } |
| </script> |
| </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. Several lines that say 'PASS' should appear below. |
| <input 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="result"></div> |
| </body> |
| </html> |
