Skip to content

Commit

Permalink
events: reset event state after dispatch
Browse files Browse the repository at this point in the history
Fixes #54617
  • Loading branch information
KhafraDev committed Aug 29, 2024
1 parent beabcec commit 79f91be
Show file tree
Hide file tree
Showing 40 changed files with 2,694 additions and 566 deletions.
2 changes: 1 addition & 1 deletion lib/internal/event_target.js
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ class Event {
get currentTarget() {
if (!isEvent(this))
throw new ERR_INVALID_THIS('Event');
return this[kTarget];
return this[kIsBeingDispatched] ? this[kTarget] : null;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion test/fixtures/wpt/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Last update:
- compression: https://github.com/web-platform-tests/wpt/tree/5aa50dd415/compression
- console: https://github.com/web-platform-tests/wpt/tree/767ae35464/console
- dom/abort: https://github.com/web-platform-tests/wpt/tree/d1f1ecbd52/dom/abort
- dom/events: https://github.com/web-platform-tests/wpt/tree/ab8999891c/dom/events
- dom/events: https://github.com/web-platform-tests/wpt/tree/0a811c5161/dom/events
- encoding: https://github.com/web-platform-tests/wpt/tree/5aa50dd415/encoding
- fetch/data-urls/resources: https://github.com/web-platform-tests/wpt/tree/7c79d998ff/fetch/data-urls/resources
- FileAPI: https://github.com/web-platform-tests/wpt/tree/cceaf3628d/FileAPI
Expand Down
56 changes: 56 additions & 0 deletions test/fixtures/wpt/dom/events/Event-dispatch-click.html
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,22 @@
child.dispatchEvent(new MouseEvent("click", {bubbles:true}))
}, "pick the first with activation behavior <a href>")

async_test(function(t) {
var input = document.createElement("input")
input.type = "radio"
dump.appendChild(input)
input.onclick = t.step_func(function() {
assert_false(input.checked, "input pre-click must not be triggered")
})
var child = input.appendChild(document.createElement("input"))
child.type = "radio"
child.onclick = t.step_func(function() {
assert_true(child.checked, "child pre-click must be triggered")
})
child.dispatchEvent(new MouseEvent("click", {bubbles:true}))
t.done()
}, "pick the first with activation behavior <input type=radio>")

async_test(function(t) {
var input = document.createElement("input")
input.type = "checkbox"
Expand Down Expand Up @@ -173,6 +189,46 @@
t.done()
}, "disabled checkbox still has activation behavior, part 2")

async_test(function(t) {
var state = "start"

var form = document.createElement("form")
form.onsubmit = t.step_func(() => {
if(state == "start" || state == "radio") {
state = "failure"
} else if(state == "form") {
state = "done"
}
return false
})
dump.appendChild(form)
var button = form.appendChild(document.createElement("button"))
button.type = "submit"
var radio = button.appendChild(document.createElement("input"))
radio.type = "radio"
radio.onclick = t.step_func(() => {
if(state == "start") {
assert_unreached()
} else if(state == "radio") {
assert_true(radio.checked)
}
})
radio.disabled = true
radio.click()
assert_equals(state, "start")

state = "radio"
radio.disabled = false
radio.click()
assert_equals(state, "radio")

state = "form"
button.click()
assert_equals(state, "done")

t.done()
}, "disabled radio still has activation behavior")

async_test(function(t) {
var input = document.createElement("input")
input.type = "checkbox"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<body>
<script>
// HTML elements that can be disabled
const formElements = ["button", "fieldset", "input", "select", "textarea"];
const formElements = ["button", "input", "select", "textarea"];

test(() => {
for (const localName of formElements) {
Expand Down
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>
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>
17 changes: 17 additions & 0 deletions test/fixtures/wpt/dom/events/EventTarget-constructible.any.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,23 @@ test(() => {
assert_equals(callCount, 2);
}, "A constructed EventTarget can be used as expected");

test(() => {
const target = new EventTarget();
const event = new Event("foo");

function listener(e) {
assert_equals(e, event);
assert_equals(e.target, target);
assert_equals(e.currentTarget, target);
assert_array_equals(e.composedPath(), [target]);
}
target.addEventListener("foo", listener, { once: true });
target.dispatchEvent(event);
assert_equals(event.target, target);
assert_equals(event.currentTarget, null);
assert_array_equals(event.composedPath(), []);
}, "A constructed EventTarget implements dispatch correctly");

test(() => {
class NicerEventTarget extends EventTarget {
on(...args) {
Expand Down
10 changes: 10 additions & 0 deletions test/fixtures/wpt/dom/events/event-global.html
Original file line number Diff line number Diff line change
Expand Up @@ -114,4 +114,14 @@

target.dispatchEvent(new Event("click"));
}, "window.event is set to the current event, which is the event passed to dispatch");

async_test(t => {
let target = new XMLHttpRequest();

target.onload = t.step_func_done(e => {
assert_equals(e, window.event);
});

target.dispatchEvent(new Event("load"));
}, "window.event is set to the current event, which is the event passed to dispatch (2)");
</script>
Loading

0 comments on commit 79f91be

Please sign in to comment.