Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<link rel=author href=mailto:dom@chromium.org>
<menubar>
<menuitem id=menubarmenuitem commandfor=mainmenu command=toggle-menu>Open first menu</menuitem>
</menubar>
<menulist id=mainmenu>
<menuitem id=mainmenuitem command=toggle-menu commandfor=submenu>Toggle menu</menuitem>
<menuitem id=mainmenuitem2 command=toggle-popover commandfor=popover>Show popover</menuitem>
</menulist>
<menulist id=submenu>
<menuitem>First item!</menuitem>
</menulist>
<div popover id=popover></div>
<button popovertarget=popoverwithmenu>Open popover with menu</button>
<div popover id=popoverwithmenu>
<button popovertarget=menuinpopover>Open menu in the popover</button>
<menulist id=menuinpopover>
<menuitem id=menuinpopoveritem1>First item</menuitem>
<menuitem id=menuinpopoveritem2 command=toggle-menu commandfor=menuinpopover2>Toggle menu 2</menuitem>
</menulist>
<menulist id=menuinpopover2>
<menuitem>Submenu item</menuitem>
</menulist>
</div>
<script>
promise_test(async () => {
assert_false(mainmenu.matches(":popover-open"), "mainmenu popover starts closed");
await test_driver.click(menubarmenuitem);
assert_true(mainmenu.matches(":popover-open"), "mainmenu opens");
assert_false(submenu.matches(":popover-open"), "submenu popover starts closed");
await test_driver.click(mainmenuitem);
assert_true(submenu.matches(":popover-open"), "submenu opens");
// Close the submenu.
await test_driver.click(mainmenuitem);
assert_false(submenu.matches(":popover-open"), "submenu popover gets closed");
assert_true(mainmenu.matches(":popover-open"), "mainmenu still open");
// Close the mainmenu.
await test_driver.click(menubarmenuitem);
assert_false(mainmenu.matches(":popover-open"), "mainmenu gets closed");
}, 'User menuitem activation works with the toggle-menu command');
promise_test(async () => {
assert_false(mainmenu.matches(":popover-open"), "mainmenu popover starts closed");
await test_driver.click(menubarmenuitem);
assert_true(mainmenu.matches(":popover-open"), "mainmenu popover opens");
assert_false(popover.matches(":popover-open"), "div popover starts closed");
await test_driver.click(mainmenuitem2);
assert_true(popover.matches(":popover-open"), "div popover opens");
// Close the popover.
await test_driver.click(mainmenuitem2);
assert_false(popover.matches(":popover-open"), "div popover gets closed");
assert_true(mainmenu.matches(":popover-open"), "mainmenu still open");
}, 'User menuitem activation works with show-popover command');
promise_test(async (t) => {
assert_false(popoverwithmenu.matches(":popover-open"),
"popover with menu starts closed");
// Open the popover that hosts two menulists.
await test_driver.click(
document.querySelector("button[popovertarget=popoverwithmenu]"));
assert_true(popoverwithmenu.matches(":popover-open"),
"popover with menu opens");
assert_false(menuinpopover.matches(":popover-open"),
"menu in popover starts closed");
// Open the first menu in the popover.
await test_driver.click(
document.querySelector('button[popovertarget=menuinpopover]'));
assert_true(menuinpopover.matches(":popover-open"), "menu in popover opens");
assert_true(popoverwithmenu.matches(":popover-open"),
"outer popover remains open");
assert_false(menuinpopover2.matches(":popover-open"),
"menu 2 in popover starts closed");
// Open the second menu in the popover.
await test_driver.click(menuinpopoveritem2);
assert_true(menuinpopover2.matches(":popover-open"),
"menu 2 in popover opens");
assert_true(popoverwithmenu.matches(":popover-open"),
"outer popover remains open after opening menu 2");
assert_true(menuinpopover.matches(":popover-open"),
"menu in popover remains open");
// Close the second, "sub", menu within the popover by just clicking off of
// it.
await test_driver.click(menuinpopoveritem1);
assert_false(menuinpopover2.matches(":popover-open"),
"menu 2 in popover closes");
assert_true(popoverwithmenu.matches(":popover-open"),
"outer popover remains open after closing menu 2");
assert_true(menuinpopover.matches(":popover-open"),
"menu in popover remains open");
}, 'Menulist inside a popover works correctly; does not get accidentally ' +
'dismissed by opening submenus');
</script>