blob: 5e36fcf4cb0d4ddd4c2eacadce51d162313b2308 [file] [log] [blame]
<!DOCTYPE html>
<p><b>BUG ID: 76367</b> <a href="">Bugzilla bug </a> Add DataTransferItems support for drag-and-drop'ed files and texts</p>
<p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b> <br>
1. Open the <a href="resources">$(WebKitRoot)/ManualTests/resources</a> folder in your native file browser.<br>
2. Drag and drop a file into the 'Drop files here' area below.<br>
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).
<div id="destination" style="min-height:100px; margin: 5px; border: solid 1px black">Drop files here </div>
<p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
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.)
<p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
Nothing happens or a different file from the dropped one (likely a text file with the page title) is dragged out.
<p id="console"></p>
function log(text)
var console = document.getElementById('console');
function test(expect, actual)
log((expect == actual ? 'PASS' : 'FAIL') + ': "' + expect + '" == "' + actual + '"');
var destination = document.getElementById('destination');
destination.addEventListener('dragover', handleDragOver, false);
destination.addEventListener('drop', handleDrop, false);
function handleDragOver(e)
function handleDrop(e)
log('Verifying contents of DataTransferItems...');
var items = e.dataTransfer.items;
var files = [];
test(1, items.length);
for (var i = 0; i < items.length; ++i) {
test('file', items[i].kind);
var file = items[i].getAsFile();
log('Dragged files: ' +;
log('Dragged file size: ' + file.size);
// Setting up dragout items.
log('Setting up dragging out with the dropped items...');
var source = document.getElementById('dragout');
source.addEventListener('dragstart', function(e) {
for (var i = 0; i < files.length; ++i) {
log('Dragging out ' + files[i].name);
}, false);
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.');