summaryrefslogtreecommitdiffstats
path: root/dom/html/test/forms/test_input_datetime_input_change_events.html
diff options
context:
space:
mode:
Diffstat (limited to 'dom/html/test/forms/test_input_datetime_input_change_events.html')
-rw-r--r--dom/html/test/forms/test_input_datetime_input_change_events.html143
1 files changed, 143 insertions, 0 deletions
diff --git a/dom/html/test/forms/test_input_datetime_input_change_events.html b/dom/html/test/forms/test_input_datetime_input_change_events.html
new file mode 100644
index 0000000000..63c8012252
--- /dev/null
+++ b/dom/html/test/forms/test_input_datetime_input_change_events.html
@@ -0,0 +1,143 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1370858
+-->
+<head>
+<title>Test for Bugs 1370858 and 1804881</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script 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=1370858">Mozilla Bug 1370858</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1804881">Mozilla Bug 1804881</a>
+<p id="display"></p>
+<div id="content">
+<input type="time" id="input_time" onchange="++changeEvents[0]"
+ oninput="++inputEvents[0]">
+<input type="date" id="input_date" onchange="++changeEvents[1]"
+ oninput="++inputEvents[1]">
+<input type="datetime-local" id="input_datetime-local" onchange="++changeEvents[2]"
+ oninput="++inputEvents[2]">
+</div>
+<pre id="test">
+<script class="testbody">
+
+/**
+ * Test for Bug 1370858.
+ * Test that change and input events are (not) fired for date/time inputs.
+ **/
+
+const isDesktop = !/Mobile|Tablet/.test(navigator.userAgent);
+
+var inputTypes = ["time", "date", "datetime-local"];
+var changeEvents = [0, 0, 0];
+var inputEvents = [0, 0, 0];
+var values = ["10:30", "2017-06-08", "2017-06-08T10:30"];
+var expectedValues = [
+ ["09:30", "01:30", "01:25", "", "01:59", "13:59", ""],
+ ["2017-05-08", "2017-01-08", "2017-01-25", "", "2017-01-31", "2017-01-31", ""],
+ ["2017-05-08T10:30", "2017-01-08T10:30", "2017-01-25T10:30", "", "2017-01-31T10:30", "2017-01-31T10:30", ""]
+];
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.waitForFocus(function() {
+ test();
+ SimpleTest.finish();
+});
+
+function test() {
+ for (var i = 0; i < inputTypes.length; i++) {
+ var input = document.getElementById("input_" + inputTypes[i]);
+
+ is(changeEvents[i], 0, "Number of change events should be 0 at start.");
+ is(inputEvents[i], 0, "Number of input events should be 0 at start.");
+
+ // Test that change and input events are not dispatched setting .value by
+ // script.
+ input.value = values[i];
+ is(input.value, values[i], "Check that value was set correctly (0).");
+ is(changeEvents[i], 0, "Change event should not have dispatched (0).");
+ is(inputEvents[i], 0, "Input event should not have dispatched (0).");
+
+ // Test that change and input events are fired when changing the value using
+ // up/down keys.
+ input.focus();
+ synthesizeKey("KEY_ArrowDown");
+ is(input.value, expectedValues[i][0], "Check that value was set correctly (1).");
+ is(changeEvents[i], 1, "Change event should be dispatched (1).");
+ is(inputEvents[i], 1, "Input event should be dispatched (1).");
+
+ // Test that change and input events are fired when changing the value with
+ // the keyboard.
+ sendString("01");
+ // We get event per character.
+ is(input.value, expectedValues[i][1], "Check that value was set correctly (2).");
+ is(changeEvents[i], 3, "Change event should be dispatched (2).");
+ is(inputEvents[i], 3, "Input event should be dispatched (2).");
+
+ // Test that change and input events are fired when changing the value with
+ // both the numeric keyboard and digit keys.
+ synthesizeKey("2", { code: "Numpad2" });
+ synthesizeKey("5");
+ // We get event per character.
+ is(input.value, expectedValues[i][2], "Check that value was set correctly (3).");
+ is(changeEvents[i], 5, "Change event should be dispatched (3).");
+ is(inputEvents[i], 5, "Input event should be dispatched (3).");
+
+ // Test that change and input events are not fired when navigating with Tab.
+ // Return to the previously focused field (minutes, day, day).
+ synthesizeKey("KEY_Tab", { shiftKey: true });
+ is(input.value, expectedValues[i][2], "Check that value was not changed (4).");
+ is(changeEvents[i], 5, "Change event should not be dispatched (4).");
+ is(inputEvents[i], 5, "Input event should not be dispatched (4).");
+
+ // Test that change and input events are fired when using Backspace.
+ synthesizeKey("KEY_Backspace");
+ // We get event per character.
+ is(input.value, expectedValues[i][3], "Check that value was set correctly (5).");
+ is(changeEvents[i], 6, "Change event should be dispatched (5).");
+ is(inputEvents[i], 6, "Input event should be dispatched (5).");
+
+ // Test that change and input events are fired when using Home key.
+ synthesizeKey("KEY_End");
+ // We get event per character.
+ is(input.value, expectedValues[i][4], "Check that value was set correctly (6).");
+ is(changeEvents[i], 7, "Change event should be dispatched (6).");
+ is(inputEvents[i], 7, "Input event should be dispatched (6).");
+
+ // Test that change and input events are fired for time and not fired
+ // for others when changing the value with a letter key.
+ // Navigate to the next field (time of the day, year, year).
+ synthesizeKey("KEY_Tab");
+ synthesizeKey("P");
+ // We get event per character.
+ is(input.value, expectedValues[i][5], "Check that value was set correctly (7).");
+ if (i === 0) {
+ // For the time input, the time of the day should be focused and it,
+ // as an AM/PM toggle, should change to "PM" when the "p" key is pressed
+ is(changeEvents[i], 8, "Change event should be dispatched (7).");
+ is(inputEvents[i], 8, "Input event should be dispatched (7).");
+ } else {
+ // For the date and datetime inputs, the year should be focused and it,
+ // as a numeric value, should not change when the "p" key is pressed
+ is(changeEvents[i], 7, "Change event should not be dispatched (7).");
+ is(inputEvents[i], 7, "Input event should not be dispatched (7).");
+ }
+
+ // Test that change and input events are fired when clearing the value
+ // using a Ctrl/Cmd+Delete/Backspace key combination
+ let events = (i === 0) ? 9 : 8;
+ synthesizeKey("KEY_Backspace", { accelKey: true });
+ // We get one event
+ is(input.value, expectedValues[i][6], "Check that value was cleared out correctly (8).");
+ is(changeEvents[i], events, "Change event should be dispatched (8).");
+ is(inputEvents[i], events, "Input event should be dispatched (8).");
+ }
+}
+
+</script>
+</pre>
+</body>
+</html>