Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 8 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/popovers/popover-light-dismiss-command-edge-cases.tentative.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8" />
<title>Popover light dismiss - commandfor edge cases</title>
<meta name="timeout" content="long" />
<link rel="author" href="mailto:wpt@keithcirkel.co.uk" />
<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/popover-utils.js"></script>
<!-- p1: button with show-popover - already-open popover stays open (no hide) -->
<div popover id="p1">
<span id="inside1">inside p1</span>
<button id="b_show" commandfor="p1" command="show-popover">
show-popover
</button>
</div>
<!-- p2: button with toggle-popover - hides exactly once (command fires, not light dismiss) -->
<div popover id="p2">
<button id="b_toggle" commandfor="p2" command="toggle-popover">
toggle-popover
</button>
</div>
<!-- p3: button with hide-popover - hides exactly once -->
<div popover id="p3">
<button id="b_hide" commandfor="p3" command="hide-popover">
hide-popover
</button>
</div>
<!-- p4: button with show-modal (non-popover command) - should light dismiss -->
<div popover id="p4">
<button id="b_show_modal" commandfor="p4" command="show-modal">
show-modal
</button>
</div>
<!-- p5: button with request-close (non-popover command) - should light dismiss -->
<div popover id="p5">
<button id="b_request_close" commandfor="p5" command="request-close">
request-close
</button>
</div>
<!-- p6: button with custom command (non-popover command) - should light dismiss -->
<div popover id="p6">
<button id="b_custom" commandfor="p6" command="--my-custom-command">
custom command
</button>
</div>
<!-- p7: submit button with form owner - should light dismiss -->
<form id="f1" action="javascript:void(0)">
<div popover id="p7">
<button id="b_submit" type="submit" commandfor="p7" command="show-popover">
submit
</button>
</div>
</form>
<!-- p8: reset button with form owner - should light dismiss -->
<form id="f2">
<div popover id="p8">
<button id="b_reset" type="reset" commandfor="p8" command="show-popover">
reset
</button>
</div>
</form>
<!-- p9: auto-type (omitted) button with form owner - should light dismiss -->
<form id="f3" action="javascript:void(0)">
<div popover id="p9">
<!-- omitted type = auto = submit -->
<button id="b_auto" commandfor="p9" command="show-popover">
auto type
</button>
</div>
</form>
<!-- p10: disabled button - should light dismiss -->
<div popover id="p10">
<button id="b_disabled" commandfor="p10" command="show-popover" disabled>
disabled
</button>
</div>
<!-- p11: commandfor pointing to non-popover element - should light dismiss -->
<div id="not_a_popover">not a popover</div>
<div popover id="p11">
<button id="b_no_popover" commandfor="not_a_popover" command="show-popover">
points to non-popover
</button>
</div>
<!-- p12: type=button with form owner + valid commandfor - should NOT light dismiss -->
<form id="f4">
<div popover id="p12">
<button
id="b_type_button"
type="button"
commandfor="p12"
command="show-popover"
>
type=button in form
</button>
</div>
</form>
<span id="outside">Outside all popovers</span>
<script>
function testLightDismisses(title, popover, btn, setup) {
promise_test(async () => {
popover.showPopover();
assert_true(popover.matches(":popover-open"));
setup?.();
await clickOn(btn);
assert_false(
popover.matches(":popover-open"),
"popover should light dismiss",
);
}, title);
}
function testNoLightDismiss(title, popover, btn, expectedCloseCount) {
promise_test(async () => {
popover.showPopover();
assert_true(popover.matches(":popover-open"));
let hideCount = 0;
const ac = new AbortController();
popover.addEventListener(
"beforetoggle",
(e) => {
if (e.newState === "closed") ++hideCount;
},
{ signal: ac.signal },
);
await clickOn(btn);
assert_equals(
hideCount,
expectedCloseCount,
`popover should close exactly ${expectedCloseCount} time(s)`,
);
ac.abort();
if (popover.matches(":popover-open")) popover.hidePopover();
}, title);
}
testNoLightDismiss(
"commandfor with show-popover does not light dismiss an already-open popover",
p1,
b_show,
0,
);
testNoLightDismiss(
"commandfor with toggle-popover hides popover exactly once, not twice",
p2,
b_toggle,
1,
);
testNoLightDismiss(
"commandfor with hide-popover hides popover exactly once, not twice",
p3,
b_hide,
1,
);
testNoLightDismiss(
"commandfor with type=button in form and valid command does not light dismiss",
p12,
b_type_button,
0,
);
testLightDismisses(
"commandfor with command=show-modal light dismisses the popover",
p4,
b_show_modal,
);
testLightDismisses(
"commandfor with command=request-close light dismisses the popover",
p5,
b_request_close,
);
testLightDismisses(
"commandfor with custom command light dismisses the popover",
p6,
b_custom,
);
testLightDismisses(
"commandfor on submit button with form owner light dismisses the popover",
p7,
b_submit,
() =>
f1.addEventListener("submit", (e) => e.preventDefault(), { once: true }),
);
testLightDismisses(
"commandfor on reset button with form owner light dismisses the popover",
p8,
b_reset,
);
testLightDismisses(
"commandfor on auto-type button with form owner light dismisses the popover",
p9,
b_auto,
() =>
f3.addEventListener("submit", (e) => e.preventDefault(), { once: true }),
);
testLightDismisses(
"commandfor on disabled button light dismisses the popover",
p10,
b_disabled,
);
testLightDismisses(
"commandfor pointing to non-popover element light dismisses the popover",
p11,
b_no_popover,
);
</script>