Skip to content

Commit 8380ac2

Browse files
keithamuschromium-wpt-export-bot
keithamus
authored and
chromium-wpt-export-bot
committed
Add invoketarget logic for popovers in button DefaultEventHandler
This adds logic on how buttons with an invoketarget pointing to an element with `popover` should behave, based on the Invokers proposal. See explainer section here: https://open-ui.org/components/invokers.explainer/#defaults. See related spec PR here: whatwg/html#9875 This introduces new behavior just within the HTML Form Control `DefaultEventHandler` function such that: - If an `invoketarget` points to an element with `popover` - If the `invokeaction` is `auto` or `togglePopover`, try to toggle the popover - If the `invokeaction` is `hidePopover`, try to hide the popover - If the `invokeaction` is `showPopover`, try to show the popover If the `invokeaction` is none of the above, then it will fall through the to `HandleInvokeInternal` which is passed the lowercased atom so element subclasses can handle their individual behaviors. Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1494737 Change-Id: Id2ab6faf8782a0fe0ba5c9f05ff562fee640f8b0
1 parent c973f6f commit 8380ac2

File tree

1 file changed

+157
-0
lines changed

1 file changed

+157
-0
lines changed

‎html/semantics/invokers/invoketarget-on-popover-behavior.tentative.html

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!doctype html>
2+
<meta charset="utf-8" />
3+
<meta name="author" title="Keith Cirkel" href="mailto:keithamus@github.com" />
4+
<link rel="help" href="https://open-ui.org/components/invokers.explainer/" />
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/resources/testdriver.js"></script>
8+
<script src="/resources/testdriver-actions.js"></script>
9+
<script src="/resources/testdriver-vendor.js"></script>
10+
<script src="resources/invoker-utils.js"></script>
11+
12+
<div id="invokee" popover>
13+
<button id="invokerbutton2" invoketarget="invokee"></button>
14+
</div>
15+
<button id="invokerbutton" invoketarget="invokee"></button>
16+
17+
<script>
18+
promise_test(async function (t) {
19+
assert_false(invokee.matches(":popover-open"));
20+
await clickOn(invokerbutton);
21+
t.add_cleanup(() => invokee.hidePopover());
22+
assert_true(invokee.matches(":popover-open"));
23+
}, "invoking (as auto) closed popover opens");
24+
25+
promise_test(async function (t) {
26+
assert_false(invokee.matches(":popover-open"));
27+
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
28+
once: true,
29+
});
30+
await clickOn(invokerbutton);
31+
t.add_cleanup(() => invokee.hidePopover());
32+
assert_false(invokee.matches(":popover-open"));
33+
}, "invoking (as auto) closed popover with preventDefault does not open");
34+
35+
promise_test(async function (t) {
36+
invokee.showPopover();
37+
assert_true(invokee.matches(":popover-open"));
38+
await clickOn(invokerbutton2);
39+
assert_false(invokee.matches(":popover-open"));
40+
}, "invoking (as auto) open popover closes");
41+
42+
promise_test(async function (t) {
43+
invokee.showPopover();
44+
t.add_cleanup(() => invokee.hidePopover());
45+
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
46+
once: true,
47+
});
48+
assert_true(invokee.matches(":popover-open"));
49+
await clickOn(invokerbutton2);
50+
assert_true(invokee.matches(":popover-open"));
51+
}, "invoking (as auto) open popover with preventDefault does not close");
52+
53+
promise_test(async function (t) {
54+
assert_false(invokee.matches(":popover-open"));
55+
invokerbutton.setAttribute("invokeaction", "tOgGlEpOpOvEr");
56+
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
57+
await clickOn(invokerbutton);
58+
t.add_cleanup(() => invokee.hidePopover());
59+
assert_true(invokee.matches(":popover-open"));
60+
}, "invoking (as togglepopover) closed popover opens");
61+
62+
promise_test(async function (t) {
63+
assert_false(invokee.matches(":popover-open"));
64+
invokerbutton.setAttribute("invokeaction", "tOgGlEpOpOvEr");
65+
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
66+
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
67+
once: true,
68+
});
69+
await clickOn(invokerbutton);
70+
t.add_cleanup(() => invokee.hidePopover());
71+
assert_false(invokee.matches(":popover-open"));
72+
}, "invoking (as togglepopover) closed popover with preventDefault does not open");
73+
74+
promise_test(async function (t) {
75+
invokee.showPopover();
76+
invokerbutton2.setAttribute("invokeaction", "tOgGlEpOpOvEr");
77+
t.add_cleanup(() => invokerbutton2.removeAttribute("invokeaction"));
78+
assert_true(invokee.matches(":popover-open"));
79+
await clickOn(invokerbutton2);
80+
assert_false(invokee.matches(":popover-open"));
81+
}, "invoking (as togglepopover) open popover closes");
82+
83+
promise_test(async function (t) {
84+
invokee.showPopover();
85+
t.add_cleanup(() => invokee.hidePopover());
86+
invokerbutton2.setAttribute("invokeaction", "tOgGlEpOpOvEr");
87+
t.add_cleanup(() => invokerbutton2.removeAttribute("invokeaction"));
88+
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
89+
once: true,
90+
});
91+
assert_true(invokee.matches(":popover-open"));
92+
await clickOn(invokerbutton2);
93+
assert_true(invokee.matches(":popover-open"));
94+
}, "invoking (as togglepopover) open popover with preventDefault does not close");
95+
96+
promise_test(async function (t) {
97+
invokerbutton.setAttribute("invokeaction", "sHowPoPoVeR");
98+
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
99+
assert_false(invokee.matches(":popover-open"));
100+
await clickOn(invokerbutton);
101+
t.add_cleanup(() => invokee.hidePopover());
102+
assert_true(invokee.matches(":popover-open"));
103+
}, "invoking (as showpopover) closed popover opens");
104+
105+
promise_test(async function (t) {
106+
invokerbutton.setAttribute("invokeaction", "sHowPoPoVeR");
107+
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
108+
invokee.showPopover();
109+
assert_true(invokee.matches(":popover-open"));
110+
await clickOn(invokerbutton);
111+
t.add_cleanup(() => invokee.hidePopover());
112+
assert_true(invokee.matches(":popover-open"));
113+
}, "invoking (as showpopover) open popover is noop");
114+
115+
promise_test(async function (t) {
116+
invokerbutton.setAttribute("invokeaction", "sHowPoPoVeR");
117+
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
118+
assert_false(invokee.matches(":popover-open"));
119+
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
120+
once: true,
121+
});
122+
await clickOn(invokerbutton);
123+
t.add_cleanup(() => invokee.hidePopover());
124+
assert_false(invokee.matches(":popover-open"));
125+
}, "invoking (as showpopover) closed popover with preventDefault does not open");
126+
127+
promise_test(async function (t) {
128+
invokerbutton.setAttribute("invokeaction", "HiDePoPoVeR");
129+
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
130+
assert_false(invokee.matches(":popover-open"));
131+
await clickOn(invokerbutton);
132+
assert_false(invokee.matches(":popover-open"));
133+
}, "invoking (as hidepopover) closed popover is noop");
134+
135+
promise_test(async function (t) {
136+
invokerbutton2.setAttribute("invokeaction", "HiDePoPoVeR");
137+
t.add_cleanup(() => invokerbutton2.removeAttribute("invokeaction"));
138+
invokee.showPopover();
139+
assert_true(invokee.matches(":popover-open"));
140+
await clickOn(invokerbutton2);
141+
t.add_cleanup(() => invokee.hidePopover());
142+
assert_false(invokee.matches(":popover-open"));
143+
}, "invoking (as hidepopover) open popover closes");
144+
145+
promise_test(async function (t) {
146+
invokerbutton2.setAttribute("invokeaction", "HiDePoPoVeR");
147+
t.add_cleanup(() => invokerbutton2.removeAttribute("invokeaction"));
148+
invokee.showPopover();
149+
t.add_cleanup(() => invokee.hidePopover());
150+
assert_true(invokee.matches(":popover-open"));
151+
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
152+
once: true,
153+
});
154+
await clickOn(invokerbutton2);
155+
assert_true(invokee.matches(":popover-open"));
156+
}, "invoking (as hidepopover) open popover with preventDefault does not close");
157+
</script>

0 commit comments

Comments
 (0)