menubar-invoke-menulist.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/menubar-invoke-menulist.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

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

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

<menubar>

  <menuitem id="menubaritem">More commands</menuitem>

  <menuitem>Command 2</menuitem>

  <menuitem id="opencheckable" commandfor="checkable" command="show-popover">Open checkable menu</menuitem>

</menubar>

<menulist id="more">

 <menuitem id="menulistitem" disabled>Command 1</menuitem>

 <menuitem>Command 2</menuitem>

</menulist>

<menulist id="checkable">

  <menuitemcheckbox id="checkable-menuitem">Show menu</menuitemcheckbox>

</menulist>

<menubar id="menubar-nested">

  <submenu>

    <menuitem id="menubaritem-nested">More commands (nested)</menuitem>

    <menulist id="more-nested">

      <menuitem id="menulistitem-nested" disabled>Command 1</menuitem>

      <menuitem>Command 2</menuitem>

    </menulist>

  </submenu>

</menubar>

<script>

const menubar = document.querySelector("menubar");

const menubaritem = document.getElementById("menubaritem");

const menulist = document.querySelector("menulist");

const menulistitem = document.getElementById("menulistitem");

const checkableMenuitem = document.getElementById("checkable-menuitem");

test(() => {

 assert_equals(menubar.constructor, HTMLMenuBarElement);

 assert_equals(menubaritem.constructor, HTMLMenuItemElement);

 assert_false(menubaritem.disabled);

 menubaritem.disabled = true;

 assert_true(menubaritem.disabled);

 assert_equals(menulist.constructor, HTMLMenuListElement);

 assert_equals(menulistitem.constructor, HTMLMenuItemElement);

 assert_true(menulistitem.disabled);

 menulistitem.disabled = false;

 assert_false(menulistitem.disabled);

}, "Menu elements are HTML elements.");

test(() => {

 menubaritem.setAttribute("command", "toggle-popover");

 menubaritem.setAttribute("commandfor", "more");

 menubaritem.disabled = true;

 menubaritem.click();

 assert_false(menulist.matches(':popover-open'),

    'The menulist should not open because the menuitem is disabled.');

 menubaritem.disabled = false;

 menubaritem.click();

 assert_true(menulist.matches(':popover-open'),

    'toggle-popover opens the menulist');

 menubaritem.click();

 assert_false(menulist.matches(':popover-open'),

    "toggle-popover closes the menulist");

 menubaritem.setAttribute("command", "show-popover");

 menubaritem.click();

 assert_true(menulist.matches(':popover-open'),

    "show-popover shows the menulist");

 menubaritem.setAttribute("command", "hide-popover");

 menubaritem.click();

 assert_false(menulist.matches(':popover-open'),

    "hide-popover hides the menulist");

}, "Menuitem with toggle-popover, show-popover, hide-popover commands can invoke menulist popover.");

test(() => {

  const menubaritemNested = document.getElementById("menubaritem-nested");

  const menulistNested = document.getElementById("more-nested");

  menubaritemNested.disabled = true;

  menubaritemNested.click();

  assert_false(menulistNested.matches(':popover-open'),

     'The nested menulist should not open because the menuitem is disabled.');

  menubaritemNested.disabled = false;

  menubaritemNested.click();

  assert_true(menulistNested.matches(':popover-open'),

     'clicking nested menuitem opens the nested menulist.');

  menulistNested.hidePopover();

}, "Nested submenu can be invoked by clicking.");

test(() => {

  const menubaritemNested = document.getElementById("menubaritem-nested");

  const menulistNested = document.getElementById("more-nested");

  menubaritemNested.click();

  assert_true(menulistNested.matches(':popover-open'),

     'nested menuitem opens the nested menulist.');

  menulistNested.hidePopover();

  assert_false(menulistNested.matches(':popover-open'),

     'The global hidePopover() method hides the nested menulist');

}, "hidePopover() on nested menulist closes the popover.");

test(() => {

  menubaritem.setAttribute("command", "toggle-popover");

  menubaritem.setAttribute("commandfor", "dne");

  menubaritem.click();

  assert_false(menulist.matches(':popover-open'),

     'The menulist should not open because the menuitem commandfor is invalid');

  menubaritem.setAttribute("command", "toggle-popover-dne");

  menubaritem.setAttribute("commandfor", "more");

  menubaritem.click();

  assert_false(menulist.matches(':popover-open'),

     'The menulist should not open because the menuitem command is invalid');

}, "Menuitem with invalid command/commandfor cannot invoke menulist popover.");

test(() => {

  assert_equals(checkableMenuitem.commandForElement, undefined,

   "checkable item does not support commandForElement");

  assert_equals(checkableMenuitem.command, undefined,

   "checkable item does not support command");

  checkableMenuitem.setAttribute("command", "toggle-popover");

  checkableMenuitem.setAttribute("commandfor", "more");

  opencheckable.click(); // Open the menu

  checkableMenuitem.click();

  assert_true(checkableMenuitem.checked,

      "checkable menu item becomes checked");

  assert_false(document.getElementById("more").matches(":popover-open"),

      "commandfor does not invoke popover");

  assert_false(menulist.matches(":popover-open"),

      "not an invoker yet");

  checkableMenuitem.click();

  assert_false(checkableMenuitem.checked,

      "checkable menu item is no longer checked");

  assert_false(document.getElementById("more").matches(":popover-open"),

      "commandfor does not invoke popover");

  assert_false(menulist.matches(":popover-open"),

      "menulist no longer matches :popover-open");

  // Nesting a <menuitemcheckbox> in a <submenu> does not make it a submenu invoker.

  const submenuElement = document.createElement('submenu');

  checkableMenuitem.parentNode.replaceChild(submenuElement, checkableMenuitem);

  submenuElement.appendChild(checkableMenuitem);

  submenuElement.appendChild(menulist);

  checkableMenuitem.click();

  assert_true(checkableMenuitem.checked,

      "menuitemcheckbox remains checkable and does not invoke submenu");

  assert_false(menulist.matches(":popover-open"), "menulist is not open");

}, "menuitemcheckbox does not invoke menulists or support command/commandfor");

</script>