<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<input type="file" id="singleFile" name="upfile" onchange="singleFileSelected()" />
<input type="file" id="multipleFiles" name="upfile[]" multiple="multiple" onchange="multipleFilesSelected()" />
<div id="console"></div>
<script>
var changeDispatched;

description("This tests the condition that triggers a 'change' event on file input forms.");

if (window.testRunner) {
    var singleFileInput = document.getElementById("singleFile");
    var multipleFilesInput = document.getElementById("multipleFiles");

    debug("Test that the 'change' event is triggered on a single file form when a selected file is changed:");
    dragFilesOntoInput(singleFileInput, ["foo.txt"]);
    shouldBeEqualToString("singleFileInput.value", "C:\\fakepath\\foo.txt");
    shouldBe("changeDispatched", "true");

    dragFilesOntoInput(singleFileInput, ["bar.txt"]);
    shouldBeEqualToString("singleFileInput.value", "C:\\fakepath\\bar.txt");
    shouldBe("changeDispatched", "true");

    dragFilesOntoInput(singleFileInput, ["bar.txt"]);
    shouldBeEqualToString("singleFileInput.value", "C:\\fakepath\\bar.txt");
    shouldBe("changeDispatched", "false");

    dragFilesOntoInput(singleFileInput, ["foo.txt"]);
    shouldBeEqualToString("singleFileInput.value", "C:\\fakepath\\foo.txt");
    shouldBe("changeDispatched", "true");

    debug("Test that the 'change' event is triggered on a multiple file form when a selected file is changed:");
    dragFilesOntoInput(multipleFilesInput, ["foo.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBe("changeDispatched", "true");

    dragFilesOntoInput(multipleFilesInput, ["bar.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\bar.txt");
    shouldBe("changeDispatched", "true");

    dragFilesOntoInput(multipleFilesInput, ["bar.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\bar.txt");
    shouldBe("changeDispatched", "false");

    dragFilesOntoInput(multipleFilesInput, ["foo.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBe("changeDispatched", "true");

    debug("Test that the 'change' event is triggered on a multiple file form when selected files are changed:");
    dragFilesOntoInput(multipleFilesInput, ["foo.txt", "bar.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBe("changeDispatched", "true");

    dragFilesOntoInput(multipleFilesInput, ["foo.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBe("changeDispatched", "true");

    dragFilesOntoInput(multipleFilesInput, ["foo.txt", "bar.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBe("changeDispatched", "true");

    dragFilesOntoInput(multipleFilesInput, ["foo.txt", "bar.txt", "baz.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBe("changeDispatched", "true");

    dragFilesOntoInput(multipleFilesInput, ["foo.txt", "bar.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBe("changeDispatched", "true");

    dragFilesOntoInput(multipleFilesInput, ["bar.txt", "foo.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\bar.txt");
    shouldBe("changeDispatched", "true");

    dragFilesOntoInput(multipleFilesInput, ["bar.txt", "foo.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\bar.txt");
    shouldBe("changeDispatched", "false");
}

function singleFileSelected() {
    changeDispatched = true;
}

function multipleFilesSelected() {
    changeDispatched = true;
}

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) {
    changeDispatched = false;
    eventSender.beginDragWithFiles(files);
    moveMouseToCenterOfElement(input);
    eventSender.mouseUp();
}
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>