Skip to content

Commit

Permalink
Bug 1860498 [wpt PR 42679] - Add invoketarget logic for popovers in b…
Browse files Browse the repository at this point in the history 
…utton DefaultEventHandler, a=testonly

Automatic update from web-platform-tests
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: 1494737
Change-Id: Id2ab6faf8782a0fe0ba5c9f05ff562fee640f8b0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4964940
Reviewed-by: Joey Arhar <jarharchromium.org>
Reviewed-by: Mason Freed <masonfchromium.org>
Commit-Queue: Luke <lukewarlow156gmail.com>
Cr-Commit-Position: refs/heads/main{#1215820}

--

wpt-commits: a86d7454b3b6c8e33fed6a05b08ff081d62bf680
wpt-pr: 42679

UltraBlame original commit: b27368ba33d1f944a4095e9da65a5ba0f9e7468c
  • Loading branch information
@marco-c
marco-c committed Nov 16, 2023
1 parent 2b6610d commit 64e7255
Showing 1 changed file with 193 additions and 0 deletions.
193 changes: 193 additions & 0 deletions ...eb-platform/tests/html/semantics/invokers/invoketarget-on-popover-behavior.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
<!doctype html>
<meta charset="utf-8" />
<meta name="author" title="Keith Cirkel" href="mailto:keithamus@github.com" />
<link rel="help" href="https://open-ui.org/components/invokers.explainer/" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/invoker-utils.js"></script>

<div id="invokee" popover>
<button id="invokerbutton2" invoketarget="invokee"></button>
</div>
<button id="invokerbutton" invoketarget="invokee"></button>

<script>
// auto

promise_test(async function (t) {
assert_false(invokee.matches(":popover-open"));
await clickOn(invokerbutton);
t.add_cleanup(() => invokee.hidePopover());
assert_true(invokee.matches(":popover-open"));
}, "invoking (as auto) closed popover opens");

promise_test(async function (t) {
assert_false(invokee.matches(":popover-open"));
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
once: true,
});
await clickOn(invokerbutton);
t.add_cleanup(() => invokee.hidePopover());
assert_false(invokee.matches(":popover-open"));
}, "invoking (as auto) closed popover with preventDefault does not open");

promise_test(async function (t) {
invokee.showPopover();
assert_true(invokee.matches(":popover-open"));
await clickOn(invokerbutton2);
assert_false(invokee.matches(":popover-open"));
}, "invoking (as auto) open popover closes");

promise_test(async function (t) {
invokee.showPopover();
t.add_cleanup(() => invokee.hidePopover());
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
once: true,
});
assert_true(invokee.matches(":popover-open"));
await clickOn(invokerbutton2);
assert_true(invokee.matches(":popover-open"));
}, "invoking (as auto) open popover with preventDefault does not close");

// togglepopover

promise_test(async function (t) {
assert_false(invokee.matches(":popover-open"));
invokerbutton.setAttribute("invokeaction", "togglepopover");
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
await clickOn(invokerbutton);
t.add_cleanup(() => invokee.hidePopover());
assert_true(invokee.matches(":popover-open"));
}, "invoking (as togglepopover) closed popover opens");

promise_test(async function (t) {
assert_false(invokee.matches(":popover-open"));
invokerbutton.setAttribute("invokeaction", "tOgGlEpOpOvEr");
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
await clickOn(invokerbutton);
t.add_cleanup(() => invokee.hidePopover());
assert_true(invokee.matches(":popover-open"));
}, "invoking (as togglepopover - case insensitive) closed popover opens");

promise_test(async function (t) {
assert_false(invokee.matches(":popover-open"));
invokerbutton.setAttribute("invokeaction", "togglepopover");
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
once: true,
});
await clickOn(invokerbutton);
t.add_cleanup(() => invokee.hidePopover());
assert_false(invokee.matches(":popover-open"));
}, "invoking (as togglepopover) closed popover with preventDefault does not open");

promise_test(async function (t) {
invokee.showPopover();
invokerbutton2.setAttribute("invokeaction", "togglepopover");
t.add_cleanup(() => invokerbutton2.removeAttribute("invokeaction"));
assert_true(invokee.matches(":popover-open"));
await clickOn(invokerbutton2);
assert_false(invokee.matches(":popover-open"));
}, "invoking (as togglepopover) open popover closes");

