focus-menu-elements-arrowoperations.html (4255B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <link rel=author href=mailto:dizhangg@chromium.org> 7 <link rel=help href=https://open-ui.org/components/menu.explainer> 8 9 <menubar> 10 <menuitem id=btn commandfor="list" command="toggle-menu">Open</menuitem> 11 </menubar> 12 13 <menulist id="list"> 14 <menuitem id="A1">Command A1</menuitem> 15 <menuitem id="A2">Command A2</menuitem> 16 </menulist> 17 18 <menubar id="bar"> 19 <menuitem id="B1">Command B1</menuitem> 20 <menuitem id="B2">Command B2</menuitem> 21 </menubar> 22 23 24 <script> 25 26 const Enter = '\uE007'; 27 const ArrowLeft = '\uE012'; 28 const ArrowUp = '\uE013'; 29 const ArrowRight = '\uE014'; 30 const ArrowDown = '\uE015'; 31 32 promise_test(async (t) => { 33 await test_driver.click(btn); 34 assert_equals(document.activeElement, btn); 35 await test_driver.send_keys(document.activeElement, Enter); 36 assert_equals(document.activeElement, btn, 'btn invoked menulist, but focus is still on btn.'); 37 await test_driver.send_keys(document.activeElement, ArrowDown); 38 assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.'); 39 await test_driver.send_keys(document.activeElement, ArrowDown); 40 assert_equals(document.activeElement, A2, 'arrow down changes to next menuitem.'); 41 await test_driver.send_keys(document.activeElement, ArrowUp); 42 assert_equals(document.activeElement, A1, 'arrow up changes to previous menuitem.'); 43 await test_driver.send_keys(document.activeElement, ArrowUp); 44 assert_equals(document.activeElement, A1, 'arrow keys do not loop.'); 45 46 list.hidePopover(); 47 await test_driver.click(btn); 48 await test_driver.send_keys(document.activeElement, ArrowDown); 49 assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.'); 50 await test_driver.send_keys(document.activeElement, ArrowLeft); 51 assert_equals(document.activeElement, btn, 'arrow left close the menulist and focus on invoker.'); 52 53 await test_driver.click(btn); 54 await test_driver.send_keys(document.activeElement, ArrowDown); 55 assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.'); 56 await test_driver.send_keys(document.activeElement, ArrowRight); 57 assert_equals(document.activeElement, btn, 'arrow right close the menulist and focus on invoker.'); 58 }, 'Should use arrow keys to move between menuitems in menulist.'); 59 60 promise_test(async (t) => { 61 list.style.display = 'block'; 62 await test_driver.click(btn); 63 await test_driver.send_keys(document.activeElement, ArrowDown); 64 assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.'); 65 await test_driver.send_keys(document.activeElement, ArrowDown); 66 assert_equals(document.activeElement, A2, 'arrow down changes to next menuitem.'); 67 await test_driver.send_keys(document.activeElement, ArrowUp); 68 assert_equals(document.activeElement, A1, 'arrow up changes to previous menuitem.'); 69 await test_driver.send_keys(document.activeElement, ArrowLeft); 70 assert_equals(document.activeElement, btn, 'arrow left moves focus from menulist to invoker.'); 71 list.style.display = ''; 72 }, 'Should use arrow keys to move between menuitems in menulist with display block.'); 73 74 promise_test(async (t) => { 75 await test_driver.click(B1); 76 assert_equals(document.activeElement, B1); 77 await test_driver.send_keys(document.activeElement, ArrowUp); 78 assert_equals(document.activeElement, B1, 'arrow up does not change current focused element.'); 79 await test_driver.send_keys(document.activeElement, ArrowDown); 80 assert_equals(document.activeElement, B1, 'arrow down does not change current focused element.'); 81 await test_driver.send_keys(document.activeElement, ArrowRight); 82 assert_equals(document.activeElement, B2, 'arrow right changes to next menuitem.'); 83 await test_driver.send_keys(document.activeElement, ArrowLeft); 84 assert_equals(document.activeElement, B1, 'arrow left changes to previous menuitem.'); 85 await test_driver.send_keys(document.activeElement, ArrowLeft); 86 assert_equals(document.activeElement, B1, 'arrow keys do not loop.'); 87 }, 'Should use arrow keys to move between menuitems in menubar.'); 88 89 </script>