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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1479708
-->
<head>
<title>Test required date/datetime-local input's Calendar button</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css" />
</head>
<body>
Created for <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1479708">Mozilla Bug 1479708</a> and updated by <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1676068">Mozilla Bug 1676068</a> and <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1865885">Mozilla Bug 1865885</a>
<p id="display"></p>
<div id="content">
<input type="date" id="id_date" value="2017-06-08">
<input type="time" id="id_time" value="10:30">
<input type="datetime-local" id="id_datetime-local" value="2017-06-08T10:30">
<input type="date" id="id_date_required" value="2017-06-08" required>
<input type="time" id="id_time_required" value="10:30" required>
<input type="datetime-local" id="id_datetime-local_required" value="2017-06-08T10:30" required>
<input type="date" id="id_date_readonly" value="2017-06-08" readonly>
<input type="time" id="id_time_readonly" value="10:30" readonly>
<input type="datetime-local" id="id_datetime-local_readonly" value="2017-06-08T10:30" readonly>
<input type="date" id="id_date_disabled" value="2017-06-08" disabled>
<input type="time" id="id_time_disabled" value="10:30" disabled>
<input type="datetime-local" id="id_datetime-local_disabled" value="2017-06-08T10:30" disabled>
</div>
<pre id="test">
<script class="testbody">
const kTypes = ["date", "time", "datetime-local"];
function id_for_type(type, kind) {
return "id_" + type + (kind ? "_" + kind : "");
}
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
// Initial load.
assert_calendar_visible_all("");
assert_calendar_visible_all("required");
assert_calendar_hidden_all("readonly");
assert_calendar_hidden_all("disabled");
// Dynamic toggling.
test_make_readonly("");
test_make_editable("readonly");
test_disabled_field_disabled();
// Now toggle the inputs to the initial state, but while being
// display: none. This tests for bug 1567191.
for (const input of document.querySelectorAll("input")) {
input.style.display = "none";
is(input.getBoundingClientRect().width, 0, "Should be undisplayed");
}
test_make_readonly("readonly");
test_make_editable("");
// And test other toggling as well.
test_readonly_field_disabled();
test_disabled_field_disabled();
SimpleTest.finish();
});
function test_disabled_field_disabled() {
for (let type of kTypes) {
const id = id_for_type(type, "disabled");
const input = document.getElementById(id);
ok(input.disabled, `#${id} Should be disabled`);
ok(
is_calendar_button_hidden(id),
`disabled's Calendar button is hidden (${id})`
);
input.disabled = false;
ok(!input.disabled, `#${id} Should not be disabled anymore`);
if (type === "time") {
assert_calendar_hidden(id);
} else {
ok(
!is_calendar_button_hidden(id),
`enabled field's Calendar button is not hidden (${id})`
);
}
input.disabled = true; // reset to the original state.
}
}
function test_readonly_field_disabled() {
for (let type of kTypes) {
const id = id_for_type(type, "readonly");
const input = document.getElementById(id);
ok(input.readOnly, `#${id} Should be read-only`);
ok(is_calendar_button_hidden(id), `readonly field's Calendar button is hidden (${id})`);
input.readOnly = false;
ok(!input.readOnly, `#${id} Should not be read-only anymore`);
if (type === "time") {
assert_calendar_hidden(id);
} else {
ok(
!is_calendar_button_hidden(id),
`non-readonly field's Calendar button is not hidden (${id})`
);
}
input.readOnly = true; // reset to the original state.
}
}
function test_make_readonly(kind) {
for (let type of kTypes) {
const id = id_for_type(type, kind);
const input = document.getElementById(id);
is(input.readOnly, false, `Precondition: input #${id} is editable`);
input.readOnly = true;
assert_calendar_hidden(id);
}
}
function test_make_editable(kind) {
for (let type of kTypes) {
const id = id_for_type(type, kind);
const input = document.getElementById(id);
is(input.readOnly, true, `Precondition: input #${id} is read-only`);
input.readOnly = false;
if (type === "time") {
assert_calendar_hidden(id);
} else {
assert_calendar_visible(id);
}
}
}
function assert_calendar_visible_all(kind) {
for (let type of kTypes) {
if (type === "time") {
assert_calendar_hidden(id_for_type(type, kind));
} else {
assert_calendar_visible(id_for_type(type, kind));
}
}
}
function assert_calendar_visible(id) {
const isCalendarButtonHidden = is_calendar_button_hidden(id);
ok(!isCalendarButtonHidden, `Calendar button is not hidden on #${id}`);
}
function assert_calendar_hidden_all(kind) {
for (let type of kTypes) {
assert_calendar_hidden(id_for_type(type, kind));
}
}
function assert_calendar_hidden(id) {
const isCalendarButtonHidden = is_calendar_button_hidden(id);
ok(isCalendarButtonHidden, `Calendar button is hidden on #${id}`);
}
function is_calendar_button_hidden(id) {
const input = document.getElementById(id);
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
const calendarButton = shadowRoot.getElementById("calendar-button");
const calendarButtonDisplay = SpecialPowers.wrap(window).getComputedStyle(calendarButton).display;
return calendarButtonDisplay === "none";
}
</script>
</pre>
</body>
</html>
|
