behavior-tokens-comprehensive.html (4439B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - All behavior tokens parsing and basic navigation</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 <!-- Test all behavior tokens for basic navigation --> 14 <div id=toolbar focusgroup="toolbar"> 15 <span id=toolbar1 tabindex=0>toolbar1</span> 16 <span id=toolbar2 tabindex=0>toolbar2</span> 17 </div> 18 19 <div id=tablist focusgroup="tablist"> 20 <span id=tablist1 tabindex=0>tablist1</span> 21 <span id=tablist2 tabindex=0>tablist2</span> 22 </div> 23 24 <div id=radiogroup focusgroup="radiogroup"> 25 <span id=radiogroup1 tabindex=0>radiogroup1</span> 26 <span id=radiogroup2 tabindex=0>radiogroup2</span> 27 </div> 28 29 <div id=listbox focusgroup="listbox"> 30 <span id=listbox1 tabindex=0>listbox1</span> 31 <span id=listbox2 tabindex=0>listbox2</span> 32 </div> 33 34 <div id=menu focusgroup="menu"> 35 <span id=menu1 tabindex=0>menu1</span> 36 <span id=menu2 tabindex=0>menu2</span> 37 </div> 38 39 <div id=menubar focusgroup="menubar"> 40 <span id=menubar1 tabindex=0>menubar1</span> 41 <span id=menubar2 tabindex=0>menubar2</span> 42 </div> 43 44 <table id=grid focusgroup="grid"> 45 <tr> 46 <td id=grid1 tabindex=0>grid1</td> 47 <td id=grid2 tabindex=0>grid2</td> 48 </tr> 49 </table> 50 51 <div id=none_test focusgroup="none"> 52 <span id=none1 tabindex=0>none1</span> 53 <span id=none2 tabindex=0>none2</span> 54 </div> 55 56 <script> 57 const behaviorTokens = [ 58 'toolbar', 'tablist', 'radiogroup', 'listbox', 'menu', 'menubar', 'grid', 'none' 59 ]; 60 61 for (const behavior of behaviorTokens) { 62 if (behavior === 'none') { 63 // 'none' behavior should disable navigation 64 promise_test(async t => { 65 var item1 = document.getElementById(`${behavior}1`); 66 var item2 = document.getElementById(`${behavior}2`); 67 68 await focusAndKeyPress(item1, kArrowRight); 69 assert_equals(document.activeElement, item1, `'${behavior}' behavior should disable navigation`); 70 }, `Behavior token '${behavior}' disables focusgroup navigation`); 71 } else { 72 // All other behaviors should enable navigation (linear or grid) 73 promise_test(async t => { 74 var item1 = document.getElementById(`${behavior}1`); 75 var item2 = document.getElementById(`${behavior}2`); 76 77 await focusAndKeyPress(item1, kArrowRight); 78 assert_equals(document.activeElement, item2, `'${behavior}' behavior should enable navigation`); 79 }, `Behavior token '${behavior}' enables focusgroup navigation`); 80 } 81 } 82 83 // Test behavior tokens with modifiers 84 promise_test(async t => { 85 // Create elements dynamically to test combinations 86 const testDiv = document.createElement('div'); 87 testDiv.setAttribute('focusgroup', 'toolbar inline wrap'); 88 testDiv.innerHTML = '<span id=combo1 tabindex=0>combo1</span><span id=combo2 tabindex=0>combo2</span>'; 89 document.body.appendChild(testDiv); 90 91 var combo1 = document.getElementById('combo1'); 92 var combo2 = document.getElementById('combo2'); 93 94 await focusAndKeyPress(combo1, kArrowRight); 95 assert_equals(document.activeElement, combo2, "Behavior token with modifiers should work"); 96 97 // Clean up 98 document.body.removeChild(testDiv); 99 }, "Behavior token 'toolbar' with modifiers 'inline wrap' works correctly"); 100 101 promise_test(async t => { 102 // Test grid with modifiers 103 const testTable = document.createElement('table'); 104 testTable.setAttribute('focusgroup', 'grid row-wrap col-flow'); 105 testTable.innerHTML = '<tr><td id=gridcombo1 tabindex=0>gridcombo1</td><td id=gridcombo2 tabindex=0>gridcombo2</td></tr>'; 106 document.body.appendChild(testTable); 107 108 var gridcombo1 = document.getElementById('gridcombo1'); 109 var gridcombo2 = document.getElementById('gridcombo2'); 110 111 await focusAndKeyPress(gridcombo1, kArrowRight); 112 assert_equals(document.activeElement, gridcombo2, "Grid behavior token with modifiers should work"); 113 114 // Clean up 115 document.body.removeChild(testTable); 116 }, "Behavior token 'grid' with modifiers 'row-wrap col-flow' works correctly"); 117 </script>