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
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1479708
-->
<head>
<title>Test required date/time input can't be reset</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>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1479708">Mozilla Bug 1479708</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="date" id="id_date_required" value="2017-06-08" required>
<input type="time" id="id_time_required" value="10: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="date" id="id_date_disabled" value="2017-06-08" disabled>
<input type="time" id="id_time_disabled" value="10:30" disabled>
</div>
<pre id="test">
<script class="testbody">
const isDesktop = !/Mobile|Tablet/.test(navigator.userAgent);
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
if (!isDesktop) {
ok(true, "Mobile and tablet don’t show reset button");
return SimpleTest.finish();
}
// Initial load.
assert_reset_visible("id_date");
assert_reset_visible("id_time");
assert_reset_hidden("id_date_required");
assert_reset_hidden("id_time_required");
// Dynamic toggling.
test_make_required("id_date");
test_make_required("id_time");
test_make_optional("id_date_required");
test_make_optional("id_time_required");
test_readonly_field_disabled("date");
test_readonly_field_disabled("time");
test_disabled_field_disabled("date");
test_disabled_field_disabled("time");
// 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_required("id_date_required", true);
test_make_required("id_time_required", true);
test_make_optional("id_date", true);
test_make_optional("id_time", true);
// And test other toggling as well.
test_readonly_field_disabled("date");
test_readonly_field_disabled("time");
test_disabled_field_disabled("date");
test_disabled_field_disabled("time");
SimpleTest.finish();
});
function test_disabled_field_disabled(type) {
const id = "id_" + type + "_disabled";
const input = document.getElementById(id);
ok(input.disabled, "Should be disabled");
ok(get_reset_button(id).disabled, `disabled's reset button is disabled (${id})`);
input.disabled = false;
ok(!input.disabled, "Should not be disabled anymore");
ok(!get_reset_button(id).disabled, `enabled field's reset button is not disabled (${id})`);
input.disabled = true; // reset to the original state.
}
function test_readonly_field_disabled(type) {
const id = "id_" + type + "_readonly";
const input = document.getElementById(id);
ok(input.readOnly, "Should be read-only");
ok(get_reset_button(id).disabled, `readonly field's reset button is disabled (${id})`);
input.readOnly = false;
ok(!input.readOnly, "Should not be read-only anymore");
ok(!get_reset_button(id).disabled, `non-readonly field's reset button is not disabled (${id})`);
input.readOnly = true; // reset to the original state.
}
function test_make_required(id) {
const input = document.getElementById(id);
is(input.required, false, `Precondition: input #${id} is optional`);
input.required = true;
assert_reset_hidden(id);
}
function test_make_optional(id) {
const input = document.getElementById(id);
is(input.required, true, `Precondition: input #${id} is required`);
input.required = false;
assert_reset_visible(id);
}
function assert_reset_visible(id) {
const resetButton = get_reset_button(id);
is(resetButton.style.visibility, "", `Reset button is visible on #${id}`);
}
function assert_reset_hidden(id) {
const resetButton = get_reset_button(id);
is(resetButton.style.visibility, "hidden", `Reset button is hidden on #${id}`);
}
function get_reset_button(id) {
const input = document.getElementById(id);
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
return shadowRoot.getElementById("reset-button");
}
</script>
</pre>
</body>
</html>
|
