Files
sousa-gecko/testing/web-platform/tests/html/semantics/popovers/toggleevent-interface.html
T
Daniel Clark 7597180318 Bug 2049711 [wpt PR 60816] - [Reference Target] Use relatedTarget for event propagation, a=testonly
Automatic update from web-platform-tests
[Reference Target] Use relatedTarget for event propagation

Replace the reference target handling in GetShadowRootParent with an
approach that uses Event's existing relatedTarget concept, per
discussion at [1].

The way this will work is that for CommandEvent, ToggleEvent,
SubmitEvent, and InterestEvent, instead of an internal source/submitter,
the events will use relatedTarget. The getters for these no longer need
individual retargeting since relatedTarget gets retargeted as part of
event dispatch. When relatedTarget is non-null for one of these event
types, we'll dispatch it as a composed event.

The result is that when the source/submitter is in a parent shadow
because of reference target, we'll bubble the event into that shadow
(but no further, due to the way relatedTarget already affects event
dispatch).

[1] https://github.com/whatwg/html/pull/10995#issuecomment-4572681552

Bug: 346835896
Change-Id: I6cb5cde907a3db8492795adb13e971bbd92f5ca5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7902895
Commit-Queue: Dan Clark <daniec@microsoft.com>
Reviewed-by: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1650570}

--

wpt-commits: 9911aea5c6a42d47b89c88d43e91ce04d4f1099f
wpt-pr: 60816
2026-06-25 17:03:24 +00:00

