| Torne (Richard Coles) | 5c87bf8 | 2012-11-14 11:46:17 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <body> |
| 4 | <p><b>BUG ID: 76367</b> <a href="http://bugs.webkit.org/show_bug.cgi?id=76367">Bugzilla bug </a> Add DataTransferItems support for drag-and-drop'ed files and texts</p> |
| 5 | |
| 6 | <p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b> <br> |
| 7 | 1. Open the <a href="resources">$(WebKitRoot)/ManualTests/resources</a> folder in your native file browser.<br> |
| 8 | 2. Drag and drop a file into the 'Drop files here' area below.<br> |
| 9 | 3. Drag out <a href="#" id="dragout" draggable="true">this link</a> out of the browser window into a different folder in the native file browser). |
| 10 | </p> |
| 11 | |
| 12 | <div id="destination" style="min-height:100px; margin: 5px; border: solid 1px black">Drop files here </div> |
| 13 | |
| 14 | <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
| 15 | The same file you dropped in the step 2 should be dragged out to the folder in the step 3. The file should have the same content and the same file name as the dropped file. (NOTE: this does not work for multiple files yet.) |
| 16 | </p> |
| 17 | |
| 18 | <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
| 19 | Nothing happens or a different file from the dropped one (likely a text file with the page title) is dragged out. |
| 20 | </p> |
| 21 | <p id="console"></p> |
| 22 | |
| 23 | <script> |
| 24 | function log(text) |
| 25 | { |
| 26 | var console = document.getElementById('console'); |
| 27 | console.appendChild(document.createTextNode(text)); |
| 28 | console.appendChild(document.createElement('br')); |
| 29 | } |
| 30 | |
| 31 | function test(expect, actual) |
| 32 | { |
| 33 | log((expect == actual ? 'PASS' : 'FAIL') + ': "' + expect + '" == "' + actual + '"'); |
| 34 | } |
| 35 | |
| 36 | var destination = document.getElementById('destination'); |
| 37 | destination.addEventListener('dragover', handleDragOver, false); |
| 38 | destination.addEventListener('drop', handleDrop, false); |
| 39 | |
| 40 | function handleDragOver(e) |
| 41 | { |
| 42 | e.stopPropagation(); |
| 43 | e.preventDefault(); |
| 44 | } |
| 45 | |
| 46 | function handleDrop(e) |
| 47 | { |
| 48 | e.stopPropagation(); |
| 49 | e.preventDefault(); |
| 50 | |
| 51 | log('Verifying contents of DataTransferItems...'); |
| 52 | var items = e.dataTransfer.items; |
| 53 | var files = []; |
| 54 | test(1, items.length); |
| 55 | |
| 56 | for (var i = 0; i < items.length; ++i) { |
| 57 | test('file', items[i].kind); |
| 58 | var file = items[i].getAsFile(); |
| 59 | log('Dragged files: ' + file.name); |
| 60 | log('Dragged file size: ' + file.size); |
| 61 | files.push(file); |
| 62 | } |
| 63 | |
| 64 | // Setting up dragout items. |
| 65 | log('Setting up dragging out with the dropped items...'); |
| 66 | var source = document.getElementById('dragout'); |
| 67 | source.addEventListener('dragstart', function(e) { |
| 68 | for (var i = 0; i < files.length; ++i) { |
| 69 | log('Dragging out ' + files[i].name); |
| 70 | e.dataTransfer.items.add(files[i]); |
| 71 | } |
| 72 | }, false); |
| 73 | |
| 74 | log('Please dragout the link (noted in the step 3) and see if the same file you dropped in in the step 2 is properly drag out.'); |
| 75 | } |
| 76 | |
| 77 | </script> |
| 78 | </body> |
| 79 | </html> |