Skip to content

Commit 62f2147

Browse files
KhafraDevmarco-ippolito
KhafraDev
authored and
marco-ippolito
committed
test: update DOM events web platform tests
PR-URL: #54642 Reviewed-By: Yagiz Nizipli <yagiz@nizipli.com> Reviewed-By: Matteo Collina <matteo.collina@gmail.com> Reviewed-By: Mattias Buelens <mattias@buelens.com> Reviewed-By: Benjamin Gruenbaum <benjamingr@gmail.com> Reviewed-By: Ethan Arrowood <ethan@arrowood.dev> Reviewed-By: Chemi Atlow <chemi@atlow.co.il> Reviewed-By: James M Snell <jasnell@gmail.com>
1 parent 453df77 commit 62f2147

File tree

39 files changed

+2693
-565
lines changed

39 files changed

+2693
-565
lines changed

‎test/fixtures/wpt/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Last update:
1313
- common: https://github.com/web-platform-tests/wpt/tree/dbd648158d/common
1414
- console: https://github.com/web-platform-tests/wpt/tree/767ae35464/console
1515
- dom/abort: https://github.com/web-platform-tests/wpt/tree/d1f1ecbd52/dom/abort
16-
- dom/events: https://github.com/web-platform-tests/wpt/tree/ab8999891c/dom/events
16+
- dom/events: https://github.com/web-platform-tests/wpt/tree/0a811c5161/dom/events
1717
- encoding: https://github.com/web-platform-tests/wpt/tree/5aa50dd415/encoding
1818
- fetch/data-urls/resources: https://github.com/web-platform-tests/wpt/tree/7c79d998ff/fetch/data-urls/resources
1919
- FileAPI: https://github.com/web-platform-tests/wpt/tree/cceaf3628d/FileAPI

‎test/fixtures/wpt/dom/events/Event-dispatch-click.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,22 @@
8787
child.dispatchEvent(new MouseEvent("click", {bubbles:true}))
8888
}, "pick the first with activation behavior <a href>")
8989

90+
async_test(function(t) {
91+
var input = document.createElement("input")
92+
input.type = "radio"
93+
dump.appendChild(input)
94+
input.onclick = t.step_func(function() {
95+
assert_false(input.checked, "input pre-click must not be triggered")
96+
})
97+
var child = input.appendChild(document.createElement("input"))
98+
child.type = "radio"
99+
child.onclick = t.step_func(function() {
100+
assert_true(child.checked, "child pre-click must be triggered")
101+
})
102+
child.dispatchEvent(new MouseEvent("click", {bubbles:true}))
103+
t.done()
104+
}, "pick the first with activation behavior <input type=radio>")
105+
90106
async_test(function(t) {
91107
var input = document.createElement("input")
92108
input.type = "checkbox"
@@ -173,6 +189,46 @@
173189
t.done()
174190
}, "disabled checkbox still has activation behavior, part 2")
175191

