Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get started cleaning up interesttarget implementation [1/N] #50159

Merged
merged 1 commit into from
Jan 18, 2025
Merged

Get started cleaning up interesttarget implementation [1/N] #50159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 0 additions & 78 deletions html/semantics/the-button-element/interest-target/interestelement-interface.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,82 +84,4 @@
"interestTargetElement attribute value must be an instance of Element",
);
}, "interestTargetElement throws error on assignment of non Element");

test(function () {
assert_false(buttonInvoker.hasAttribute("interestaction"));
assert_equals(buttonInvoker.interestAction, "");
assert_false(aInvoker.hasAttribute("interestaction"));
assert_equals(aInvoker.interestAction, "");
assert_false(inputInvoker.hasAttribute("interestaction"));
assert_equals(inputInvoker.interestAction, "");
}, "interestAction reflects '' when attribute not present");

test(function () {
buttonInvoker.setAttribute("interestaction", "");
assert_equals(buttonInvoker.getAttribute("interestaction"), "");
assert_equals(buttonInvoker.interestAction, "");
aInvoker.setAttribute("interestaction", "");
assert_equals(aInvoker.getAttribute("interestaction"), "");
assert_equals(aInvoker.interestAction, "");
inputInvoker.setAttribute("interestaction", "");
assert_equals(inputInvoker.getAttribute("interestaction"), "");
assert_equals(inputInvoker.interestAction, "");
}, "interestAction reflects '' when attribute empty, setAttribute version");

test(function () {
buttonInvoker.interestAction = "";
assert_equals(buttonInvoker.getAttribute("interestaction"), "");
assert_equals(buttonInvoker.interestAction, "");
aInvoker.interestAction = "";
assert_equals(aInvoker.getAttribute("interestaction"), "");
assert_equals(aInvoker.interestAction, "");
inputInvoker.interestAction = "";
assert_equals(inputInvoker.getAttribute("interestaction"), "");
assert_equals(inputInvoker.interestAction, "");
}, "interestAction reflects '' when attribute empty, IDL setter version");

test(function () {
buttonInvoker.interestAction = "fooBarBaz";
assert_equals(buttonInvoker.getAttribute("interestaction"), "fooBarBaz");
assert_equals(buttonInvoker.interestAction, "fooBarBaz");
aInvoker.interestAction = "fooBarBaz";
assert_equals(aInvoker.getAttribute("interestaction"), "fooBarBaz");
assert_equals(aInvoker.interestAction, "fooBarBaz");
inputInvoker.interestAction = "fooBarBaz";
assert_equals(inputInvoker.getAttribute("interestaction"), "fooBarBaz");
assert_equals(inputInvoker.interestAction, "fooBarBaz");
}, "interestAction reflects same casing");

test(function () {
buttonInvoker.interestAction = [];
assert_equals(buttonInvoker.getAttribute("interestaction"), "");
assert_equals(buttonInvoker.interestAction, "");
aInvoker.interestAction = [];
assert_equals(aInvoker.getAttribute("interestaction"), "");
assert_equals(aInvoker.interestAction, "");
inputInvoker.interestAction = [];
assert_equals(inputInvoker.getAttribute("interestaction"), "");
assert_equals(inputInvoker.interestAction, "");
}, "interestAction reflects '' when attribute set to []");

test(function () {
buttonInvoker.interestAction = [1, 2, 3];
assert_equals(buttonInvoker.getAttribute("interestaction"), "1,2,3");
assert_equals(buttonInvoker.interestAction, "1,2,3");
aInvoker.interestAction = [1, 2, 3];
assert_equals(aInvoker.getAttribute("interestaction"), "1,2,3");
assert_equals(aInvoker.interestAction, "1,2,3");
inputInvoker.interestAction = [1, 2, 3];
assert_equals(inputInvoker.getAttribute("interestaction"), "1,2,3");
assert_equals(inputInvoker.interestAction, "1,2,3");
}, "interestAction reflects tostring value");

