menubar-invoke-menulist.html (5644B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <link rel=author href=mailto:dizhangg@chromium.org> 5 <link rel=help href=https://open-ui.org/components/menu.explainer> 6 7 <menubar> 8 <menuitem id="menubaritem">More commands</menuitem> 9 <menuitem>Command 2</menuitem> 10 <menuitem id="opencheckable" commandfor="checkable" command="show-menu">Open checkable menu</menuitem> 11 </menubar> 12 13 <menulist id="more"> 14 <menuitem id="menulistitem" disabled>Command 1</menuitem> 15 <menuitem>Command 2</menuitem> 16 </menulist> 17 18 <menulist id="checkable"> 19 <fieldset checkable> 20 <menuitem id="checkable-menuitem">Show menu</menuitem> 21 </fieldset> 22 </menulist> 23 24 <script> 25 const menubar = document.querySelector("menubar"); 26 const menubaritem = document.getElementById("menubaritem"); 27 const menulist = document.querySelector("menulist"); 28 const menulistitem = document.getElementById("menulistitem"); 29 const checkableMenuitem = document.getElementById("checkable-menuitem"); 30 31 test(() => { 32 assert_equals(menubar.constructor, HTMLMenuBarElement); 33 assert_equals(menubaritem.constructor, HTMLMenuItemElement); 34 assert_false(menubaritem.disabled); 35 menubaritem.disabled = true; 36 assert_true(menubaritem.disabled); 37 38 assert_equals(menulist.constructor, HTMLMenuListElement); 39 assert_equals(menulistitem.constructor, HTMLMenuItemElement); 40 assert_true(menulistitem.disabled); 41 menulistitem.disabled = false; 42 assert_false(menulistitem.disabled); 43 }, "Menu elements are HTML elements."); 44 45 test(() => { 46 menubaritem.setAttribute("command", "toggle-popover"); 47 menubaritem.setAttribute("commandfor", "more"); 48 49 menubaritem.disabled = true; 50 menubaritem.click(); 51 assert_false(menulist.matches(':popover-open'), 52 'The menulist should not open because the menuitem is disabled.'); 53 54 menubaritem.disabled = false; 55 menubaritem.click(); 56 assert_true(menulist.matches(':popover-open'), 57 'toggle-popover opens the menulist'); 58 59 menubaritem.click(); 60 assert_false(menulist.matches(':popover-open'), 61 "toggle-popover closes the menulist"); 62 63 menubaritem.setAttribute("command", "show-popover"); 64 menubaritem.click(); 65 assert_true(menulist.matches(':popover-open'), 66 "show-popover shows the menulist"); 67 68 menubaritem.setAttribute("command", "hide-popover"); 69 menubaritem.click(); 70 assert_false(menulist.matches(':popover-open'), 71 "hide-popover hides the menulist"); 72 }, "Menuitem with toggle-popover, show-popover, hide-popover commands can invoke menulist popover."); 73 74 test(() => { 75 menubaritem.setAttribute("command", "toggle-menu"); 76 menubaritem.setAttribute("commandfor", "more"); 77 78 menubaritem.disabled = true; 79 menubaritem.click(); 80 assert_false(menulist.matches(':popover-open'), 81 'The menulist should not open because the menuitem is disabled.'); 82 83 menubaritem.disabled = false; 84 menubaritem.click(); 85 assert_true(menulist.matches(':popover-open'), 86 'toggle-menu opens the menulist'); 87 88 menubaritem.click(); 89 assert_false(menulist.matches(':popover-open'), 90 "toggle-menu closes the menulist"); 91 92 menubaritem.setAttribute("command", "show-menu"); 93 menubaritem.click(); 94 assert_true(menulist.matches(':popover-open'), 95 "show-menu opens the menulist"); 96 97 menubaritem.setAttribute("command", "hide-menu"); 98 menubaritem.click(); 99 assert_false(menulist.matches(':popover-open'), 100 "hide-menu hides the menulist"); 101 }, "Menuitem with toggle-menu, show-menu, hide-menu commands can invoke menulist popover."); 102 103 test(() => { 104 menubaritem.command = "show-menu"; 105 menubaritem.commandForElement = menulist; 106 107 menubaritem.click(); 108 assert_true(menulist.matches(':popover-open'), 109 'show-menu opens the menulist.'); 110 111 menulist.hidePopover(); 112 assert_false(menulist.matches(':popover-open'), 113 'The global hidePopover() method hides the menulist'); 114 }, "hidePopover() on menulist closes the popover."); 115 116 test(() => { 117 menubaritem.setAttribute("command", "toggle-menu"); 118 menubaritem.setAttribute("commandfor", "dne"); 119 menubaritem.click(); 120 assert_false(menulist.matches(':popover-open'), 121 'The menulist should not open because the menuitem commandfor is invalid'); 122 123 menubaritem.setAttribute("command", "toggle-menu-dne"); 124 menubaritem.setAttribute("commandfor", "more"); 125 menubaritem.click(); 126 assert_false(menulist.matches(':popover-open'), 127 'The menulist should not open because the menuitem command is invalid'); 128 }, "Menuitem with invalid command/commandfor cannot invoke menulist popover."); 129 130 test(() => { 131 assert_equals(checkableMenuitem.commandForElement,null, 132 "To start, checkable item shouldn't be an invoker") 133 opencheckable.click(); // Open the menu 134 checkableMenuitem.click(); 135 assert_true(checkableMenuitem.checked, 136 "checkable menu item becomes checked"); 137 assert_false(menulist.matches(":popover-open"), 138 "not an invoker yet"); 139 140 checkableMenuitem.click(); 141 142 assert_false(checkableMenuitem.checked, 143 "checkable menu item is no longer checked"); 144 assert_false(menulist.matches(":popover-open"), 145 "menulist no longer matches :popover-open"); 146 147 // Being a sub-menu invoker makes the item non-checkable. 148 checkableMenuitem.command = "toggle-menu"; 149 checkableMenuitem.commandForElement = menulist; 150 checkableMenuitem.click(); 151 assert_false(checkableMenuitem.checked, 152 "checkable menu item that invokes a menu is not checkable"); 153 assert_true(menulist.matches(":popover-open"), "menulist is open"); 154 checkableMenuitem.click(); 155 assert_false(checkableMenuitem.checked, "still not checked"); 156 assert_false(menulist.matches(":popover-open"), "menulist closes"); 157 }, "menuitems that invoke menulists cannot be checkable"); 158 </script>