From 0c14f10fe44bc83567d57829271bd9fcb97aef39 Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Thu, 14 Dec 2023 17:32:56 +0000 Subject: [PATCH] Bug 1867556 [wpt PR 43455] - DOM: Observable EventTarget integration 1/N, a=testonly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Automatic update from web-platform-tests DOM: Observable EventTarget integration 1/N This CL implements "limited" and "leaky" EventTarget integration with the Observable API. See below for what "limited" and "leaky" mean. Concretely, this involves introducing the `on()` method to the EventTarget interface, so that all EventTargets can return Observables that listen for events. This is the part that really makes Observables a "better addEventListener()". This is the first instance of a natively-constructed Observable, as opposed to a JS-constructed Observable. This means the subscription callback passed to the Observable constructor is not just a JS callback function with user-defined code, but instead is a C++ delegate class, called `SubscribeDelegate` which has its first concrete implementation provided by EventTarget (in event_target.cc). The concrete implementation of this interface that this CL introduces, adds an event listener to the given EventTarget, upon subscription. The events are forwarded to the Subscriber's `next()` method. This is what unlocks more ergonomic event handling with the composable Observable primitive and all of its (coming) operators. 1. The EventTarget integration is considered "limited" because we do not support any of the `AddEventListenerOptions` yet, as of this CL. A subsequent CL will add support for a more restricted version of the `AddEventListenerOptions`, called `ObservableEventListenerOptions`, which does not include a `once` option, or an `AbortSignal`, since Observable operators and subscription is responsible for managing those aspects. Concretely, an `ObservableEventListenerOptions` will resolve to an `AddEventListenerOptionsResolved` accordingly. See: - https://github.com/WICG/observable/issues/66 - https://github.com/WICG/observable/pull/67 - https://github.com/WICG/observable/issues/65 2. The EventTarget integration is considered "leaky" as of this CL, because there is currently no way to remove an event listener added by an EventTarget-vended Observable. This will come in a subsequent CL, which will pass the test that is currently failing in this CL. See https://github.com/WICG/observable/issues/75 for discussion about tying the subscription termination to removing an event listener. From a technical perspective, this is pretty easy — it involves adding an abort algorithm to `Subscriber#signal` (which has already been wired up properly by now!) that removes the given per-Subscription `ObservableEventListener` NativeEventListener from the associated EventTarget. That implementation has already been sketched out in https://crrev.com/c/4262153 and the design doc. It will included in a follow-up CL, to reduce the complexity of this one. For WPTs: Co-authored-by: ben@benlesh.com R=masonf@chromium.org Bug: 1485981 Change-Id: Iafeddb0894b8eed2be1d95c181fc44d7650c0d47 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5073394 Reviewed-by: Mason Freed Commit-Queue: Dominic Farolino Cr-Commit-Position: refs/heads/main@{#1237501} -- wpt-commits: aeeea4221bce5c44edeb8adad0296bbd68a4af71 wpt-pr: 43455 --- .../observable-constructor.window.js | 27 +++++++ .../tentative/observable-event-target.any.js | 71 +++++++++++++++++++ .../trusted-types-event-handlers.html | 4 +- 3 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 testing/web-platform/tests/dom/observable/tentative/observable-event-target.any.js diff --git a/testing/web-platform/tests/dom/observable/tentative/observable-constructor.window.js b/testing/web-platform/tests/dom/observable/tentative/observable-constructor.window.js index 34776f8fc56b5..d2b597c819054 100644 --- a/testing/web-platform/tests/dom/observable/tentative/observable-constructor.window.js +++ b/testing/web-platform/tests/dom/observable/tentative/observable-constructor.window.js @@ -98,3 +98,30 @@ promise_test(async t => { assert_array_equals(results, ["detached"], "Subscribe callback is never invoked"); }, "Cannot subscribe to an Observable in a detached document"); + +promise_test(async t => { + // Make this available off the global so the child can reach it. + window.results = []; + const contentWin = await loadIframeAndReturnContentWindow(); + + contentWin.eval(` + const parentResults = parent.results; + const event_target = new EventTarget(); + // Set up two event listeners, both of which will mutate |parentResults|: + // 1. A traditional event listener + // 2. An observable + event_target.addEventListener('customevent', e => parentResults.push(e)); + const source = event_target.on('customevent'); + source.subscribe(e => parentResults.push(e)); + + // Detach the iframe and fire an event at the event target. The parent will + // confirm that the observable's next handler did not get invoked, because + // the window is detached. + const event = new Event('customevent'); + window.frameElement.remove(); + parentResults.push('detached'); + event_target.dispatchEvent(event); + `); + + assert_array_equals(results, ["detached"], "Subscribe callback is never invoked"); +}, "Observable from EventTarget does not get notified for events in detached documents"); diff --git a/testing/web-platform/tests/dom/observable/tentative/observable-event-target.any.js b/testing/web-platform/tests/dom/observable/tentative/observable-event-target.any.js new file mode 100644 index 0000000000000..0f7ace2acc079 --- /dev/null +++ b/testing/web-platform/tests/dom/observable/tentative/observable-event-target.any.js @@ -0,0 +1,71 @@ +test(() => { + const target = new EventTarget(); + assert_implements(target.on, "The EventTarget interface has an `on` method"); + assert_equals(typeof target.on, "function", + "EventTarget should have the on method"); + + const testEvents = target.on("test"); + assert_true(testEvents instanceof Observable, + "EventTarget.on returns an Observable"); + + const results = []; + testEvents.subscribe({ + next: value => results.push(value), + error: () => results.push("error"), + complete: () => results.push("complete"), + }); + + assert_array_equals(results, [], + "Observable does not emit events until event is fired"); + + const event = new Event("test"); + target.dispatchEvent(event); + assert_array_equals(results, [event]); + + target.dispatchEvent(event); + assert_array_equals(results, [event, event]); +}, "EventTarget.on() returns an Observable"); + +test(() => { + const target = new EventTarget(); + const testEvents = target.on("test"); + const ac = new AbortController(); + const results = []; + testEvents.subscribe({ + next: (value) => results.push(value), + error: () => results.push('error'), + complete: () => results.complete('complete'), + }, { signal: ac.signal }); + + assert_array_equals(results, [], + "Observable does not emit events until event is fired"); + + const event1 = new Event("test"); + const event2 = new Event("test"); + const event3 = new Event("test"); + target.dispatchEvent(event1); + target.dispatchEvent(event2); + + assert_array_equals(results, [event1, event2]); + + ac.abort(); + target.dispatchEvent(event3); + + assert_array_equals(results, [event1, event2], + "Aborting the subscription removes the event listener and stops the " + + "emission of events"); +}, "Aborting the subscription should stop the emission of events"); + +test(() => { + const target = new EventTarget(); + const testEvents = target.on("test"); + const results = []; + testEvents.subscribe(e => results.push(e)); + testEvents.subscribe(e => results.push(e)); + + const event1 = new Event("test"); + const event2 = new Event("test"); + target.dispatchEvent(event1); + target.dispatchEvent(event2); + assert_array_equals(results, [event1, event1, event2, event2]); +}, "EventTarget Observables can multicast subscriptions for event handling"); diff --git a/testing/web-platform/tests/trusted-types/trusted-types-event-handlers.html b/testing/web-platform/tests/trusted-types/trusted-types-event-handlers.html index 57f8d3d90c416..9dd7133cbb0b5 100644 --- a/testing/web-platform/tests/trusted-types/trusted-types-event-handlers.html +++ b/testing/web-platform/tests/trusted-types/trusted-types-event-handlers.html @@ -37,7 +37,9 @@ // element about which attributes it knows. const div = document.createElement("div"); for(name in div.__proto__) { - const should_be_event_handler = name.startsWith("on"); + // This captures all "on{foo}" handlers, but not "on" itself, which is an IDL + // attribute that returns an Observable. + const should_be_event_handler = name.startsWith("on") && name !== "on"; if (should_be_event_handler) { test(t => { assert_throws_js(TypeError,