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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
|
<!doctype html>
<meta charset="utf8">
<meta name="timeout" content="long">
<title>Events must dispatch on disabled elements</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
@keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
<body>
<script>
// HTML elements that can be disabled
const formElements = ["button", "fieldset", "input", "select", "textarea"];
test(() => {
for (const localName of formElements) {
const elem = document.createElement(localName);
elem.disabled = true;
// pass becomes true if the event is called and it's the right type.
let pass = false;
const listener = ({ type }) => {
pass = type === "click";
};
elem.addEventListener("click", listener, { once: true });
elem.dispatchEvent(new Event("click"));
assert_true(
pass,
`Untrusted "click" Event didn't dispatch on ${elem.constructor.name}.`
);
}
}, "Can dispatch untrusted 'click' Events at disabled HTML elements.");
test(() => {
for (const localName of formElements) {
const elem = document.createElement(localName);
elem.disabled = true;
// pass becomes true if the event is called and it's the right type.
let pass = false;
const listener = ({ type }) => {
pass = type === "pass";
};
elem.addEventListener("pass", listener, { once: true });
elem.dispatchEvent(new Event("pass"));
assert_true(
pass,
`Untrusted "pass" Event didn't dispatch on ${elem.constructor.name}`
);
}
}, "Can dispatch untrusted Events at disabled HTML elements.");
test(() => {
for (const localName of formElements) {
const elem = document.createElement(localName);
elem.disabled = true;
// pass becomes true if the event is called and it's the right type.
let pass = false;
const listener = ({ type }) => {
pass = type === "custom-pass";
};
elem.addEventListener("custom-pass", listener, { once: true });
elem.dispatchEvent(new CustomEvent("custom-pass"));
assert_true(
pass,
`CustomEvent "custom-pass" didn't dispatch on ${elem.constructor.name}`
);
}
}, "Can dispatch CustomEvents at disabled HTML elements.");
test(() => {
for (const localName of formElements) {
const elem = document.createElement(localName);
// Element is disabled... so this click() MUST NOT fire an event.
elem.disabled = true;
let pass = true;
elem.onclick = e => {
pass = false;
};
elem.click();
assert_true(
pass,
`.click() must not dispatch "click" event on disabled ${
elem.constructor.name
}.`
);
// Element is (re)enabled... so this click() fires an event.
elem.disabled = false;
pass = false;
elem.onclick = e => {
pass = true;
};
elem.click();
assert_true(
pass,
`.click() must dispatch "click" event on enabled ${
elem.constructor.name
}.`
);
}
}, "Calling click() on disabled elements must not dispatch events.");
promise_test(async () => {
// For each form element type, set up transition event handlers.
for (const localName of formElements) {
const elem = document.createElement(localName);
elem.disabled = true;
document.body.appendChild(elem);
const eventPromises = [
"transitionrun",
"transitionstart",
"transitionend",
].map(eventType => {
return new Promise(r => {
elem.addEventListener(eventType, r);
});
});
// Flushing style triggers transition.
getComputedStyle(elem).opacity;
elem.style.transition = "opacity .1s";
elem.style.opacity = 0;
getComputedStyle(elem).opacity;
// All the events fire...
await Promise.all(eventPromises);
elem.remove();
}
}, "CSS Transitions transitionrun, transitionstart, transitionend events fire on disabled form elements");
promise_test(async () => {
// For each form element type, set up transition event handlers.
for (const localName of formElements) {
const elem = document.createElement(localName);
elem.disabled = true;
document.body.appendChild(elem);
getComputedStyle(elem).opacity;
elem.style.transition = "opacity 100s";
// We use ontransitionstart to cancel the event.
elem.ontransitionstart = () => {
elem.style.display = "none";
};
const promiseToCancel = new Promise(r => {
elem.ontransitioncancel = r;
});
// Flushing style triggers the transition.
elem.style.opacity = 0;
getComputedStyle(elem).opacity;
await promiseToCancel;
// And we are done with this element.
elem.remove();
}
}, "CSS Transitions transitioncancel event fires on disabled form elements");
promise_test(async () => {
// For each form element type, set up transition event handlers.
for (const localName of formElements) {
const elem = document.createElement(localName);
document.body.appendChild(elem);
elem.disabled = true;
const animationStartPromise = new Promise(r => {
elem.addEventListener("animationstart", () => {
// Seek to the second iteration to trigger the animationiteration event
elem.style.animationDelay = "-100s"
r();
});
});
const animationIterationPromise = new Promise(r => {
elem.addEventListener("animationiteration", ()=>{
elem.style.animationDelay = "-200s"
r();
});
});
const animationEndPromise = new Promise(r => {
elem.addEventListener("animationend", r);
});
elem.style.animation = "fade 100s 2";
elem.classList.add("animate");
// All the events fire...
await Promise.all([
animationStartPromise,
animationIterationPromise,
animationEndPromise,
]);
elem.remove();
}
}, "CSS Animation animationstart, animationiteration, animationend fire on disabled form elements");
promise_test(async () => {
// For each form element type, set up transition event handlers.
for (const localName of formElements) {
const elem = document.createElement(localName);
document.body.appendChild(elem);
elem.disabled = true;
const promiseToCancel = new Promise(r => {
elem.addEventListener("animationcancel", r);
});
elem.addEventListener("animationstart", () => {
// Cancel the animation by hiding it.
elem.style.display = "none";
});
// Trigger the animation
elem.style.animation = "fade 100s";
elem.classList.add("animate");
await promiseToCancel;
// And we are done with this element.
elem.remove();
}
}, "CSS Animation's animationcancel event fires on disabled form elements");
promise_test(async () => {
for (const localName of formElements) {
const elem = document.createElement(localName);
elem.disabled = true;
document.body.appendChild(elem);
// Element is disabled, so clicking must not fire events
let pass = true;
elem.onclick = e => {
pass = false;
};
// Disabled elements are not clickable.
await test_driver.click(elem);
assert_true(
pass,
`${elem.constructor.name} is disabled, so onclick must not fire.`
);
// Element is (re)enabled... so this click() will fire an event.
pass = false;
elem.disabled = false;
elem.onclick = () => {
pass = true;
};
await test_driver.click(elem);
assert_true(
pass,
`${elem.constructor.name} is enabled, so onclick must fire.`
);
elem.remove();
}
}, "Real clicks on disabled elements must not dispatch events.");
</script>
|
