| <!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> |
