File input should fire an 'input' event before the 'change' event
authorcarlosgc@webkit.org <carlosgc@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 22 Nov 2019 13:09:29 +0000 (13:09 +0000)
committercarlosgc@webkit.org <carlosgc@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 22 Nov 2019 13:09:29 +0000 (13:09 +0000)
https://bugs.webkit.org/show_bug.cgi?id=204292

Reviewed by Wenson Hsieh.

Source/WebCore:

"Queue a task to first update the element's selected files so that it represents the user's selection, then fire
an event named input at the input element, with the bubbles attribute initialized to true, and finally fire an
event named change at the input element, with the bubbles attribute initialized to true."
https://html.spec.whatwg.org/#file-upload-state-(type=file):event-input

This will also fix WebDriver test imported/w3c/webdriver/tests/element_send_keys/events.py::test_file_upload in
safari driver.

Test: fast/forms/file/file-input-user-selection-events.html

* html/FileInputType.cpp:
(WebCore::FileInputType::setFiles):

LayoutTests:

Add new test to check both events are fired now.

* fast/forms/file/file-input-user-selection-events-expected.txt: Added.
* fast/forms/file/file-input-user-selection-events.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@252768 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/forms/file/file-input-user-selection-events-expected.txt [new file with mode: 0644]
LayoutTests/fast/forms/file/file-input-user-selection-events.html [new file with mode: 0644]
LayoutTests/platform/win/TestExpectations
LayoutTests/platform/wincairo/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/html/FileInputType.cpp

index 5ce3efc..156794a 100644 (file)
@@ -1,3 +1,15 @@
+2019-11-22  Carlos Garcia Campos  <cgarcia@igalia.com>
+
+        File input should fire an 'input' event before the 'change' event
+        https://bugs.webkit.org/show_bug.cgi?id=204292
+
+        Reviewed by Wenson Hsieh.
+
+        Add new test to check both events are fired now.
+
+        * fast/forms/file/file-input-user-selection-events-expected.txt: Added.
+        * fast/forms/file/file-input-user-selection-events.html: Added.
+
 2019-11-21  Jer Noble  <jer.noble@apple.com>
 
         Experimental support for HDR media query
diff --git a/LayoutTests/fast/forms/file/file-input-user-selection-events-expected.txt b/LayoutTests/fast/forms/file/file-input-user-selection-events-expected.txt
new file mode 100644 (file)
index 0000000..00668e9
--- /dev/null
@@ -0,0 +1,16 @@
+OPEN FILE PANEL
+This tests the events dispatched on user selection
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+on input
+PASS inputDispatched is false
+PASS changeDispatched is false
+on change
+PASS inputDispatched is true
+PASS changeDispatched is false
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/forms/file/file-input-user-selection-events.html b/LayoutTests/fast/forms/file/file-input-user-selection-events.html
new file mode 100644 (file)
index 0000000..25e09ff
--- /dev/null
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../resources/ui-helper.js"></script>
+</head>
+<body>
+<input type="file" name="file" id="file">
+
+<script>
+description("This tests the events dispatched on user selection");
+
+if (window.testRunner) {
+    jsTestIsAsync = true;
+    var inputDispatched = false;
+    var changeDispatched = false;
+    var file = document.getElementById("file");
+    file.addEventListener("input", function() {
+        debug("on input");
+        shouldBe("inputDispatched", "false");
+        shouldBe("changeDispatched", "false");
+        inputDispatched = true;
+    });
+    file.addEventListener("change", function() {
+        debug("on change");
+        shouldBe("inputDispatched", "true");
+        shouldBe("changeDispatched", "false");
+        changeDispatched = true;
+
+        finishJSTest();
+    });
+
+    openFilesInElement(file, ["foo.txt"]);
+}
+
+function openFilesInElement(input, files) {
+    testRunner.setOpenPanelFiles(files);
+    var centerX = input.offsetLeft + input.offsetWidth / 2;
+    var centerY = input.offsetTop + input.offsetHeight / 2;
+    UIHelper.activateAt(centerX, centerY);
+}
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
+</html>
index e34f9d0..25ad3c5 100644 (file)
@@ -3671,6 +3671,7 @@ editing/selection/character-granularity-select-text-with-click-handler.html [ Sk
 editing/selection/character-granularity-selected-range-after-dismissing-selection.html [ Skip ]
 fast/dom/FileList-iterator-using-open-panel.html [ Skip ]
 fast/forms/file/file-input-reset-using-open-panel.html [ Skip ]
+fast/forms/file/file-input-user-selection-events.html [ Skip ]
 fast/forms/file/file-reset-in-change-using-open-panel.html [ Skip ]
 fast/forms/file/file-reset-in-change-using-open-panel-with-icon.html [ Skip ]
 fast/forms/file/get-file-upload-using-open-panel.html [ Skip ]
index 9c133c5..77d3eec 100644 (file)
@@ -761,6 +761,7 @@ fast/files/file-reader-abort-using-open-panel.html [ Skip ]
 fast/files/file-reader-directory-crash-using-open-panel.html [ Timeout ]
 fast/files/filereader-zip-bundle-using-open-panel.html [ Timeout ]
 fast/forms/file/file-input-reset-using-open-panel.html [ Timeout ]
+fast/forms/file/file-input-user-selection-events.html [ Timeout ]
 fast/forms/file/entries-api/webkitdirectory-open-panel.html [ Timeout ]
 fast/forms/file/file-reset-in-change-using-open-panel.html [ Timeout ]
 fast/forms/file/file-reset-in-change-using-open-panel-with-icon.html [ Timeout ]
index a2b3f49..760ccfe 100644 (file)
@@ -1,3 +1,23 @@
+2019-11-22  Carlos Garcia Campos  <cgarcia@igalia.com>
+
+        File input should fire an 'input' event before the 'change' event
+        https://bugs.webkit.org/show_bug.cgi?id=204292
+
+        Reviewed by Wenson Hsieh.
+
+        "Queue a task to first update the element's selected files so that it represents the user's selection, then fire
+        an event named input at the input element, with the bubbles attribute initialized to true, and finally fire an
+        event named change at the input element, with the bubbles attribute initialized to true."
+        https://html.spec.whatwg.org/#file-upload-state-(type=file):event-input
+
+        This will also fix WebDriver test imported/w3c/webdriver/tests/element_send_keys/events.py::test_file_upload in
+        safari driver.
+
+        Test: fast/forms/file/file-input-user-selection-events.html
+
+        * html/FileInputType.cpp:
+        (WebCore::FileInputType::setFiles):
+
 2019-11-21  Jer Noble  <jer.noble@apple.com>
 
         Experimental support for HDR media query
index f00a3ec..4e41fd3 100644 (file)
@@ -399,6 +399,7 @@ void FileInputType::setFiles(RefPtr<FileList>&& files, RequestIcon shouldRequest
     if (pathsChanged) {
         // This call may cause destruction of this instance.
         // input instance is safe since it is ref-counted.
+        protectedInputElement->dispatchInputEvent();
         protectedInputElement->dispatchChangeEvent();
     }
     protectedInputElement->setChangedSinceLastFormControlChangeEvent(false);