<!DOCTYPE html>
<script src="/js-test-resources/ahem.js"></script>

<!--
Tests the string displayed when a File created using the FileSystem API is used
in the FileList of a <input type="file"> element. To run this test manually,
drag the black box over the input field.

Expectation: the file name displayed by the <input> UI should be hello.txt. The
renderer should not crash after the name shows up.
-->

<style>
html {
  font: 10px Ahem;
  -webkit-font-smoothing: none;
}
#dragSource {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  color: black;
  margin-bottom: 50px;
}
#inputElement {
  width: 100px;
  height: 100px;
}
</style>

<div id="dragSource" draggable="true"
     title="Drag this box onto the file input below">
</div>

<form action="#">
    <p>
        <input id="fileInput" type="file" />
    </p>
</form>

<script>
if (window.testRunner)
    testRunner.waitUntilDone();

// FIXME: dragging will become unnecessary if/when we implement a FileList constructor
var dragSource = document.getElementById('dragSource');
var inputElement = document.getElementById('fileInput');

inputElement.disabled = true;
var testFile = null;
webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
    fs.root.getFile('hello.txt', {create: true, exclusive: false}, function (entry) {
        entry.createWriter(function (writer) {
            writer.onwriteend = function (event) {
                entry.file(function (file) {
                    testFile = file;
                    inputElement.disabled = false;
                    dragSourceToInput();
                });
            };
            writer.write(new Blob(['Hello world!']));
        });
    });
});

var outputFileList = null;
dragSource.addEventListener('dragstart', function (event) {
    event.dataTransfer.items.add(testFile);
    outputFileList = event.dataTransfer.files;
});

inputElement.addEventListener('dragenter', function (event) {
    event.preventDefault();
});
inputElement.addEventListener('dragover', function (event) {
    event.preventDefault();
});
inputElement.addEventListener('drop', function (event) {
    event.target.files = outputFileList;
    if (window.testRunner)
       testRunner.notifyDone();
});

function dragSourceToInput() {
    var startX = dragSource.offsetLeft + dragSource.offsetWidth / 2;
    var startY = dragSource.offsetTop + dragSource.offsetHeight / 2;
    var targetX = inputElement.offsetLeft + inputElement.offsetWidth / 2;
    var targetY = inputElement.offsetTop + inputElement.offsetHeight / 2;

    if (window.eventSender) {
        eventSender.dragMode = true;
        eventSender.mouseMoveTo(startX, startY);
        eventSender.mouseDown();
        eventSender.leapForward(250);
        eventSender.mouseMoveTo(targetX, targetY);
        eventSender.mouseUp();
    }
}
</script>