empty-spaces.html (5581B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Validate that empty spaces are not troubling our expectations.</title> 4 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> 5 <link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md"> 6 <meta name="timeout" content="long"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="../resources/focusgroup-utils.js"></script> 13 14 <table focusgroup="grid flow"> 15 <tr> 16 <td id=r1c1 tabindex=0 rowspan=2 colspan=2>r1c1</td> 17 <td id=r1c3 tabindex=0>r1c3</td> 18 <td id=r1c4 tabindex=0 rowspan=3>r1c4</td> 19 <td id=r1c5 tabindex=0>r1c5</td> 20 <td id=r1c6 tabindex=0>r1c6</td> 21 <td id=r1c7 tabindex=0>r1c7</td> 22 </tr> 23 <tr> 24 <!-- r2c1 and r2c2 starts in the previous row and spans to here. --> 25 <td id=r2c3 tabindex=0>r2c3</td> 26 <!-- Leave the rest of the row empty --> 27 </tr> 28 <tr> 29 <td id=r3c1 tabindex=0>r3c1</td> 30 <td id=r3c2 tabindex=0>r3c2</td> 31 <!-- There will be a cell at r3c4, but it starts in row 1. --> 32 </tr> 33 <tr> 34 <td id=r4c1 tabindex=0 colspan=5>r4c1</td> 35 <td id=r4c6 tabindex=0>r4c6</td> 36 <!-- No last cell - leave it empty for the test --> 37 </tr> 38 </table> 39 40 <script> 41 // The following tests are very corner-case. 42 // 43 // We are creating empty spaces that don't have cells through a weird table 44 // structure. The spaces at the following locations don't have cells (assuming 45 // that the first row/column starts at index 1): r2c5, r2c6, r2c7, r3c3, 46 // r3c5, r3c6, r3c7 and r4c7. 47 48 promise_test(async t => { 49 var r1c1 = document.getElementById("r1c1"); 50 var r1c4 = document.getElementById("r1c4"); 51 var r1c5 = document.getElementById("r1c5"); 52 var r2c3 = document.getElementById("r2c3"); 53 var r3c2 = document.getElementById("r3c2"); 54 var r4c6 = document.getElementById("r4c6"); 55 56 await focusAndKeyPress(r3c2, kArrowRight); 57 assert_equals(document.activeElement, r1c4); 58 59 await focusAndKeyPress(r1c4, kArrowRight); 60 assert_equals(document.activeElement, r1c5); 61 62 await focusAndKeyPress(r4c6, kArrowRight); 63 assert_equals(document.activeElement, r1c1); 64 65 await focusAndKeyPress(r2c3, kArrowRight); 66 assert_equals(document.activeElement, r1c4); 67 }, "A right arrow press should move the focus to the next column, dealing correctly with the empty spaces."); 68 69 promise_test(async t => { 70 var r1c1 = document.getElementById("r1c1"); 71 var r1c4 = document.getElementById("r1c4"); 72 var r1c5 = document.getElementById("r1c5"); 73 var r1c6 = document.getElementById("r1c6"); 74 var r1c7 = document.getElementById("r1c7"); 75 var r2c3 = document.getElementById("r2c3"); 76 var r4c1 = document.getElementById("r4c1"); 77 var r4c6 = document.getElementById("r4c6"); 78 79 await focusAndKeyPress(r2c3, kArrowDown); 80 assert_equals(document.activeElement, r4c1); 81 82 await focusAndKeyPress(r1c5, kArrowDown); 83 assert_equals(document.activeElement, r4c1); 84 85 await focusAndKeyPress(r1c6, kArrowDown); 86 assert_equals(document.activeElement, r4c6); 87 88 // Goes to r1c1 because it flows to the first cell of the first column when 89 // on the last cell of the last column. 90 await focusAndKeyPress(r1c7, kArrowDown); 91 assert_equals(document.activeElement, r1c1); 92 93 await focusAndKeyPress(r4c6, kArrowDown); 94 assert_equals(document.activeElement, r1c7); 95 96 await focusAndKeyPress(r1c4, kArrowDown); 97 assert_equals(document.activeElement, r4c1); 98 }, "A down arrow press should move the focus to the right cell on the next row, dealing correctly with empty spaces."); 99 100 promise_test(async t => { 101 var r1c1 = document.getElementById("r1c1"); 102 var r1c3 = document.getElementById("r1c3"); 103 var r1c4 = document.getElementById("r1c4"); 104 var r3c1 = document.getElementById("r3c1"); 105 var r4c1 = document.getElementById("r4c1"); 106 var r4c6 = document.getElementById("r4c6"); 107 108 await focusAndKeyPress(r1c1, kArrowLeft); 109 assert_equals(document.activeElement, r4c6); 110 111 await focusAndKeyPress(r3c1, kArrowLeft); 112 assert_equals(document.activeElement, r1c4); 113 114 await focusAndKeyPress(r1c4, kArrowLeft); 115 assert_equals(document.activeElement, r1c3); 116 117 await focusAndKeyPress(r4c1, kArrowLeft); 118 assert_equals(document.activeElement, r1c4); 119 }, "A left arrow press should move to the previous column, dealing correctly with the empty spaces."); 120 121 promise_test(async t => { 122 var r1c1 = document.getElementById("r1c1"); 123 var r1c6 = document.getElementById("r1c6"); 124 var r1c7 = document.getElementById("r1c7"); 125 var r3c1 = document.getElementById("r3c1"); 126 var r4c1 = document.getElementById("r4c1"); 127 var r4c6 = document.getElementById("r4c6"); 128 129 await focusAndKeyPress(r1c7, kArrowUp); 130 assert_equals(document.activeElement, r4c6); 131 132 await focusAndKeyPress(r4c6, kArrowUp); 133 assert_equals(document.activeElement, r1c6); 134 135 await focusAndKeyPress(r1c6, kArrowUp); 136 assert_equals(document.activeElement, r4c1); 137 138 await focusAndKeyPress(r4c1, kArrowUp); 139 assert_equals(document.activeElement, r3c1); 140 141 await focusAndKeyPress(r1c1, kArrowUp); 142 assert_equals(document.activeElement, r1c7); 143 }, "An up arrow press should move the focus to the right cell on the previous row, dealing correctly with empty spaces."); 144 145 </script>