1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: focusgroup - Validate that we deal correctly with rowspans.</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="../resources/focusgroup-utils.js"></script>
<table focusgroup="grid">
<tr>
<td id=r1c1 tabindex=-1>r1c1</td>
<td id=r1c2 tabindex=-1>r1c2</td>
<td id=r1c3 tabindex=-1>r1c3</td>
</tr>
<tr>
<td id=r2c1 tabindex=0>r2c1</td>
<td id=r2c2 tabindex=-1 rowspan=3>r2c2</td>
<td id=r2c3 tabindex=-1>r3c3</td>
</tr>
<tr>
<td id=r3c1 tabindex=-1>r3c1</td>
<td id=r3c3 tabindex=-1>r3c3</td>
</tr>
<tr>
<td id=r4c1 tabindex=-1>r4c1</td>
<td id=r4c3 tabindex=-1>r4c3</td>
</tr>
<tr>
<td id=r5c1 tabindex=-1>r5c1</td>
<td id=r5c2 tabindex=-1>r5c2</td>
<td id=r5c3 tabindex=-1>r5c3</td>
</tr>
</table>
<script>
promise_test(async t => {
var r2c1 = document.getElementById("r2c1");
var r2c2 = document.getElementById("r2c2");
var r2c3 = document.getElementById("r2c3");
var r3c1 = document.getElementById("r3c1");
var r4c1 = document.getElementById("r4c1");
var r5c1 = document.getElementById("r5c1");
var r5c2 = document.getElementById("r5c2");
await focusAndKeyPress(r2c1, kArrowRight);
assert_equals(document.activeElement, r2c2);
await focusAndKeyPress(r2c2, kArrowRight);
assert_equals(document.activeElement, r2c3);
await focusAndKeyPress(r3c1, kArrowRight);
assert_equals(document.activeElement, r2c2);
await focusAndKeyPress(r4c1, kArrowRight);
assert_equals(document.activeElement, r2c2);
await focusAndKeyPress(r5c1, kArrowRight);
assert_equals(document.activeElement, r5c2);
}, "A right arrow press should move the focus to the next column, dealing correctly with rowspans.");
promise_test(async t => {
var r1c2 = document.getElementById("r1c2");
var r1c3 = document.getElementById("r1c3");
var r2c2 = document.getElementById("r2c2");
var r2c3 = document.getElementById("r2c3");
var r3c3 = document.getElementById("r3c3");
var r5c2 = document.getElementById("r5c2");
var r5c3 = document.getElementById("r5c3");
await focusAndKeyPress(r1c2, kArrowDown);
assert_equals(document.activeElement, r2c2);
await focusAndKeyPress(r1c3, kArrowDown);
assert_equals(document.activeElement, r2c3);
await focusAndKeyPress(r2c2, kArrowDown);
assert_equals(document.activeElement, r5c2);
await focusAndKeyPress(r2c3, kArrowDown);
assert_equals(document.activeElement, r3c3);
await focusAndKeyPress(r3c3, kArrowDown);
assert_equals(document.activeElement, r4c3);
await focusAndKeyPress(r4c3, kArrowDown);
assert_equals(document.activeElement, r5c3);
}, "A down arrow press should move the focus to the right cell on the next row, dealing correctly with rowspans.");
promise_test(async t => {
var r2c1 = document.getElementById("r2c1");
var r2c2 = document.getElementById("r2c2");
var r2c3 = document.getElementById("r2c3");
var r3c3 = document.getElementById("r3c3");
var r4c3 = document.getElementById("r4c3");
var r5c3 = document.getElementById("r5c3");
var r5c2 = document.getElementById("r5c2");
await focusAndKeyPress(r2c3, kArrowLeft);
assert_equals(document.activeElement, r2c2);
await focusAndKeyPress(r2c2, kArrowLeft);
assert_equals(document.activeElement, r2c1);
await focusAndKeyPress(r3c3, kArrowLeft);
assert_equals(document.activeElement, r2c2);
await focusAndKeyPress(r4c3, kArrowLeft);
assert_equals(document.activeElement, r2c2);
await focusAndKeyPress(r5c3, kArrowLeft);
assert_equals(document.activeElement, r5c2);
}, "A left arrow press should move to the previous column, dealing correctly with the rowspans.");
promise_test(async t => {
var r1c2 = document.getElementById("r1c2");
var r1c3 = document.getElementById("r1c3");
var r2c2 = document.getElementById("r2c2");
var r2c3 = document.getElementById("r2c3");
var r3c3 = document.getElementById("r3c3");
var r4c3 = document.getElementById("r4c3");
var r5c2 = document.getElementById("r5c2");
var r5c3 = document.getElementById("r5c3");
await focusAndKeyPress(r5c2, kArrowUp);
assert_equals(document.activeElement, r2c2);
await focusAndKeyPress(r5c3, kArrowUp);
assert_equals(document.activeElement, r4c3);
await focusAndKeyPress(r2c2, kArrowUp);
assert_equals(document.activeElement, r1c2);
await focusAndKeyPress(r4c3, kArrowUp);
assert_equals(document.activeElement, r3c3);
await focusAndKeyPress(r3c3, kArrowUp);
assert_equals(document.activeElement, r2c3);
await focusAndKeyPress(r2c3, kArrowUp);
assert_equals(document.activeElement, r1c3);
}, "An up arrow press should move the focus to the right cell on the previous row, dealing correctly with rowspans.");
</script>
|
