deeply-nested-items.html (3388B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Navigation works with deeply nested descendants</title> 4 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> 5 <link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="../resources/focusgroup-utils.js"></script> 12 13 <div id=root focusgroup="toolbar"> 14 <span id=item1 tabindex=0>Item 1</span> 15 <div class="container"> 16 <div class="sub-container"> 17 <div class="deep-container"> 18 <span id=item2 tabindex=0>Item 2 (deeply nested)</span> 19 </div> 20 </div> 21 </div> 22 <span> 23 <span> 24 <span id=item3 tabindex=0>Item 3 (nested in spans)</span> 25 </span> 26 </span> 27 <div> 28 <p>Some text</p> 29 <div> 30 <span id=item4 tabindex=0>Item 4 (nested)</span> 31 </div> 32 </div> 33 <span id=item5 tabindex=0>Item 5</span> 34 </div> 35 36 <script> 37 38 promise_test(async t => { 39 var item1 = document.getElementById("item1"); 40 var item2 = document.getElementById("item2"); 41 var item3 = document.getElementById("item3"); 42 var item4 = document.getElementById("item4"); 43 var item5 = document.getElementById("item5"); 44 45 await focusAndKeyPress(item1, kArrowRight); 46 assert_equals(document.activeElement, item2, "Should navigate to deeply nested button"); 47 48 await focusAndKeyPress(item2, kArrowRight); 49 assert_equals(document.activeElement, item3, "Should navigate to button nested in spans"); 50 51 await focusAndKeyPress(item3, kArrowRight); 52 assert_equals(document.activeElement, item4, "Should navigate to nested span"); 53 54 await focusAndKeyPress(item4, kArrowRight); 55 assert_equals(document.activeElement, item5, "Should navigate to final span"); 56 }, "Forward navigation should work with deeply nested focusgroup descendants"); 57 58 promise_test(async t => { 59 var item1 = document.getElementById("item1"); 60 var item2 = document.getElementById("item2"); 61 var item3 = document.getElementById("item3"); 62 var item4 = document.getElementById("item4"); 63 var item5 = document.getElementById("item5"); 64 65 item5.focus(); 66 await focusAndKeyPress(item5, kArrowLeft); 67 assert_equals(document.activeElement, item4, "Should navigate backward to nested input"); 68 69 await focusAndKeyPress(item4, kArrowLeft); 70 assert_equals(document.activeElement, item3, "Should navigate backward to span nested in spans"); 71 72 await focusAndKeyPress(item3, kArrowLeft); 73 assert_equals(document.activeElement, item2, "Should navigate backward to deeply nested span"); 74 75 await focusAndKeyPress(item2, kArrowLeft); 76 assert_equals(document.activeElement, item1, "Should navigate backward to first span"); 77 }, "Backward navigation should work with deeply nested focusgroup descendants"); 78 79 promise_test(async t => { 80 var item1 = document.getElementById("item1"); 81 var item2 = document.getElementById("item2"); 82 83 await focusAndKeyPress(item1, kArrowDown); 84 assert_equals(document.activeElement, item2, "Vertical navigation should work with nested descendants"); 85 }, "Vertical navigation should work with nested descendants"); 86 87 </script>