mozilla-central/dom/html/test/forms/test_input_datetime_input_change_events.html (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE HTML>
<html>
<!--
-->
<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>
<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], 2, "Change event should be dispatched (2).");
is(inputEvents[i], 2, "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], 3, "Change event should be dispatched (3).");
is(inputEvents[i], 3, "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], 3, "Change event should not be dispatched (4).");
is(inputEvents[i], 3, "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], 4, "Change event should be dispatched (5).");
is(inputEvents[i], 4, "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], 5, "Change event should be dispatched (6).");
is(inputEvents[i], 5, "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], 6, "Change event should be dispatched (7).");
is(inputEvents[i], 6, "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], 5, "Change event should not be dispatched (7).");
is(inputEvents[i], 5, "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) ? 7 : 6;
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>