<!DOCTYPE html>
<html>
<head>
<script src="../../../../resources/js-test.js"></script>
<script src="../../../../resources/ui-helper.js"></script>
</head>
<body>
<input type="file" onchange="changed(event)" webkitdirectory></input>
<script>
description("Tests dragging a folder onto a file input with webkitdirectory set.");
jsTestIsAsync = true;

function runTest()
{
    inputElement = document.getElementsByTagName('input')[0];
    shouldBeTrue("inputElement.webkitdirectory");
    dragFilesOntoInput(inputElement, ['resources/testFiles']);
}

function moveMouseToCenterOfElement(element) {
    var centerX = element.offsetLeft + element.offsetWidth / 2;
    var centerY = element.offsetTop + element.offsetHeight / 2;
    eventSender.mouseMoveTo(centerX, centerY);
}

function dragFilesOntoInput(input, files) {
    eventSender.beginDragWithFiles(files);
    moveMouseToCenterOfElement(input);
    eventSender.mouseUp();
}

function changed(event)
{
    fileList = Array.from(event.target.files).sort(function (a, b) {
        if (a.name > b.name)
            return 1;
        else if (a.name < b.name)
            return -1;
        return 0;
    });
    shouldBe("fileList.length", "5");
    shouldBeEqualToString("fileList[0].name", "file1.txt");
    shouldBeEqualToString("fileList[0].webkitRelativePath", "testFiles/file1.txt");
    shouldBeEqualToString("fileList[1].name", "file2.txt");
    shouldBeEqualToString("fileList[1].webkitRelativePath", "testFiles/file2.txt");
    shouldBeEqualToString("fileList[2].name", "file3.txt");
    shouldBeEqualToString("fileList[2].webkitRelativePath", "testFiles/subfolder1/file3.txt");
    shouldBeEqualToString("fileList[3].name", "file4.txt");
    shouldBeEqualToString("fileList[3].webkitRelativePath", "testFiles/subfolder2/file4.txt");
    shouldBeEqualToString("fileList[4].name", "file5.txt");
    shouldBeEqualToString("fileList[4].webkitRelativePath", "testFiles/subfolder2/subfolder2a/file5.txt");

    finishJSTest();
}

runTest();

</script>
</body>
</html>