Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/menu/tentative/menulist-popover-attribute.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<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="../../popovers/resources/popover-utils.js"></script>
<link rel=author href=mailto:dizhangg@chromium.org>
<style>
#target {
position: fixed;
left: 10px;
top: 10px;
width: 40px;
height: 40px;
}
#menu {
position: fixed;
margin: 0;
position-area: none;
inset: 100px auto auto 100px;
}
#menu:popover-open {
overlay: auto;
}
#menu:popover-open::backdrop {
position: fixed;
inset: 0;
pointer-events: auto;
}
</style>
<div id="target"></div>
<menulist id="menu">
<menuitem>Command 1</menuitem>
<menuitem>Command 2</menuitem>
</menulist>
<script>
test(() => {
assert_equals(menu.popover, null);
menu.showPopover();
assert_true(menu.matches(':popover-open'));
menu.hidePopover();
menu.popover = 'auto';
assert_equals(menu.popover, 'auto');
menu.showPopover();
assert_true(menu.matches(':popover-open'));
menu.hidePopover();
menu.popover = 'manual';
assert_equals(menu.popover, 'manual');
menu.showPopover();
assert_true(menu.matches(':popover-open'));
menu.hidePopover();
menu.popover = null;
assert_equals(menu.popover, null);
menu.showPopover();
assert_true(menu.matches(':popover-open'));
menu.hidePopover();
}, "menulist is a popover by default.");
promise_test(async t => {
const menu = document.getElementById('menu');
const target = document.getElementById('target');
assert_false(menu.hasAttribute('popover'));
assert_false(menu.matches(':popover-open'));
let clicked = false;
target.addEventListener('click', () => {
clicked = true;
}, {signal: t.get_signal()});
await clickOn(target);
assert_true(clicked, 'The target receives the click while the menulist is closed');
clicked = false;
menu.showPopover();
t.add_cleanup(() => menu.hidePopover());
assert_true(menu.matches(':popover-open'));
await clickOn(target);
assert_true(clicked, 'The element outside the menulist receives the click');
}, 'Clicks outside a menulist without a popover attribute reach the target');
</script>