promise_test(async function (t) {
invokee.showPopover();
t.add_cleanup(() => invokee.hidePopover());
invokerbutton2.setAttribute("invokeaction", "togglepopover");
t.add_cleanup(() => invokerbutton2.removeAttribute("invokeaction"));
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
once: true,
});
assert_true(invokee.matches(":popover-open"));
await clickOn(invokerbutton2);
assert_true(invokee.matches(":popover-open"));
}, "invoking (as togglepopover) open popover with preventDefault does not close");

// showpopover

promise_test(async function (t) {
invokerbutton.setAttribute("invokeaction", "showpopover");
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
assert_false(invokee.matches(":popover-open"));
await clickOn(invokerbutton);
t.add_cleanup(() => invokee.hidePopover());
assert_true(invokee.matches(":popover-open"));
}, "invoking (as showpopover) closed popover opens");

promise_test(async function (t) {
invokerbutton.setAttribute("invokeaction", "sHoWpOpOvEr");
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
assert_false(invokee.matches(":popover-open"));
await clickOn(invokerbutton);
t.add_cleanup(() => invokee.hidePopover());
assert_true(invokee.matches(":popover-open"));
}, "invoking (as showpopover - case insensitive) closed popover opens");

promise_test(async function (t) {
invokerbutton.setAttribute("invokeaction", "showpopover");
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
invokee.showPopover();
assert_true(invokee.matches(":popover-open"));
await clickOn(invokerbutton);
t.add_cleanup(() => invokee.hidePopover());
assert_true(invokee.matches(":popover-open"));
}, "invoking (as showpopover) open popover is noop");

promise_test(async function (t) {
invokerbutton.setAttribute("invokeaction", "showpopover");
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
assert_false(invokee.matches(":popover-open"));
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
once: true,
});
await clickOn(invokerbutton);
t.add_cleanup(() => invokee.hidePopover());
assert_false(invokee.matches(":popover-open"));
}, "invoking (as showpopover) closed popover with preventDefault does not open");

// hidepopover

promise_test(async function (t) {
invokerbutton.setAttribute("invokeaction", "hidepopover");
t.add_cleanup(() => invokerbutton.removeAttribute("invokeaction"));
assert_false(invokee.matches(":popover-open"));
await clickOn(invokerbutton);
assert_false(invokee.matches(":popover-open"));
}, "invoking (as hidepopover) closed popover is noop");

promise_test(async function (t) {
invokerbutton2.setAttribute("invokeaction", "hidepopover");
t.add_cleanup(() => invokerbutton2.removeAttribute("invokeaction"));
invokee.showPopover();
assert_true(invokee.matches(":popover-open"));
await clickOn(invokerbutton2);
t.add_cleanup(() => invokee.hidePopover());
assert_false(invokee.matches(":popover-open"));
}, "invoking (as hidepopover) open popover closes");

promise_test(async function (t) {
invokerbutton2.setAttribute("invokeaction", "hIdEpOpOvEr");
t.add_cleanup(() => invokerbutton2.removeAttribute("invokeaction"));
invokee.showPopover();
assert_true(invokee.matches(":popover-open"));
await clickOn(invokerbutton2);
t.add_cleanup(() => invokee.hidePopover());
assert_false(invokee.matches(":popover-open"));
}, "invoking (as hidepopover - case insensitive) open popover closes");

promise_test(async function (t) {
invokerbutton2.setAttribute("invokeaction", "hidepopover");
t.add_cleanup(() => invokerbutton2.removeAttribute("invokeaction"));
invokee.showPopover();
t.add_cleanup(() => invokee.hidePopover());
assert_true(invokee.matches(":popover-open"));
invokee.addEventListener("invoke", (e) => e.preventDefault(), {
once: true,
});
await clickOn(invokerbutton2);
assert_true(invokee.matches(":popover-open"));
}, "invoking (as hidepopover) open popover with preventDefault does not close");
</script>

0 comments on commit 64e7255

Please sign in to comment.