-
Notifications
You must be signed in to change notification settings - Fork 29.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
events: reset event state after dispatch
Fixes #54617
- Loading branch information
Showing
40 changed files
with
2,694 additions
and
566 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
164 changes: 164 additions & 0 deletions
164
test/fixtures/wpt/dom/events/Event-dispatch-single-activation-behavior.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,164 @@ | ||
<!DOCTYPE html> | ||
<meta charset=utf-8> | ||
<title> Only one activation behavior is executed during dispatch</title> | ||
<link rel="author" title="Vincent Hilla" href="mailto:[email protected]"> | ||
<link rel="help" href="https://dom.spec.whatwg.org/#eventtarget-activation-behavior"> | ||
<link rel="help" href="https://dom.spec.whatwg.org/#concept-event-dispatch"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<div id=log></div> | ||
|
||
<div id=test_container></div> | ||
|
||
<!-- | ||
Three classes: | ||
click | ||
Element to be clicked to cause activation behavior | ||
activates | ||
Element that registers the activation behavior | ||
container | ||
Element in which other elements with activation behavior are placed. | ||
We test that those won't be activated too. | ||
--> | ||
<template> | ||
<!--input, change event bubble, so have to check if checked is true--> | ||
<input class="click activates container" type="checkbox" oninput="this.checked ? activated(this) : null"> | ||
<input class="click activates container" type="radio" oninput="this.checked ? activated(this) : null"> | ||
<form onsubmit="activated(this); return false" class="activates"> | ||
<input class="click container" type="submit"> | ||
</form> | ||
<form onsubmit="activated(this); return false" class="activates"> | ||
<input class="click container" type="image"> | ||
</form> | ||
<form onreset="activated(this)" class="activates"> | ||
<input class="click container" type="reset"> | ||
</form> | ||
<form onsubmit="activated(this); return false" class="activates"> | ||
<button class="click container" type="submit"></button> | ||
</form> | ||
<form onreset="activated(this)" class="activates"> | ||
<button class="click container" type="reset"></button> | ||
</form> | ||
<a href="#link" class="click container activates"></a> | ||
<area href="#link" class="click container activates"> | ||
<details ontoggle="activated(this)" class="activates"> | ||
<summary class="click container"></summary> | ||
</details> | ||
<label> | ||
<input type=checkbox onclick="this.checked ? activated(this) : null" class="activates"> | ||
<span class="click container">label</span> | ||
</label> | ||
<!--activation behavior of label for event targeted at interactive content descendant is to do nothing--> | ||
<label class="container"> | ||
<button class="click" type="button"></button> | ||
</label> | ||
</template> | ||
|
||
<script> | ||
let activations = []; | ||
function activated(e) { | ||
activations.push(e); | ||
} | ||
|
||
function getActivations(testidx) { | ||
return activations.filter(a => | ||
(a.endsWith && a.endsWith("test"+testidx+"_link")) | ||
|| (a.classList && a.classList.contains("test"+testidx)) | ||
); | ||
} | ||
|
||
// for a and area elements | ||
window.onhashchange = function(e) { | ||
if (e.newURL.endsWith("link")) { | ||
activated(e.newURL); | ||
} | ||
window.location.hash = ""; | ||
}; | ||
|
||
function getElementsByClassNameInclusive(e, clsname) { | ||
let ls = Array.from(e.getElementsByClassName(clsname)); | ||
if (e.classList.contains(clsname)) ls.push(e); | ||
return ls; | ||
} | ||
|
||
function getClickTarget(e) { | ||
return getElementsByClassNameInclusive(e, "click")[0]; | ||
} | ||
|
||
function getContainer(e) { | ||
return getElementsByClassNameInclusive(e, "container")[0]; | ||
} | ||
|
||
function getExpectedActivations(e) { | ||
let ls = getElementsByClassNameInclusive(e, "activates"); | ||
|
||
// special case, for a and area the window registers the activation | ||
// have to use string, as testrunner cannot stringify the window object | ||
ls = ls.map(e => e.tagName === "A" || e.tagName === "AREA" ? e.href : e); | ||
|
||
return ls; | ||
} | ||
|
||
function toString(e) { | ||
const children = Array.from(e.children); | ||
const childstr = (children.map(toString)).join(""); | ||
const tag = e.tagName; | ||
const typestr = e.type ? " type="+e.type : ""; | ||
return `<${tag}${typestr}>${childstr}</${tag}>`; | ||
} | ||
|
||
// generate O(n^2) test combinations | ||
const template = document.querySelector("template"); | ||
const elements = Array.from(template.content.children); | ||
const tests = [] | ||
for (const target of elements) { | ||
for (const parent of elements) { | ||
if (target === parent) continue; | ||
tests.push([target.cloneNode(true), parent.cloneNode(true)]) | ||
} | ||
} | ||
|
||
const test_container = document.getElementById("test_container"); | ||
|
||
/** | ||
* Test that if two elements in an event target chain have activation behavior, | ||
* only one of them will be activated. | ||
* | ||
* Each child of <template> represents one case of activation behavior. | ||
* The behavior should be triggered by clicking the element of class click | ||
* and will manifest as a call to activated(). | ||
* | ||
* For each [target, parent] in tests, we make target a descendant of parent | ||
* and test that only target gets activated when dispatching a click. | ||
*/ | ||
for (let i = 0; i < tests.length; i++) { | ||
let [target, parent] = tests[i]; | ||
async_test(function(t) { | ||
let test = document.createElement("div"); | ||
test_container.appendChild(test); | ||
test.appendChild(parent); | ||
getContainer(parent).appendChild(target); | ||
|
||
// for later filtering out the activations belonging to this test | ||
for (let e of test.getElementsByClassName("activates")) { | ||
e.classList.add("test"+i); | ||
} | ||
for (let e of test.querySelectorAll("a, area")) { | ||
e.href = "#test"+i+"_link"; | ||
} | ||
|
||
getClickTarget(target).click(); | ||
|
||
// Need to spin event loop twice, as some clicks might dispatch another task | ||
t.step_timeout(() => { | ||
t.step_timeout(t.step_func_done(() => { | ||
assert_array_equals(getActivations(i), getExpectedActivations(target)); | ||
}), 0); | ||
}, 0); | ||
|
||
t.add_cleanup(function() { | ||
test_container.removeChild(test); | ||
}); | ||
}, `When clicking child ${toString(target)} of parent ${toString(parent)}, only child should be activated.`); | ||
} | ||
</script> |
69 changes: 69 additions & 0 deletions
69
test/fixtures/wpt/dom/events/Event-dispatch-throwing-multiple-globals.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
<!DOCTYPE html> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<body> | ||
<script> | ||
function createIframe(t, srcdoc = '') { | ||
let iframe = document.createElement('iframe'); | ||
iframe.srcdoc = srcdoc; | ||
t.add_cleanup(() => iframe.remove()); | ||
return new Promise((resolve, reject) => { | ||
iframe.addEventListener('load', () => resolve(iframe.contentWindow)); | ||
document.body.appendChild(iframe); | ||
}); | ||
} | ||
|
||
// Returns a promise which will resolve with the next error event fired at any | ||
// of `windows`, after the invocation of this function. Once one does, this | ||
// function removes its listeners and produces that error event so that it can | ||
// be examined (most notably for which global proxy it was targeted at). | ||
async function nextErrorEvent(windows) { | ||
let listener; | ||
let p = new Promise((resolve, reject) => { | ||
listener = (event) => { resolve(event); event.preventDefault(); }; | ||
}); | ||
for (let w of windows) { | ||
w.addEventListener('error', listener); | ||
} | ||
try { | ||
return await p; | ||
} finally { | ||
for (let w of windows) { | ||
w.removeEventListener('error', listener); | ||
} | ||
} | ||
} | ||
|
||
promise_test(async t => { | ||
let w = await createIframe(t, `<script>function listener() { throw new Error(); }<`+`/script>`); | ||
let w2 = await createIframe(t); | ||
|
||
let target = new w2.EventTarget(); | ||
target.addEventListener('party', w.listener); | ||
let nextErrorPromise = nextErrorEvent([self, w, w2]); | ||
target.dispatchEvent(new Event('party')); | ||
let errorEvent = await nextErrorPromise; | ||
if (errorEvent.error) { | ||
assert_true(errorEvent.error instanceof w.Error, 'error should be an instance created inside the listener function'); | ||
} | ||
assert_equals(errorEvent.target, w, `error event should target listener's global but instead targets ${event.currentTarget === w2 ? 'target\'s global' : 'test harness global'}`); | ||
}, 'exception thrown in event listener function should result in error event on listener\'s global'); | ||
|
||
promise_test(async t => { | ||
let w = await createIframe(t, `<script>listener = {};<`+`/script>`); | ||
let w2 = await createIframe(t, `<script>handleEvent = () => { throw new Error; };<`+`/script>`); | ||
let w3 = await createIframe(t); | ||
w.listener.handleEvent = w2.handleEvent; | ||
|
||
let target = new w3.EventTarget(); | ||
target.addEventListener('party', w.listener); | ||
let nextErrorPromise = nextErrorEvent([self, w, w2, w3]); | ||
target.dispatchEvent(new Event('party')); | ||
let errorEvent = await nextErrorPromise; | ||
if (errorEvent.error) { | ||
assert_true(errorEvent.error instanceof w2.Error, 'error should be an instance created inside the listener function'); | ||
} | ||
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'}`); | ||
}, 'exception thrown in event listener interface object should result in error event on listener\'s global'); | ||
</script> | ||
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.