src/third_party/WebKit/LayoutTests/fast/forms/file/recover-file-input-in-unposted-form.html

   1 <html>
   2 <head>
   3 <script src="../../../resources/js-test.js"></script>
   4 <script src="resources/file-drag-common.js"></script>
   5 </head>
   6 <body onload="test()">
   7 <form id="form" method="post" enctype="multipart/form-data">
   8 <input id="text-input" type="text" name="posted-text">
   9 <input id="file-input" type="file" name="posted-file">
  10 <input id="multiple-file-input" type="file" multiple="multiple" name="posted-files">
  11 </form>
  12 <div id="manual-instructions">
  13 To run this test manually:
  14 <ul>
  15 <li>Enter something to the text field and choose files with the files choosers.
  16 <li>Click <u><a onclick="navigateAway()">here</a></u> to navigate away from the page.
  17 <li>Click <u><a onclick="navigateBack()">here</a></u> to navigate back to the page.
  18 <li>Check that the state of the form was restored.
  19 </ul>
  20 </div>
  21 <div id="console"></div>
  22 <script>
  23 var jsTestIsAsync = true;
  24
  25 description("Test that the state of a file chooser is recovered when navigating away and navigating back.");
  26
  27 // Structure of the test:
  28 // Start of the test (document.location.search == "")
  29 // - Fill out a form.
  30 // - Navigate to a different location.
  31 // On the different page (document.location.search == "?differentpage")
  32 // - Navigate back.
  33 // Back on the original page (document.location.search == "" && window.name == "wentback")
  34 // - Check the form data.
  35
  36 function test() {
  37     if (!window.testRunner)
  38         return;
  39     if (document.location.search == "" && window.name == "") {
  40         // Start of the test. Set the values to the input elements.
  41         document.getElementById("text-input").value = "text to be posted";
  42         dragFilesOntoInput(document.getElementById("file-input"), ["../resources/test.txt"]);
  43         dragFilesOntoInput(document.getElementById("multiple-file-input"),
  44                            ["../resources/test.txt", "../resources/test2.txt"]);
  45         navigateAway();
  46     } else if (document.location.search == "?differentpage") {
  47         // We have navigated to a different page. Now navigate back.
  48         navigateBack();
  49     } else if (document.location.search == "" && window.name == "wentback") {
  50         // We have navigated back. Now check the form values.
  51         shouldBeEqualToString("document.getElementById('text-input').value", "text to be posted");
  52
  53         // The real file paths cannot be read from the file chooser element, but
  54         // we can verify that the path was restored properly by reading the
  55         // file.
  56         expectFileContents(document.getElementById("file-input").files[0], "Hello");
  57         expectFileContents(document.getElementById("multiple-file-input").files[0], "Hello");
  58         expectFileContents(document.getElementById("multiple-file-input").files[1], "Another");
  59     }
  60 }
  61
  62 function navigateAway() {
  63     // Navigate away; do it with a timeout so that it will create a history entry.
  64     setTimeout(function() {document.location = document.location + "?differentpage";}, 0);
  65 }
  66
  67 function navigateBack() {
  68     window.name = "wentback";
  69     history.back();
  70 }
  71
  72 var filesRead = 0;
  73
  74 function checkFileContents(expected, evt) {
  75     document.readFileContents = evt.target.result;
  76     shouldBeEqualToString("document.readFileContents", expected);
  77     ++filesRead;
  78     if (filesRead == 3) {
  79         finishJSTest();
  80     }
  81 }
  82
  83 function expectFileContents(file, contents) {
  84     var reader = new FileReader();
  85     reader.readAsText(file, "UTF-8");
  86     reader.onload = checkFileContents.bind(undefined, contents);
  87 }
  88 </script>
  89 </body>
  90 </html>