1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
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], 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>
|