192+
async_test(function(t) {
193+
var state = "start"
194+
195+
var form = document.createElement("form")
196+
form.onsubmit = t.step_func(() => {
197+
if(state == "start" || state == "radio") {
198+
state = "failure"
199+
} else if(state == "form") {
200+
state = "done"
201+
}
202+
return false
203+
})
204+
dump.appendChild(form)
205+
var button = form.appendChild(document.createElement("button"))
206+
button.type = "submit"
207+
var radio = button.appendChild(document.createElement("input"))
208+
radio.type = "radio"
209+
radio.onclick = t.step_func(() => {
210+
if(state == "start") {
211+
assert_unreached()
212+
} else if(state == "radio") {
213+
assert_true(radio.checked)
214+
}
215+
})
216+
radio.disabled = true
217+
radio.click()
218+
assert_equals(state, "start")
219+
220+
state = "radio"
221+
radio.disabled = false
222+
radio.click()
223+
assert_equals(state, "radio")
224+
225+
state = "form"
226+
button.click()
227+
assert_equals(state, "done")
228+
229+
t.done()
230+
}, "disabled radio still has activation behavior")
231+
176232
async_test(function(t) {
177233
var input = document.createElement("input")
178234
input.type = "checkbox"

‎test/fixtures/wpt/dom/events/Event-dispatch-on-disabled-elements.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<body>
2020
<script>
2121
// HTML elements that can be disabled
22-
const formElements = ["button", "fieldset", "input", "select", "textarea"];
22+
const formElements = ["button", "input", "select", "textarea"];
2323

2424
test(() => {
2525
for (const localName of formElements) {

‎test/fixtures/wpt/dom/events/Event-dispatch-single-activation-behavior.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<meta charset=utf-8>
3+
<title> Only one activation behavior is executed during dispatch</title>
4+
<link rel="author" title="Vincent Hilla" href="mailto:vhilla@mozilla.com">
5+
<link rel="help" href="https://dom.spec.whatwg.org/#eventtarget-activation-behavior">
6+
<link rel="help" href="https://dom.spec.whatwg.org/#concept-event-dispatch">
7+
<script src="/resources/testharness.js"></script>
8+
<script src="/resources/testharnessreport.js"></script>
9+
<div id=log></div>
10+
11+
<div id=test_container></div>
12+
13+
<!--
14+
Three classes:
15+
click
16+
Element to be clicked to cause activation behavior
17+
activates
18+
Element that registers the activation behavior
19+
container
20+
Element in which other elements with activation behavior are placed.
21+
We test that those won't be activated too.
22+
-->
23+
<template>
24+
<!--input, change event bubble, so have to check if checked is true-->
25+
<input class="click activates container" type="checkbox" oninput="this.checked ? activated(this) : null">
26+
<input class="click activates container" type="radio" oninput="this.checked ? activated(this) : null">
27+
<form onsubmit="activated(this); return false" class="activates">
28+
<input class="click container" type="submit">
29+
</form>
30+
<form onsubmit="activated(this); return false" class="activates">
31+
<input class="click container" type="image">
32+
</form>
33+
<form onreset="activated(this)" class="activates">
34+
<input class="click container" type="reset">
35+
</form>
36+
<form onsubmit="activated(this); return false" class="activates">
37+
<button class="click container" type="submit"></button>
38+
</form>
39+
<form onreset="activated(this)" class="activates">
40+
<button class="click container" type="reset"></button>
41+
</form>
42+
<a href="#link" class="click container activates"></a>
43+
<area href="#link" class="click container activates">
44+
<details ontoggle="activated(this)" class="activates">
45+
<summary class="click container"></summary>
46+
</details>
47+
<label>
48+
<input type=checkbox onclick="this.checked ? activated(this) : null" class="activates">
49+
<span class="click container">label</span>
50+
</label>
51+
<!--activation behavior of label for event targeted at interactive content descendant is to do nothing-->
52+
<label class="container">
53+
<button class="click" type="button"></button>
54+
</label>
55+
</template>
56+
57+
<script>
58+
let activations = [];
59+
function activated(e) {
60+
activations.push(e);
61+
}
62+
63+
function getActivations(testidx) {
64+
return activations.filter(a =>
65+
(a.endsWith && a.endsWith("test"+testidx+"_link"))
66+
|| (a.classList && a.classList.contains("test"+testidx))
67+
);
68+
}
69+
70+
// for a and area elements
71+
window.onhashchange = function(e) {
72+
if (e.newURL.endsWith("link")) {
73+
activated(e.newURL);
74+
}
75+
window.location.hash = "";
76+
};
77+
78+
function getElementsByClassNameInclusive(e, clsname) {
79+
let ls = Array.from(e.getElementsByClassName(clsname));
80+
if (e.classList.contains(clsname)) ls.push(e);
81+
return ls;
82+
}
83+
84+
function getClickTarget(e) {
85+
return getElementsByClassNameInclusive(e, "click")[0];
86+
}
87+
88+
function getContainer(e) {
89+
return getElementsByClassNameInclusive(e, "container")[0];
90+
}
91+
92+
function getExpectedActivations(e) {
93+
let ls = getElementsByClassNameInclusive(e, "activates");
94+
95+
// special case, for a and area the window registers the activation
96+
// have to use string, as testrunner cannot stringify the window object
97+
ls = ls.map(e => e.tagName === "A" || e.tagName === "AREA" ? e.href : e);
98+
99+
return ls;
100+
}
101+
102+
function toString(e) {
103+
const children = Array.from(e.children);
104+
const childstr = (children.map(toString)).join("");
105+
const tag = e.tagName;
106+
const typestr = e.type ? " type="+e.type : "";
107+
return `<${tag}${typestr}>${childstr}</${tag}>`;
108+
}
109+
110+
// generate O(n^2) test combinations
111+
const template = document.querySelector("template");
112+
const elements = Array.from(template.content.children);
113+
const tests = []
114+
for (const target of elements) {
115+
for (const parent of elements) {
116+
if (target === parent) continue;
117+
tests.push([target.cloneNode(true), parent.cloneNode(true)])
118+
}
119+
}
120+
121+
const test_container = document.getElementById("test_container");
122+
123+
/**
124+
* Test that if two elements in an event target chain have activation behavior,
125+
* only one of them will be activated.
126+
*
127+
* Each child of <template> represents one case of activation behavior.
128+
* The behavior should be triggered by clicking the element of class click
129+
* and will manifest as a call to activated().
130+
*
131+
* For each [target, parent] in tests, we make target a descendant of parent
132+
* and test that only target gets activated when dispatching a click.
133+
*/
134+
for (let i = 0; i < tests.length; i++) {
135+
let [target, parent] = tests[i];
136+
async_test(function(t) {
137+
let test = document.createElement("div");
138+
test_container.appendChild(test);
139+
test.appendChild(parent);
140+
getContainer(parent).appendChild(target);
141+
142+
// for later filtering out the activations belonging to this test
143+
for (let e of test.getElementsByClassName("activates")) {
144+
e.classList.add("test"+i);
145+
}
146+
for (let e of test.querySelectorAll("a, area")) {
147+
e.href = "#test"+i+"_link";
148+
}
149+
150+
getClickTarget(target).click();
151+
152+
// Need to spin event loop twice, as some clicks might dispatch another task
153+
t.step_timeout(() => {
154+
t.step_timeout(t.step_func_done(() => {
155+
assert_array_equals(getActivations(i), getExpectedActivations(target));
156+
}), 0);
157+
}, 0);
158+
159+
t.add_cleanup(function() {
160+
test_container.removeChild(test);
161+
});
162+
}, `When clicking child ${toString(target)} of parent ${toString(parent)}, only child should be activated.`);
163+
}
164+
</script>

‎test/fixtures/wpt/dom/events/Event-dispatch-throwing-multiple-globals.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<script src="/resources/testharness.js"></script>
3+
<script src="/resources/testharnessreport.js"></script>
4+
<body>
5+
<script>
6+
function createIframe(t, srcdoc = '') {
7+
let iframe = document.createElement('iframe');
8+
iframe.srcdoc = srcdoc;
9+
t.add_cleanup(() => iframe.remove());
10+
return new Promise((resolve, reject) => {
11+
iframe.addEventListener('load', () => resolve(iframe.contentWindow));
12+
document.body.appendChild(iframe);
13+
});
14+
}
15+
16+
// Returns a promise which will resolve with the next error event fired at any
17+
// of `windows`, after the invocation of this function. Once one does, this
18+
// function removes its listeners and produces that error event so that it can
19+
// be examined (most notably for which global proxy it was targeted at).
20+
async function nextErrorEvent(windows) {
21+
let listener;
22+
let p = new Promise((resolve, reject) => {
23+
listener = (event) => { resolve(event); event.preventDefault(); };
24+
});
25+
for (let w of windows) {
26+
w.addEventListener('error', listener);
27+
}
28+
try {
29+
return await p;
30+
} finally {
31+
for (let w of windows) {
32+
w.removeEventListener('error', listener);
33+
}
34+
}
35+
}
36+
37+
promise_test(async t => {
38+
let w = await createIframe(t, `<script>function listener() { throw new Error(); }<`+`/script>`);
39+
let w2 = await createIframe(t);
40+
41+
let target = new w2.EventTarget();
42+
target.addEventListener('party', w.listener);
43+
let nextErrorPromise = nextErrorEvent([self, w, w2]);
44+
target.dispatchEvent(new Event('party'));
45+
let errorEvent = await nextErrorPromise;
46+
if (errorEvent.error) {
47+
assert_true(errorEvent.error instanceof w.Error, 'error should be an instance created inside the listener function');
48+
}
49+
assert_equals(errorEvent.target, w, `error event should target listener's global but instead targets ${event.currentTarget === w2 ? 'target\'s global' : 'test harness global'}`);
50+
}, 'exception thrown in event listener function should result in error event on listener\'s global');
51+
52+
promise_test(async t => {
53+
let w = await createIframe(t, `<script>listener = {};<`+`/script>`);
54+
let w2 = await createIframe(t, `<script>handleEvent = () => { throw new Error; };<`+`/script>`);
55+
let w3 = await createIframe(t);
56+
w.listener.handleEvent = w2.handleEvent;
57+
58+
let target = new w3.EventTarget();
59+
target.addEventListener('party', w.listener);
60+
let nextErrorPromise = nextErrorEvent([self, w, w2, w3]);
61+
target.dispatchEvent(new Event('party'));
62+
let errorEvent = await nextErrorPromise;
63+
if (errorEvent.error) {
64+
assert_true(errorEvent.error instanceof w2.Error, 'error should be an instance created inside the listener function');
65+
}
66+
assert_equals(errorEvent.target, w, `error event should target listener's global but instead targets ${event.currentTarget === w2 ? 'target\'s global' : event.currentTarget === w3 ? 'function\'s global' : 'test harness global'}`);
67+
}, 'exception thrown in event listener interface object should result in error event on listener\'s global');
68+
</script>
69+
</body>

‎test/fixtures/wpt/dom/events/EventTarget-constructible.any.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,23 @@ test(() => {
2323
assert_equals(callCount, 2);
2424
}, "A constructed EventTarget can be used as expected");
2525

26+
test(() => {
27+
const target = new EventTarget();
28+
const event = new Event("foo");
29+
30+
function listener(e) {
31+
assert_equals(e, event);
32+
assert_equals(e.target, target);
33+
assert_equals(e.currentTarget, target);
34+
assert_array_equals(e.composedPath(), [target]);
35+
}
36+
target.addEventListener("foo", listener, { once: true });
37+
target.dispatchEvent(event);
38+
assert_equals(event.target, target);
39+
assert_equals(event.currentTarget, null);
40+
assert_array_equals(event.composedPath(), []);
41+
}, "A constructed EventTarget implements dispatch correctly");
42+
2643
test(() => {
2744
class NicerEventTarget extends EventTarget {
2845
on(...args) {

‎test/fixtures/wpt/dom/events/event-global.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,4 +114,14 @@
114114

115115
target.dispatchEvent(new Event("click"));
116116
}, "window.event is set to the current event, which is the event passed to dispatch");
117+
118+
async_test(t => {
119+
let target = new XMLHttpRequest();
120+
121+
target.onload = t.step_func_done(e => {
122+
assert_equals(e, window.event);
123+
});
124+
125+
target.dispatchEvent(new Event("load"));
126+
}, "window.event is set to the current event, which is the event passed to dispatch (2)");
117127
</script>

‎test/fixtures/wpt/dom/events/pointer-event-document-move.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://crbug.com/341104769">
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="/resources/testdriver.js"></script>
6+
<script src="/resources/testdriver-actions.js"></script>
7+
<script src="/resources/testdriver-vendor.js"></script>
8+
9+
<template>
10+
<p>TEST</p>
11+
</template>
12+
13+
<body>
14+
<script>
15+
const clone = document.querySelector("template").content.cloneNode(true);
16+
const p = clone.querySelector("p");
17+
18+
let gotEvent = false;
19+
p.addEventListener("pointerup", () => {
20+
gotEvent = true;
21+
});
22+
23+
document.body.append(clone);
24+
25+
promise_test(async () => {
26+
await test_driver.click(document.querySelector("p"));
27+
assert_true(gotEvent);
28+
}, "Moving a node to new document should move the registered event listeners together");
29+
</script>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy