<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="resources/file-drag-common.js"></script>
</head>
<body onload="test()">
<form id="form" method="post" enctype="multipart/form-data">
<input id="text-input" type="text" name="posted-text">
<input id="file-input" type="file" name="posted-file">
<input id="multiple-file-input" type="file" multiple="multiple" name="posted-files">
</form>
<div id="manual-instructions">
To run this test manually:
<ul>
<li>Enter something to the text field and choose files with the files choosers.
<li>Click <u><a onclick="navigateAway()">here</a></u> to navigate away from the page.
<li>Click <u><a onclick="navigateBack()">here</a></u> to navigate back to the page.
<li>Check that the state of the form was restored.
</ul>
</div>
<div id="console"></div>
<script>
var jsTestIsAsync = true;
description("Test that the state of a file chooser is recovered when navigating away and navigating back.");
// Structure of the test:
// Start of the test (document.location.search == "")
// - Fill out a form.
// - Navigate to a different location.
// On the different page (document.location.search == "?differentpage")
// - Navigate back.
// Back on the original page (document.location.search == "" && window.name == "wentback")
// - Check the form data.
function test() {
if (!window.testRunner)
return;
if (document.location.search == "" && window.name == "") {
// Start of the test. Set the values to the input elements.
document.getElementById("text-input").value = "text to be posted";
dragFilesOntoInput(document.getElementById("file-input"), ["../resources/test.txt"]);
dragFilesOntoInput(document.getElementById("multiple-file-input"),
["../resources/test.txt", "../resources/test2.txt"]);
navigateAway();
} else if (document.location.search == "?differentpage") {
// We have navigated to a different page. Now navigate back.
navigateBack();
} else if (document.location.search == "" && window.name == "wentback") {
// We have navigated back. Now check the form values.
shouldBeEqualToString("document.getElementById('text-input').value", "text to be posted");
// The real file paths cannot be read from the file chooser element, but
// we can verify that the path was restored properly by reading the
// file.
expectFileContents(document.getElementById("file-input").files[0], "Hello");
expectFileContents(document.getElementById("multiple-file-input").files[0], "Hello");
expectFileContents(document.getElementById("multiple-file-input").files[1], "Another");
}
}
function navigateAway() {
// Navigate away; do it with a timeout so that it will create a history entry.
setTimeout(function() {document.location = document.location + "?differentpage";}, 0);
}
function navigateBack() {
window.name = "wentback";
history.back();
}
var filesRead = 0;
function checkFileContents(expected, evt) {
document.readFileContents = evt.target.result;
shouldBeEqualToString("document.readFileContents", expected);
++filesRead;
if (filesRead == 3) {
finishJSTest();
}
}
function expectFileContents(file, contents) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = checkFileContents.bind(undefined, contents);
}
</script>
</body>
</html>