223 lines
6.9 KiB
HTML

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" href="mailto:masonf@chromium.org">
<link rel=help href="https://open-ui.org/components/popover.research.explainer">
<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(function() {
var event = new ToggleEvent("");
assert_true(event instanceof window.ToggleEvent);
}, "the event is an instance of ToggleEvent");
test(function() {
var event = new ToggleEvent("");
assert_true(event instanceof window.Event);
}, "the event inherts from Event");
test(function() {
assert_throws_js(TypeError, function() {
new ToggleEvent();
}, 'First argument (type) is required, so was expecting a TypeError.');
}, 'Missing type argument');
test(function() {
var event = new ToggleEvent("test");
assert_equals(event.type, "test");
}, "type argument is string");
test(function() {
var event = new ToggleEvent(null);
assert_equals(event.type, "null");
}, "type argument is null");
test(function() {
var event = new ToggleEvent(undefined);
assert_equals(event.type, "undefined");
}, "event type set to undefined");
test(function() {
var event = new ToggleEvent("test");
assert_equals(event.oldState, "");
}, "oldState has default value of empty string");
test(function() {
var event = new ToggleEvent("test");
assert_readonly(event, "oldState", "readonly attribute value");
}, "oldState is readonly");
test(function() {
var event = new ToggleEvent("test");
assert_equals(event.newState, "");
}, "newState has default value of empty string");
test(function() {
var event = new ToggleEvent("test");
assert_readonly(event, "newState", "readonly attribute value");
}, "newState is readonly");
test(function() {
var event = new ToggleEvent("test", null);
assert_equals(event.oldState, "");
assert_equals(event.newState, "");
}, "ToggleEventInit argument is null");
test(function() {
var event = new ToggleEvent("test", undefined);
assert_equals(event.oldState, "");
assert_equals(event.newState, "");
}, "ToggleEventInit argument is undefined");
test(function() {
var event = new ToggleEvent("test", {});
assert_equals(event.oldState, "");
assert_equals(event.newState, "");
}, "ToggleEventInit argument is empty dictionary");
test(function() {
var event = new ToggleEvent("test", {oldState: "sample"});
assert_equals(event.oldState, "sample");
}, "oldState set to 'sample'");
test(function() {
var event = new ToggleEvent("test", {oldState: undefined});
assert_equals(event.oldState, "");
}, "oldState set to undefined");
test(function() {
var event = new ToggleEvent("test", {oldState: null});
assert_equals(event.oldState, "null");
}, "oldState set to null");
test(function() {
var event = new ToggleEvent("test", {oldState: false});
assert_equals(event.oldState, "false");
}, "oldState set to false");
test(function() {
var event = new ToggleEvent("test", {oldState: true});
assert_equals(event.oldState, "true");
}, "oldState set to true");
test(function() {
var event = new ToggleEvent("test", {oldState: 0.5});
assert_equals(event.oldState, "0.5");
}, "oldState set to a number");
test(function() {
var event = new ToggleEvent("test", {oldState: []});
assert_equals(event.oldState, "");
}, "oldState set to []");
test(function() {
var event = new ToggleEvent("test", {oldState: [1, 2, 3]});
assert_equals(event.oldState, "1,2,3");
}, "oldState set to [1, 2, 3]");
test(function() {
var event = new ToggleEvent("test", {oldState: {sample: 0.5}});
assert_equals(event.oldState, "[object Object]");
}, "oldState set to an object");
test(function() {
var event = new ToggleEvent("test",
{oldState: {valueOf: function () { return 'sample'; }}});
assert_equals(event.oldState, "[object Object]");
}, "oldState set to an object with a valueOf function");
test(function() {
var eventInit = {oldState: "sample",newState: "sample2"};
var event = new ToggleEvent("test", eventInit);
assert_equals(event.oldState, "sample");
assert_equals(event.newState, "sample2");
}, "ToggleEventInit properties set value");
test(function() {
var eventInit = {oldState: "open",newState: "closed"};
var event = new ToggleEvent("beforetoggle", eventInit);
assert_equals(event.oldState, "open");
assert_equals(event.newState, "closed");
}, "ToggleEventInit properties set value 2");
test(function() {
var eventInit = {oldState: "closed",newState: "open"};
var event = new ToggleEvent("toggle", eventInit);
assert_equals(event.oldState, "closed");
assert_equals(event.newState, "open");
}, "ToggleEventInit properties set value 3");
test(function() {
var eventInit = {oldState: "open",newState: "open"};
var event = new ToggleEvent("beforetoggle", eventInit);
assert_equals(event.oldState, "open");
assert_equals(event.newState, "open");
}, "ToggleEventInit properties set value 4");
test(function() {
const div = document.createElement('div');
const eventInit = {source: div};
const event = new ToggleEvent('beforetoggle', eventInit);
assert_equals(event.source, div);
}, 'ToggleEventInit with source.');
test(function() {
const div = document.createElement('div');
const eventInit = {source: div};
const event = new ToggleEvent('beforetoggle', eventInit);
assert_equals(event.relatedTarget, undefined);
}, 'ToggleEvent doesn\'t expose relatedTarget property.');
test(function() {
var event = new ToggleEvent("test", {newState: "sample"});
assert_equals(event.newState, "sample");
}, "newState set to 'sample'");
test(function() {
var event = new ToggleEvent("test", {newState: undefined});
assert_equals(event.newState, "");
}, "newState set to undefined");
test(function() {
var event = new ToggleEvent("test", {newState: null});
assert_equals(event.newState, "null");
}, "newState set to null");
test(function() {
var event = new ToggleEvent("test", {newState: false});
assert_equals(event.newState, "false");
}, "newState set to false");
test(function() {
var event = new ToggleEvent("test", {newState: true});
assert_equals(event.newState, "true");
}, "newState set to true");
test(function() {
var event = new ToggleEvent("test", {newState: 0.5});
assert_equals(event.newState, "0.5");
}, "newState set to a number");
test(function() {
var event = new ToggleEvent("test", {newState: []});
assert_equals(event.newState, "");
}, "newState set to []");
test(function() {
var event = new ToggleEvent("test", {newState: [1, 2, 3]});
assert_equals(event.newState, "1,2,3");
}, "newState set to [1, 2, 3]");
test(function() {
var event = new ToggleEvent("test", {newState: {sample: 0.5}});
assert_equals(event.newState, "[object Object]");
}, "newState set to an object");
test(function() {
var event = new ToggleEvent("test",
{newState: {valueOf: function () { return 'sample'; }}});
assert_equals(event.newState, "[object Object]");
}, "newState set to an object with a valueOf function");
</script>