<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/ui-helper.js"></script>
</head>
<body>
<form id="form">
<input id="file" type="file" />
<input id="reset" type="reset" />
</form>
<div id="console"></div>
<p>
This tests whether the label next to the file chooser button becomes "No file chosen"
when we press the reset button.
To run this test manually, choose a file and then click the reset button.
If the label next to the file chooser button changes to "No file chosen", the test passes.
</p>
<script>
if (testRunner && eventSender) {
    testRunner.waitUntilDone();
    var file = document.getElementById("file");
    var reset = document.getElementById("reset");

    file.addEventListener("change", function() {
        document.getElementById("console").innerHTML = file.value + " is selected.";
        // The change event can be fired before the mouse up, so use a timeout here to ensure the next mouse down happens after the pending mouse up.
        window.setTimeout(function() {
            UIHelper.activateAt(reset.offsetLeft + reset.offsetWidth / 2, reset.offsetTop + reset.offsetHeight / 2).then(function() {
                // Move a cursor out of the reset button.
                UIHelper.activateAt(reset.offsetLeft + reset.offsetWidth + 10, reset.offsetTop + reset.offsetHeight + 10).then(function() {
                    testRunner.notifyDone();
                });
            });
        }, 0);
    });

    openFilesInElement(file, ["foo.txt"]);
}

function openFilesInElement(element, files) {
    testRunner.setOpenPanelFiles(files);
    var centerX = element.offsetLeft + element.offsetWidth / 2;
    var centerY = element.offsetTop + element.offsetHeight / 2;
    UIHelper.activateAt(centerX, centerY);
}
</script>
</body>
</html>