menuitem-activate.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 5 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/menu/tentative/menuitem-activate.html - WPT Dashboard Interop Dashboard

<!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-actions.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<script src="../../popovers/resources/popover-utils.js"></script>

<link rel=author href=mailto:dom@chromium.org>

<link rel=help href=https://open-ui.org/components/menu.explainer>

<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>

 <menuitem id=normalmenuitem>Normal item</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>

<style>

  [popover] {

    width: 400px;

    height: 400px;

</style>

<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(menuinpopoveritem2);

  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');

promise_test(async (t) => {

  assert_false(mainmenu.matches(":popover-open"), "mainmenu popover starts closed");

  let clickCount = 0;

  normalmenuitem.addEventListener('click',() => (++clickCount));

  await new test_driver.Actions()

    .addPointer('mouse', 'mouse')

    .pointerMove(0, 0, {origin: menubarmenuitem})

    .pointerDown()

    .send();

  await waitForRender();

  assert_true(mainmenu.matches(":popover-open"), "mainmenu popover should be open while mouse is down");

  assert_equals(clickCount,0, "no clicks yet");

  await new test_driver.Actions()

    .addPointer('mouse', 'mouse')

    .pointerMove(0, 0, {origin: normalmenuitem})

    .pointerUp()

    .send();

  await waitForRender();

  assert_false(mainmenu.matches(":popover-open"), "mainmenu popover should be closed");

  // TODO: Menu items should fire an event when they are selected.

  // The `click` event is not enough, because one won't be fired here.

  // assert_equals(clickCount,1, "the sub-menu item should have been clicked");

}, 'A mousedown-drag-mouseup gesture on a normal menuitem picks the item');

promise_test(async (t) => {

  assert_false(mainmenu.matches(":popover-open"), "mainmenu popover starts closed");

  assert_false(submenu.matches(":popover-open"), "submenu popover starts closed");

  await new test_driver.Actions()

    .addPointer('mouse', 'mouse')

    .pointerMove(0, 0, {origin: menubarmenuitem})

    .pointerDown()

    .send();

  await waitForRender();

  assert_true(mainmenu.matches(":popover-open"), "mainmenu popover should be open while mouse is down");

  assert_false(submenu.matches(":popover-open"), "submenu shouldn't be open yet");

  await new test_driver.Actions()

    .addPointer('mouse', 'mouse')

    .pointerMove(0, 0, {origin: mainmenuitem})

    .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");

  menubarmenuitem.click(); // Cleanup.

  await waitForRender();

  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');

</script>