test(function () {
buttonInvoker.interestAction = {};
assert_equals(buttonInvoker.interestAction, "[object Object]");
aInvoker.interestAction = {};
assert_equals(aInvoker.interestAction, "[object Object]");
inputInvoker.interestAction = {};
assert_equals(inputInvoker.interestAction, "[object Object]");
}, "interestAction reflects tostring value 2");
</script>
84 changes: 28 additions & 56 deletions ...semantics/the-button-element/interest-target/interestevent-dispatch-shadow.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
<!doctype html>
<!DOCTYPE html>
<meta charset="utf-8" />
<meta name="author" title="Keith Cirkel" href="mailto:[email protected]" />
<meta name="author" title="Luke Warlow" href="mailto:[email protected]" />
<link rel="help" href="https://open-ui.org/components/interest-invokers.explainer/" />
<link
rel="help"
href="https://open-ui.org/components/interest-invokers.explainer/"
/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
Expand All @@ -20,63 +23,35 @@
const slot = shadow.appendChild(document.createElement("slot"));
let childEvent = null;
let childEventTarget = null;
let childEventInvoker = null;
let childEventSource = null;
let hostEvent = null;
let hostEventTarget = null;
let hostEventInvoker = null;
slot.addEventListener(
"interest",
(e) => {
let hostEventSource = null;
slot.addEventListener("interest", (e) => {
childEvent = e;
childEventTarget = e.target;
childEventInvoker = e.invoker;
},
{ once: true },
);
host.addEventListener(
"interest",
(e) => {
childEventSource = e.source;
}, { once: true });
host.addEventListener("interest", (e) => {
hostEvent = e;
hostEventTarget = e.target;
hostEventInvoker = e.invoker;
},
{ once: true },
);
hostEventSource = e.source;
}, { once: true });
const event = new InterestEvent("interest", {
bubbles: true,
invoker: slot,
source: slot,
composed: true,
});
slot.dispatchEvent(event);
assert_true(childEvent instanceof InterestEvent, "slot saw interest event");
assert_equals(
childEventTarget,
slot,
"target is child inside shadow boundary",
);
assert_equals(
childEventInvoker,
slot,
"invoker is child inside shadow boundary",
);
assert_equals(
hostEvent,
childEvent,
"event dispatch propagates across shadow boundary",
);
assert_equals(
hostEventTarget,
host,
"target is retargeted to shadowroot host",
);
assert_equals(
hostEventInvoker,
host,
"invoker is retargeted to shadowroot host",
);
}, "InterestEvent propagates across shadow boundaries retargeting invoker");
assert_equals(childEventTarget, slot, "target is child inside shadow boundary");
assert_equals(childEventSource, slot, "source is child inside shadow boundary");
assert_equals(hostEvent, childEvent, "event dispatch propagates across shadow boundary");
assert_equals(hostEventTarget, host, "target is retargeted to shadowroot host");
assert_equals(hostEventSource, host, "source is retargeted to shadowroot host");
}, "InterestEvent propagates across shadow boundaries retargeting invoker source");

test(function (t) {
promise_test(async (t) => {
const host = document.createElement("div");
document.body.append(host);
t.add_cleanup(() => host.remove());
Expand All @@ -86,19 +61,16 @@
button.interestTargetElement = interestee;
let event = null;
let eventTarget = null;
let eventInvoker = null;
interestee.addEventListener(
"interest",
(e) => {
let eventSource = null;
interestee.addEventListener("interest", (e) => {
event = e;
eventTarget = e.target;
eventInvoker = e.invoker;
},
{ once: true },
);
button.focus();
eventSource = e.source;
},{ once: true });
await hoverOver(button);
assert_true(!!event,"InterestEvent gets fired");
assert_true(event instanceof InterestEvent);
assert_equals(eventTarget, interestee, "target is interestee");
assert_equals(eventInvoker, host, "interestee is host");
assert_equals(eventSource, host, "interestee is host");
}, "cross shadow InterestEvent retargets interestee to host element");
</script>
132 changes: 30 additions & 102 deletions html/semantics/the-button-element/interest-target/interestevent-interface.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,152 +16,80 @@
<script>
test(function () {
const event = new InterestEvent("test");
assert_equals(event.action, "");
assert_readonly(event, "action", "readonly attribute value");
}, "action is a readonly defaulting to ''");
assert_equals(event.source, null);
assert_readonly(event, "source", "readonly attribute value");
}, "source is readonly defaulting to null");

test(function () {
const event = new InterestEvent("test");
assert_equals(event.invoker, null);
assert_readonly(event, "invoker", "readonly attribute value");
}, "invoker is readonly defaulting to null");

test(function () {
const event = new InterestEvent("test", { action: "sAmPle" });
assert_equals(event.action, "sAmPle");
}, "action reflects initialized attribute");

