colspan.html (3507B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Validate that we deal correctly with colspans.</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 <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 <table focusgroup="grid"> 14 <tr> 15 <td id=r1c1 tabindex=0>r1c1</td> 16 <td id=r1c2 tabindex=0 colspan=2>r1c2</td> 17 <td id=r1c4 tabindex=0>r1c4</td> 18 </tr> 19 <tr> 20 <td id=r2c1 tabindex=0>r2c1</td> 21 <td id=r2c2 tabindex=0>r2c2</td> 22 <td id=r2c3 tabindex=0>r2c3</td> 23 <td id=r2c4 tabindex=0>r2c4</td> 24 </tr> 25 </table> 26 27 <script> 28 29 promise_test(async t => { 30 var r1c1 = document.getElementById("r1c1"); 31 var r1c2 = document.getElementById("r1c2"); 32 var r1c4 = document.getElementById("r1c4"); 33 34 await focusAndKeyPress(r1c1, kArrowRight); 35 assert_equals(document.activeElement, r1c2); 36 37 await focusAndKeyPress(r1c2, kArrowRight); 38 assert_equals(document.activeElement, r1c4); 39 }, "A right arrow press should move the focus to the next column, dealing correctly with colspans."); 40 41 promise_test(async t => { 42 var r1c1 = document.getElementById("r1c1"); 43 var r1c2 = document.getElementById("r1c2"); 44 var r1c4 = document.getElementById("r1c4"); 45 var r2c1 = document.getElementById("r2c1"); 46 var r2c2 = document.getElementById("r2c2"); 47 var r2c4 = document.getElementById("r2c4"); 48 49 await focusAndKeyPress(r1c1, kArrowDown); 50 assert_equals(document.activeElement, r2c1); 51 52 await focusAndKeyPress(r1c2, kArrowDown); 53 assert_equals(document.activeElement, r2c2); 54 55 await focusAndKeyPress(r1c4, kArrowDown); 56 assert_equals(document.activeElement, r2c4); 57 }, "A down arrow press should move the focus to the right cell on the next row, dealing correctly with colspans."); 58 59 promise_test(async t => { 60 var r1c1 = document.getElementById("r1c1"); 61 var r1c2 = document.getElementById("r1c2"); 62 var r1c4 = document.getElementById("r1c4"); 63 64 await focusAndKeyPress(r1c4, kArrowLeft); 65 assert_equals(document.activeElement, r1c2); 66 67 await focusAndKeyPress(r1c2, kArrowLeft); 68 assert_equals(document.activeElement, r1c1); 69 }, "A left arrow press should move to the previous column, dealing correctly with the colspans."); 70 71 promise_test(async t => { 72 var r1c1 = document.getElementById("r1c1"); 73 var r1c2 = document.getElementById("r1c2"); 74 var r1c4 = document.getElementById("r1c4"); 75 var r2c1 = document.getElementById("r2c1"); 76 var r2c2 = document.getElementById("r2c2"); 77 var r2c3 = document.getElementById("r2c3"); 78 var r2c4 = document.getElementById("r2c4"); 79 80 await focusAndKeyPress(r2c1, kArrowUp); 81 assert_equals(document.activeElement, r1c1); 82 83 await focusAndKeyPress(r2c2, kArrowUp); 84 assert_equals(document.activeElement, r1c2); 85 86 await focusAndKeyPress(r2c3, kArrowUp); 87 assert_equals(document.activeElement, r1c2); 88 89 await focusAndKeyPress(r2c4, kArrowUp); 90 assert_equals(document.activeElement, r1c4); 91 }, "An up arrow press should move the focus to the right cell on the previous row, dealing correctly with colspans."); 92 93 </script>