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