test(function () {
const event = new InterestEvent("test", { action: undefined });
assert_equals(event.action, "");
}, "action set to undefined");

test(function () {
const event = new InterestEvent("test", { action: null });
assert_equals(event.action, "null");
}, "action set to null");

test(function () {
const event = new InterestEvent("test", { action: false });
assert_equals(event.action, "false");
}, "action set to false");

test(function () {
const event = new InterestEvent("test", { action: "" });
assert_equals(event.action, "");
}, "action explicitly set to empty string");

test(function () {
const event = new InterestEvent("test", { action: true });
assert_equals(event.action, "true");
}, "action set to true");

test(function () {
const event = new InterestEvent("test", { action: 0.5 });
assert_equals(event.action, "0.5");
}, "action set to a number");

test(function () {
const event = new InterestEvent("test", { action: [] });
assert_equals(event.action, "");
}, "action set to []");

test(function () {
const event = new InterestEvent("test", { action: [1, 2, 3] });
assert_equals(event.action, "1,2,3");
}, "action set to [1, 2, 3]");

test(function () {
const event = new InterestEvent("test", { action: { sample: 0.5 } });
assert_equals(event.action, "[object Object]");
}, "action set to an object");

test(function () {
const event = new InterestEvent("test", {
action: {
toString() {
return "sample";
},
},
});
assert_equals(event.action, "sample");
}, "action set to an object with a toString function");

test(function () {
const eventInit = { action: "sample", invoker: document.body };
const eventInit = { source: document.body };
const event = new InterestEvent("test", eventInit);
assert_equals(event.action, "sample");
assert_equals(event.invoker, document.body);
}, "InterestEventInit properties set value");
assert_equals(event.source, document.body);
}, "InterestEventInit properties set value (manual event)");

test(function () {
const eventInit = {
action: "open",
invoker: document.getElementById("div"),
source: document.getElementById("div"),
};
const event = new InterestEvent("beforetoggle", eventInit);
assert_equals(event.action, "open");
assert_equals(event.invoker, document.getElementById("div"));
}, "InterestEventInit properties set value 2");
assert_equals(event.source, document.getElementById("div"));
}, "InterestEventInit properties set value (beforetoggle event)");

test(function () {
const eventInit = {
action: "closed",
invoker: document.getElementById("button"),
source: document.getElementById("button"),
};
const event = new InterestEvent("toggle", eventInit);
assert_equals(event.action, "closed");
assert_equals(event.invoker, document.getElementById("button"));
}, "InterestEventInit properties set value 3");
assert_equals(event.source, document.getElementById("button"));
}, "InterestEventInit properties set value (toggle event)");

test(function () {
const event = new InterestEvent("test", { invoker: undefined });
assert_equals(event.invoker, null);
}, "invoker set to undefined");
const event = new InterestEvent("test", { source: undefined });
assert_equals(event.source, null);
}, "source set to undefined");

test(function () {
const event = new InterestEvent("test", { invoker: null });
assert_equals(event.invoker, null);
}, "invoker set to null");
const event = new InterestEvent("test", { source: null });
assert_equals(event.source, null);
}, "source set to null");

test(function () {
assert_throws_js(
TypeError,
function () {
new InterestEvent("test", { invoker: false });
new InterestEvent("test", { source: false });
},
"invoker is not an object",
"source is not an object",
);
}, "invoker set to false");
}, "source set to false");

test(function () {
assert_throws_js(
TypeError,
function () {
const event = new InterestEvent("test", { invoker: true });
const event = new InterestEvent("test", { source: true });
},
"invoker is not an object",
"source is not an object",
);
}, "invoker set to true");
}, "source set to true");

test(function () {
assert_throws_js(
TypeError,
function () {
const event = new InterestEvent("test", { invoker: {} });
const event = new InterestEvent("test", { source: {} });
},
"invoker is not an object",
"source is not an object",
);
}, "invoker set to {}");
}, "source set to {}");

test(function () {
assert_throws_js(
TypeError,
function () {
const eventInit = { action: "closed", invoker: new XMLHttpRequest() };
const eventInit = { source: new XMLHttpRequest() };
const event = new InterestEvent("toggle", eventInit);
},
"invoker is not an Element",
"source is not an Element",
);
}, "invoker set to non-Element EventTarget");
}, "source set to non-Element EventTarget");
</script>
Loading
Loading