summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/forms/file/recover-file-input-in-unposted-form.html
blob: 5a4250d7e2147b7ac8bac5187ff75359e9551ee5 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<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>