wrapping-with-descendants.html (2818B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Wrapping works correctly with 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 wrap"> 14 <div class="first-section"> 15 <button id=first tabindex=0>First Item</button> 16 </div> 17 <div class="middle-section"> 18 <div> 19 <div> 20 <button id=middle tabindex=0>Middle Item (nested)</button> 21 </div> 22 </div> 23 </div> 24 <div class="last-section"> 25 <span> 26 <button id=last tabindex=0>Last Item</button> 27 </span> 28 </div> 29 </div> 30 31 <script> 32 33 promise_test(async t => { 34 var first = document.getElementById("first"); 35 var middle = document.getElementById("middle"); 36 var last = document.getElementById("last"); 37 38 last.focus(); 39 await focusAndKeyPress(last, kArrowRight); 40 assert_equals(document.activeElement, first, "Should wrap from last nested item to first item"); 41 }, "Forward wrapping should work from nested descendants to first item"); 42 43 promise_test(async t => { 44 var first = document.getElementById("first"); 45 var middle = document.getElementById("middle"); 46 var last = document.getElementById("last"); 47 48 first.focus(); 49 await focusAndKeyPress(first, kArrowLeft); 50 assert_equals(document.activeElement, last, "Should wrap from first item to last nested item"); 51 }, "Backward wrapping should work from first item to nested descendants"); 52 53 promise_test(async t => { 54 var first = document.getElementById("first"); 55 var middle = document.getElementById("middle"); 56 var last = document.getElementById("last"); 57 58 first.focus(); 59 await focusAndKeyPress(first, kArrowRight); 60 assert_equals(document.activeElement, middle, "Should navigate normally to middle nested item"); 61 62 await focusAndKeyPress(middle, kArrowRight); 63 assert_equals(document.activeElement, last, "Should navigate normally to last nested item"); 64 }, "Normal navigation should still work correctly with nested items"); 65 66 promise_test(async t => { 67 var first = document.getElementById("first"); 68 var last = document.getElementById("last"); 69 70 last.focus(); 71 await focusAndKeyPress(last, kArrowDown); 72 assert_equals(document.activeElement, first, "Vertical wrapping should work with nested descendants"); 73 }, "Vertical wrapping should work correctly with nested descendants"); 74 75 </script>