Skip to content

Clean up menuitem-activate WPT a bit #57046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chromium-wpt-export-bot merged 1 commit into from
Jan 9, 2026
Merged

Clean up menuitem-activate WPT a bit #57046

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 36 additions & 36 deletions html/semantics/menu/tentative/menuitem-activate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@
<link rel=help href=https://open-ui.org/components/menu.explainer>

<menubar>
<menuitem id=menubarmenuitem commandfor=mainmenu command=toggle-menu>Open first menu</menuitem>
<menuitem id=openMainMenu 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>
<menuitem id=normalmenuitem>Normal item</menuitem>
<menuitem id=openSubMenu commandfor=submenu command=toggle-menu>Toggle menu</menuitem>
<menuitem id=showPopoverMenuItem command=toggle-popover commandfor=popover>Show popover</menuitem>
<menuitem id=doNothing>Normal item</menuitem>
</menulist>

<menulist id=submenu>
<menuitem>First item!</menuitem>
<menuitem>Sub menu</menuitem>
</menulist>

<div popover id=popover></div>
<div popover id=popover>Popover</div>

<button popovertarget=popoverwithmenu>Open popover with menu</button>
<div popover id=popoverwithmenu>
Expand All @@ -47,38 +47,39 @@
<script>
promise_test(async () => {
assert_false(mainmenu.matches(":popover-open"), "mainmenu popover starts closed");
await test_driver.click(menubarmenuitem);
await clickOn(openMainMenu);
assert_true(mainmenu.matches(":popover-open"), "mainmenu opens");

assert_false(submenu.matches(":popover-open"), "submenu popover starts closed");
await test_driver.click(mainmenuitem);
await clickOn(openSubMenu);
assert_true(submenu.matches(":popover-open"), "submenu opens");

// Close the submenu.
await test_driver.click(mainmenuitem);
await clickOn(openSubMenu);

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);
await clickOn(openMainMenu);
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);
await clickOn(openMainMenu);
assert_true(mainmenu.matches(":popover-open"), "mainmenu popover opens");

assert_false(popover.matches(":popover-open"), "div popover starts closed");
await test_driver.click(mainmenuitem2);
await clickOn(showPopoverMenuItem);
assert_true(popover.matches(":popover-open"), "div popover opens");
assert_false(mainmenu.matches(":popover-open"), "mainmenu popover closes");

// Close the popover.
await test_driver.click(menubarmenuitem);
await clickOn(openMainMenu);
assert_false(popover.matches(":popover-open"), "div popover gets closed");
assert_true(mainmenu.matches(":popover-open"), "mainmenu gets opened");
await test_driver.click(menubarmenuitem);
await clickOn(openMainMenu);
assert_false(mainmenu.matches(":popover-open"), "mainmenu gets closed");
}, 'User menuitem activation works with show-popover command');

Expand All @@ -87,15 +88,15 @@
"popover with menu starts closed");

