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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test Panel Item Checkbox type</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<script type="text/javascript" src="head.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>
<div id="content">
<panel-list>
<panel-item type="checkbox" checked="">First item</panel-item>
<panel-item type="checkbox">Second item</panel-item>
<panel-item checked="">Third item</panel-item>
</panel-list>
</div>
<pre id="test">
<script class="testbody" type="application/javascript">
const {BrowserTestUtils} = ChromeUtils.importESModule("resource://testing-common/BrowserTestUtils.sys.mjs");
add_task(async function testCheckboxType() {
let panelList = document.querySelector("panel-list");
let panelItems = [...panelList.children];
let firstItem = panelItems[0];
let secondItem = panelItems[1];
let thirdItem = panelItems[2];
// Ensure declared markup items are rendered with correct state and attributes
is(
firstItem.checked,
true,
"Panel item's state should not have changed from initial render"
);
is(
firstItem.shadowRoot.querySelector("button").role,
"menuitemcheckbox",
"Checkbox panel item should have the correct role on the inner button"
);
is(
firstItem.shadowRoot.querySelector("button").getAttribute("aria-checked"),
"true",
"Checkbox panel item correctly sets aria-checked attribute"
);
is(
secondItem.checked,
false,
"Panel item's state should not have changed from initial render"
);
is(
secondItem.shadowRoot.querySelector("button").role,
"menuitemcheckbox",
"Checkbox panel item should have the correct role on the inner button"
);
is(
secondItem.shadowRoot.querySelector("button").getAttribute("aria-checked"),
"false",
"Checkbox panel item correctly sets aria-checked attribute"
);
is(
thirdItem.checked,
false,
"Non-checkbox panel item's checked attribute should never be true"
);
is(
thirdItem.shadowRoot.querySelector("button").role,
"menuitem",
"Non-checkbox panel item should have the correct role on the inner button"
);
is(
thirdItem.shadowRoot.querySelector("button").getAttribute("aria-checked"),
null,
"Non-checkbox panel item should not modify aria-checked attribute"
);
// Ensure that creating a checkbox panel-item dynamically works as expected
let dynamicItem = document.createElement("panel-item");
dynamicItem.type = "checkbox";
dynamicItem.checked = true;
panelList.appendChild(dynamicItem);
dynamicItem = panelList.lastElementChild;
is(
dynamicItem.checked,
true,
"Panel item's state should not have changed from initial render"
);
is(
dynamicItem.shadowRoot.querySelector("button").role,
"menuitemcheckbox",
"Checkbox panel item should have the correct role on the inner button"
);
is(
dynamicItem.shadowRoot.querySelector("button").getAttribute("aria-checked"),
"true",
"Checkbox panel item correctly sets aria-checked attribute"
);
// Flip checked state of initially rendered checkbox,
// invalid checkbox item, and generated checkbox item and verify changes.
firstItem.checked = false;
thirdItem.checked = false;
dynamicItem.checked = false;
is(
firstItem.checked,
false,
"Item's state should be updated accordingly"
);
is(
firstItem.shadowRoot.querySelector("button").getAttribute("aria-checked"),
"false",
"The aria-checked attribute should be updated when the checked property changes value"
);
is(
firstItem.shadowRoot.querySelector("button").role,
"menuitemcheckbox",
"The role of the button should not have changed when changing the checked property"
);
is(
firstItem.type,
"checkbox",
"The type attribute should not change when the checked value changes"
);
is(
thirdItem.checked,
false,
"Item's state should be updated accordingly"
);
is(
thirdItem.shadowRoot.querySelector("button").getAttribute("aria-checked"),
null,
"Items that are not checkboxes should not have an aria-checked attribute"
);
is(
thirdItem.shadowRoot.querySelector("button").role,
"menuitem",
"The role of the button should not have changed when changing the checked property"
);
is(
thirdItem.type,
"button",
"Changing the checked property should not result the type changing"
);
is(
thirdItem.getAttribute("type"),
null,
"Changing the checked property should not change the type attribute of items"
);
is(
dynamicItem.checked,
false,
"Item's state should be updated accordingly"
)
is(
dynamicItem.shadowRoot.querySelector("button").getAttribute("aria-checked"),
"false",
"Aria-checked should be set to false when a checkbox item is no longer checked"
);
is(
dynamicItem.shadowRoot.querySelector("button").role,
"menuitemcheckbox",
"The role of the button should not have changed when changing the checked property"
);
is(
dynamicItem.type,
"checkbox",
"The type attribute should not change when the checked value changes"
);
// Ensure that aria-checked is set correctly when removing and re-adding
// the checkbox type
firstItem.checked = true;
is(
firstItem.shadowRoot.querySelector("button").getAttribute("aria-checked"),
"true",
"aria-checked should update when checked property value is changed"
);
firstItem.removeAttribute("type");
is(
firstItem.shadowRoot.querySelector("button").getAttribute("aria-checked"),
null,
"aria-checked should no longer exist when a panel-item is not a checkbox type"
);
is(
firstItem.checked,
false,
"Non-checkbox items checked property should always be false"
);
is(
firstItem.getAttribute("checked"),
"",
"The checked attribute should not have changed value when changing type"
)
firstItem.type = "checkbox";
is(
firstItem.shadowRoot.querySelector("button").getAttribute("aria-checked"),
"true",
"aria-checked should be set to true when the checked attribute is set AND the type is checkbox"
);
is(
firstItem.checked,
true,
"Checked property should be true now since we're working with a checkbox panel-item"
);
});
</script>
</pre>
</body>
</html>
|
