focus-menu-elements-nested-arrowoperations.html (3152B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <link rel=author href=mailto:dizhangg@chromium.org> 8 <link rel=help href=https://open-ui.org/components/menu.explainer> 9 10 <style> 11 /* TODO: Remove CSS rule when it is defined in UA style sheet. */ 12 menulist { 13 position-area: bottom span-right; 14 position: absolute; 15 } 16 17 .nested { 18 position-area: right span-bottom; 19 } 20 </style> 21 22 <div id="container"> 23 <menubar> 24 <menuitem id="a" command="toggle-menu" commandfor="menulist1">Commands A</menuitem> 25 <menuitem id="b" command="toggle-menu" commandfor="menulist2">Commands B</menuitem> 26 <menuitem id="c">Commands C</menuitem> 27 </menubar> 28 </div> 29 30 <menulist id="menulist1"> 31 <menuitem id="d">Command D</menuitem> 32 </menulist> 33 34 <menulist id="menulist2"> 35 <menuitem id="e">Command E</menuitem> 36 <menuitem id="f">Command F</menuitem> 37 <menuitem id="g" command="toggle-menu" commandfor="menulist3">Commands G</menuitem> 38 </menulist> 39 40 <menulist id="menulist3" class="nested"> 41 <menuitem id="h">Command H</menuitem> 42 <menuitem id="i">Command I</menuitem> 43 </menulist> 44 45 <script> 46 47 const ArrowLeft = '\uE012'; 48 const ArrowUp = '\uE013'; 49 const ArrowRight = '\uE014'; 50 const ArrowDown = '\uE015'; 51 52 async function navigateMenus() { 53 await test_driver.click(a); 54 assert_equals(document.activeElement, a); 55 await test_driver.send_keys(document.activeElement, ArrowDown); 56 assert_equals(document.activeElement, d); 57 await test_driver.send_keys(document.activeElement, ArrowRight); 58 assert_equals(document.activeElement, b); 59 await test_driver.send_keys(document.activeElement, ArrowDown); 60 assert_equals(document.activeElement, e); 61 await test_driver.send_keys(document.activeElement, ArrowDown); 62 assert_equals(document.activeElement, f); 63 await test_driver.send_keys(document.activeElement, ArrowDown); 64 assert_equals(document.activeElement, g); 65 await test_driver.send_keys(document.activeElement, ArrowRight); 66 assert_equals(document.activeElement, h); 67 await test_driver.send_keys(document.activeElement, ArrowDown); 68 assert_equals(document.activeElement, i); 69 await test_driver.send_keys(document.activeElement, ArrowRight); 70 assert_equals(document.activeElement, c); 71 } 72 73 promise_test(async (t) => { 74 await navigateMenus(); 75 }, 'Should use arrow keys to move between menuitems in menulist invoked from menubar.'); 76 77 promise_test(async (t) => { 78 container.setAttribute('popover','auto'); 79 container.showPopover(); 80 await navigateMenus(); 81 container.removeAttribute('popover'); 82 }, 'Should use arrow keys to move between menuitems in menulist invoked from menubar inside a popover without closing the popover.'); 83 84 promise_test(async (t) => { 85 document.querySelectorAll("menulist").forEach((menulist) => { 86 menulist.addEventListener('beforetoggle', () => menulist.hidePopover()); 87 }); 88 a.focus(); 89 await navigateMenus(); 90 }, 'Should use arrow keys to move between menuitems: Hide popover on beforetoggle should still work.'); 91 92 </script>