// Open the popover that hosts two menulists.
await test_driver.click(
await clickOn(
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(
await clickOn(
document.querySelector('button[popovertarget=menuinpopover]'));
assert_true(menuinpopover.matches(":popover-open"), "menu in popover opens");
assert_true(popoverwithmenu.matches(":popover-open"),
Expand All @@ -104,7 +105,7 @@
"menu 2 in popover starts closed");

// Open the second menu in the popover.
await test_driver.click(menuinpopoveritem2);
await clickOn(menuinpopoveritem2);
assert_true(menuinpopover2.matches(":popover-open"),
"menu 2 in popover opens");
assert_true(popoverwithmenu.matches(":popover-open"),
Expand All @@ -114,7 +115,7 @@

// Close the second, "sub", menu within the popover by just clicking off of
// it.
await test_driver.click(menuinpopoveritem2);
await clickOn(menuinpopoveritem2);
assert_false(menuinpopover2.matches(":popover-open"),
"menu 2 in popover closes");
assert_true(popoverwithmenu.matches(":popover-open"),
Expand All @@ -124,29 +125,30 @@
}, 'Menulist inside a popover works correctly; does not get accidentally ' +
'dismissed by opening submenus');

async function getCoords(invoker, invokee) {
async function getMenuItemCoords(invoker, targetMenuItem) {
// test_driver isn't suited to mousedown-drag-mouseup interactions when the
// mousedown triggers visibility of one of the elements.
const menulist = targetMenuItem.parentElement;
assert_false(menulist.matches(":popover-open"), "menulist popover should start closed");
await clickOn(invoker);
const menulist = invokee.parentElement;
assert_true(menulist.matches(":popover-open"), "menulist popover opens when clicked");
let rect = invokee.getBoundingClientRect();
let rect = targetMenuItem.getBoundingClientRect();
let coords = {x: Math.round(rect.x + rect.width / 2),
y: Math.round(rect.y + rect.height / 2)};
await test_driver.click(invoker);
await clickOn(invoker);
assert_false(menulist.matches(":popover-open"), "menulist popover closes when clicked");
return coords;
}

promise_test(async (t) => {
assert_false(mainmenu.matches(":popover-open"), "mainmenu popover starts closed");
const normal_menu_coords = await getCoords(menubarmenuitem, normalmenuitem);
const doNothingCoordinates = await getMenuItemCoords(openMainMenu, doNothing);
let invokerClicks = 0;
let itemClicks = 0;
menubarmenuitem.addEventListener('click',() => (++invokerClicks));
normalmenuitem.addEventListener('click',() => (++itemClicks));
openMainMenu.addEventListener('click',() => (++invokerClicks));
doNothing.addEventListener('click',() => (++itemClicks));
let openStateAfterPointerdown = "none";
menubarmenuitem.addEventListener('pointermove',() => {
openMainMenu.addEventListener('pointermove',() => {
// There will be two move events, one before the pointerdown and one after.
// Just capture the one after.
if (openStateAfterPointerdown === "none") {
Expand All @@ -157,12 +159,11 @@
},{signal: t.get_signal()});
await new test_driver.Actions()
.addPointer('mouse', 'mouse')
.pointerMove(0, 0, {origin: menubarmenuitem})
.pointerMove(0, 0, {origin: openMainMenu})
.pointerDown()
// Extra move to trigger event on menubarmenuitem:
.pointerMove(2, 2, {origin: menubarmenuitem})
// This is the center of normalmenuitem:
.pointerMove(normal_menu_coords.x, normal_menu_coords.y, {})
// Extra move to trigger event on openMainMenu:
.pointerMove(2, 2, {origin: openMainMenu})
.pointerMove(doNothingCoordinates.x, doNothingCoordinates.y, {})
.pointerUp()
.send();
await waitForRender();
Expand All @@ -176,19 +177,18 @@
promise_test(async (t) => {
assert_false(mainmenu.matches(":popover-open"), "mainmenu popover starts closed");
assert_false(submenu.matches(":popover-open"), "submenu popover starts closed");
const main_menu_coords = await getCoords(menubarmenuitem, mainmenuitem);
const openSubMenuCoordinates = await getMenuItemCoords(openMainMenu, openSubMenu);
await new test_driver.Actions()
.addPointer('mouse', 'mouse')
.pointerMove(0, 0, {origin: menubarmenuitem})
.pointerMove(0, 0, {origin: openMainMenu})
.pointerDown()
// This is the center of mainmenuitem:
.pointerMove(main_menu_coords.x, main_menu_coords.y, {})
.pointerMove(openSubMenuCoordinates.x, openSubMenuCoordinates.y, {})
.pointerUp()
.send();
await waitForRender();
assert_true(mainmenu.matches(":popover-open"), "mainmenu popover should remain open, because submenu chosen");
assert_true(submenu.matches(":popover-open"), "submenu popover should be open");
await clickOn(menubarmenuitem); // Cleanup.
await clickOn(openMainMenu); // Cleanup.
assert_false(mainmenu.matches(":popover-open"), "mainmenu popover should be closed");
assert_false(submenu.matches(":popover-open"), "submenu popover should be closed");
}, 'A mousedown-drag-mouseup gesture on a submenu item leaves both menus open');
Expand Down