summaryrefslogtreecommitdiffstats
path: root/dom/html/test/forms/test_input_event.html
diff options
context:
space:
mode:
Diffstat (limited to 'dom/html/test/forms/test_input_event.html')
-rw-r--r--dom/html/test/forms/test_input_event.html234
1 files changed, 234 insertions, 0 deletions
diff --git a/dom/html/test/forms/test_input_event.html b/dom/html/test/forms/test_input_event.html
new file mode 100644
index 000000000..f458b1b48
--- /dev/null
+++ b/dom/html/test/forms/test_input_event.html
@@ -0,0 +1,234 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=851780
+-->
+<head>
+<title>Test for input event</title>
+<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=851780">Mozilla Bug 851780</a>
+<p id="display"></p>
+<div id="content">
+<input type="file" id="fileInput"></input>
+<textarea id="textarea" oninput="++textareaInput;"></textarea>
+<input type="text" id="input_text" oninput="++textInput[0];"></input>
+<input type="email" id="input_email" oninput="++textInput[1];"></input>
+<input type="search" id="input_search" oninput="++textInput[2];"></input>
+<input type="tel" id="input_tel" oninput="++textInput[3];"></input>
+<input type="url" id="input_url" oninput="++textInput[4];"></input>
+<input type="password" id="input_password" oninput="++textInput[5];"></input>
+
+<!-- "Non-text" inputs-->
+<input type="button" id="input_button" oninput="++NonTextInput[0];"></input>
+<input type="submit" id="input_submit" oninput="++NonTextInput[1];"></input>
+<input type="image" id="input_image" oninput="++NonTextInput[2];"></input>
+<input type="reset" id="input_reset" oninput="++NonTextInput[3];"></input>
+<input type="radio" id="input_radio" oninput="++NonTextInput[4];"></input>
+<input type="checkbox" id="input_checkbox" oninput="++NonTextInput[5];"></input>
+<input type="range" id="input_range" oninput="++rangeInput;"></input>
+<input type="number" id="input_number" oninput="++numberInput;"></input>
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+ /** Test for input event. This is highly based on test_change_event.html **/
+
+ const isDesktop = !/Mobile|Tablet/.test(navigator.userAgent);
+
+ var textareaInput = 0;
+
+ // Those are types were the input event apply.
+ var textTypes = ["text", "email", "search", "tel", "url", "password"];
+ var textInput = [0, 0, 0, 0, 0, 0];
+
+ // Those are events were the input event does not apply.
+ var NonTextTypes = ["button", "submit", "image", "reset", "radio", "checkbox"];
+ var NonTextInput = [0, 0, 0, 0, 0, 0];
+
+ var rangeInput = 0;
+ var numberInput = 0;
+
+ SimpleTest.waitForExplicitFinish();
+ var MockFilePicker = SpecialPowers.MockFilePicker;
+ MockFilePicker.init(window);
+
+ function testUserInput() {
+ // Simulating an OK click and with a file name return.
+ MockFilePicker.useBlobFile();
+ MockFilePicker.returnValue = MockFilePicker.returnOK;
+ var input = document.getElementById('fileInput');
+ input.focus();
+
+ input.addEventListener("input", function (aEvent) {
+ ok(true, "input event should have been dispatched on file input.");
+ }, false);
+
+ input.click();
+ setTimeout(testUserInput2, 0);
+ }
+
+ function testUserInput2() {
+ // Some generic checks for types that support the input event.
+ for (var i = 0; i < textTypes.length; ++i) {
+ input = document.getElementById("input_" + textTypes[i]);
+ input.focus();
+ synthesizeKey("VK_RETURN", {});
+ is(textInput[i], 0, "input event shouldn't be dispatched on " + textTypes[i] + " input element");
+
+ synthesizeKey("m", {});
+ is(textInput[i], 1, textTypes[i] + " input element should have dispatched input event.");
+ synthesizeKey("VK_RETURN", {});
+ is(textInput[i], 1, "input event shouldn't be dispatched on " + textTypes[i] + " input element");
+
+ synthesizeKey("VK_BACK_SPACE", {});
+ is(textInput[i], 2, textTypes[i] + " input element should have dispatched input event.");
+ }
+
+ // Some scenarios of value changing from script and from user input.
+ input = document.getElementById("input_text");
+ input.focus();
+ synthesizeKey("f", {});
+ is(textInput[0], 3, "input event should have been dispatched");
+ input.blur();
+ is(textInput[0], 3, "input event should not have been dispatched");
+
+ input.focus();
+ input.value = 'foo';
+ is(textInput[0], 3, "input event should not have been dispatched");
+ input.blur();
+ is(textInput[0], 3, "input event should not have been dispatched");
+
+ input.focus();
+ synthesizeKey("f", {});
+ is(textInput[0], 4, "input event should have been dispatched");
+ input.value = 'bar';
+ is(textInput[0], 4, "input event should not have been dispatched");
+ input.blur();
+ is(textInput[0], 4, "input event should not have been dispatched");
+
+ // Same for textarea.
+ var textarea = document.getElementById("textarea");
+ textarea.focus();
+ synthesizeKey("f", {});
+ is(textareaInput, 1, "input event should have been dispatched");
+ textarea.blur();
+ is(textareaInput, 1, "input event should not have been dispatched");
+
+ textarea.focus();
+ textarea.value = 'foo';
+ is(textareaInput, 1, "input event should not have been dispatched");
+ textarea.blur();
+ is(textareaInput, 1, "input event should not have been dispatched");
+
+ textarea.focus();
+ synthesizeKey("f", {});
+ is(textareaInput, 2, "input event should have been dispatched");
+ textarea.value = 'bar';
+ is(textareaInput, 2, "input event should not have been dispatched");
+ synthesizeKey("VK_BACK_SPACE", {});
+ is(textareaInput, 3, "input event should have been dispatched");
+ textarea.blur();
+ is(textareaInput, 3, "input event should not have been dispatched");
+
+ // Non-text input tests:
+ for (var i = 0; i < NonTextTypes.length; ++i) {
+ // Button, submit, image and reset input type tests.
+ if (i < 4) {
+ input = document.getElementById("input_" + NonTextTypes[i]);
+ input.focus();
+ input.click();
+ is(NonTextInput[i], 0, "input event doesn't apply");
+ input.blur();
+ is(NonTextInput[i], 0, "input event doesn't apply");
+ }
+ // For radio and checkboxes, input event should be dispatched.
+ else {
+ input = document.getElementById("input_" + NonTextTypes[i]);
+ input.focus();
+ input.click();
+ is(NonTextInput[i], 1, "input event should have been dispatched");
+ input.blur();
+ is(NonTextInput[i], 1, "input event should not have been dispatched");
+
+ // Test that input event is not dispatched if click event is cancelled.
+ function preventDefault(e) {
+ e.preventDefault();
+ }
+ input.addEventListener("click", preventDefault, false);
+ input.click();
+ is(NonTextInput[i], 1, "input event shouldn't be dispatched if click event is cancelled");
+ input.removeEventListener("click", preventDefault, false);
+ }
+ }
+
+ // Type changes.
+ var input = document.createElement('input');
+ input.type = 'text';
+ input.value = 'foo';
+ input.oninput = function() {
+ ok(false, "we shouldn't get an input event when the type changes");
+ };
+ input.type = 'range';
+ isnot(input.value, 'foo');
+
+ // Tests for type='range'.
+ var range = document.getElementById("input_range");
+
+ range.focus();
+ synthesizeKey("a", {});
+ range.blur();
+ is(rangeInput, 0, "input event shouldn't be dispatched on range input " +
+ "element for key changes that don't change its value");
+
+ range.focus();
+ synthesizeKey("VK_HOME", {});
+ is(rangeInput, 1, "input event should be dispatched for key changes");
+ range.blur();
+ is(rangeInput, 1, "input event shouldn't be dispatched on blur");
+
+ range.focus();
+ var bcr = range.getBoundingClientRect();
+ var centerOfRangeX = bcr.width / 2;
+ var centerOfRangeY = bcr.height / 2;
+ synthesizeMouse(range, centerOfRangeX - 10, centerOfRangeY, { type: "mousedown" });
+ is(rangeInput, 2, "Input event should be dispatched on mousedown if the value changes");
+ synthesizeMouse(range, centerOfRangeX - 5, centerOfRangeY, { type: "mousemove" });
+ is(rangeInput, 3, "Input event should be dispatched during a drag");
+ synthesizeMouse(range, centerOfRangeX, centerOfRangeY, { type: "mouseup" });
+ is(rangeInput, 4, "Input event should be dispatched at the end of a drag");
+
+ // Tests for type='number'.
+ // We only test key events here since input events for mouse event changes
+ // are tested in test_input_number_mouse_events.html
+ var number = document.getElementById("input_number");
+
+ if (isDesktop) { // up/down arrow keys not supported on android/b2g
+ number.value = "";
+ number.focus();
+ synthesizeKey("KEY_ArrowUp", { code: "ArrowUp" });
+ is(numberInput, 1, "input event should be dispatched for up/down arrow key keypress");
+ is(number.value, "1", "sanity check value of number control after keypress");
+
+ synthesizeKey("KEY_ArrowDown", { code: "ArrowDown", repeat: 3 });
+ is(numberInput, 4, "input event should be dispatched for each up/down arrow key keypress event, even when rapidly repeated");
+ is(number.value, "-2", "sanity check value of number control after multiple keydown events");
+
+ number.blur();
+ is(numberInput, 4, "input event shouldn't be dispatched on blur");
+ }
+
+ MockFilePicker.cleanup();
+ SimpleTest.finish();
+ }
+
+ addLoadEvent(testUserInput);
+
+</script>
+</pre>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-07 22:38:10 +0000