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> 80
