2012-01-20 12:08:56 +00:00
<!DOCTYPE html>
< html >
< body >
< 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 >
< 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 >
2012-01-20 14:29:04 +00:00
2. Drag and drop a file into the 'Drop files here' area below.< br >
2012-01-20 12:08:56 +00:00
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).
< / p >
< 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 >
2012-01-20 14:29:04 +00:00
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.)
2012-01-20 12:08:56 +00:00
< / p >
< 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 >
< p id = "console" > < / p >
< script >
function log(text)
{
var console = document.getElementById('console');
console.appendChild(document.createTextNode(text));
console.appendChild(document.createElement('br'));
}
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)
{
e.stopPropagation();
e.preventDefault();
}
function handleDrop(e)
{
e.stopPropagation();
e.preventDefault();
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: ' + file.name);
log('Dragged file size: ' + file.size);
files.push(file);
}
// 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);
e.dataTransfer.items.add(files[i]);
}
}, 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.');
}
< / script >
< / body >
< / html >
