<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description("Tests for multi-file promise drag onto file input elements");
jsTestIsAsync = true;

var fileInput = document.createElement("input");
fileInput.type = 'file';
fileInput.style.width = "100%"; // So that any manual testing will show full file names
// Important that we put this at the top of the doc so that logging does not cause it to go out of view (where it can't be dragged to)
document.body.insertBefore(fileInput, document.body.firstChild);

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

function dragFilesOntoInput(files)
{
    fileInput.value = ""; // Clear the <input>

    eventSender.beginDragWithFilePromises(files);
    moveMouseToCenterOfElement(fileInput);
    eventSender.mouseUp();
}

function fileListShouldBe(fileListString, filesArray)
{
    shouldBe(fileListString + ".length", "" + filesArray.length);
    for (var x = 0; x < filesArray.length; x++) {
        var fileValueString = fileListString + "[" + x + "]";
        shouldBeEqualToString(fileValueString + ".name", filesArray[x]['name']);
        shouldBeEqualToString(fileValueString + ".type", filesArray[x]['type']);
        shouldBe(fileValueString + ".size", "" + filesArray[x]['size']);
    }
}

function filesShouldBe(filesArray)
{
    fileListShouldBe("fileInput.files", filesArray);
}

async function draggingPathsShouldResultInFiles(pathsArray, filesArray)
{
    const dropPromise = new Promise(resolve => fileInput.ondrop = () => window.setTimeout(resolve, 0));
    const dragleavePromise = new Promise(resolve => fileInput.ondragleave = () => window.setTimeout(resolve, 0));
    dragFilesOntoInput(pathsArray);
    await Promise.race([dropPromise, dragleavePromise]);
    shouldBeEqualToString("fileInput.value", filesArray[0] ? "C:\\fakepath\\" + filesArray[0]['name'] : '');
    filesShouldBe(filesArray);
}

async function testDraggingFiles(filesArray)
{
    // We could make a way to parse the filename from the path, and then only need to pass
    // the path in the filesArray.
    var pathsOnly = filesArray.map(function(fileSpec) { return fileSpec['path']; });
    await draggingPathsShouldResultInFiles(pathsOnly, filesArray);
}

async function runTest()
{
    debug("Dragging a real file to a file input control:");
    await testDraggingFiles([
        { 'path': 'resources/apple.gif', 'name' : 'apple.gif', 'size' : 1476, 'type' : 'image/gif' }
    ]);

    debug("Dragging two files to a single-file input control:")
    await draggingPathsShouldResultInFiles(['resources/apple.gif', 'resources/mozilla.gif'], []);

    fileInput.multiple = true;

    debug("Dragging three files to a multi-file input control:");
    await testDraggingFiles([
        { 'path': 'resources/apple.gif', 'name' : 'apple.gif', 'size' : 1476, 'type' : 'image/gif' },
        { 'path': 'resources/mozilla.gif', 'name' : 'mozilla.gif', 'size' : 2593, 'type' : 'image/gif' },
    ]);

    // Clean up after ourselves
    fileInput.parentNode.removeChild(fileInput);

    finishJSTest();
}

var successfullyParsed = true;

if (window.eventSender) {
    runTest();
} else {
    testFailed("This test is not interactive, please run using run-webkit-tests");
}

</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>