forked from WebKit/WebKit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtabindex-order.html
126 lines (112 loc) · 5.43 KB
/
tabindex-order.html
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
<!DOCTYPE html>
<html>
<head>
<script>
function log(msg)
{
document.getElementById('log').appendChild(document.createTextNode(msg + '\n'));
}
function dispatchTabPress(element, shiftKey)
{
var event = document.createEvent('KeyboardEvents');
var tabKeyIdentifier = 'U+0009';
event.initKeyboardEvent('keydown', true, true, document.defaultView, tabKeyIdentifier, 0, false, false, shiftKey, false, false);
element.dispatchEvent(event);
}
var lastFocusedElement = null;
function focusListener(event)
{
log('id: ' + event.target.id + ' tabindex: ' + event.target.tabIndex + ' ' + event.target.nodeName + ' is focused.');
lastFocusedElement = event.target;
}
function addEventListenersToElements(elements)
{
for (const element of elements)
element.addEventListener('focus', focusListener, false);
}
function test()
{
if (window.testRunner)
testRunner.dumpAsText();
document.activeElement.blur();
var elements = document.getElementsByClassName('tab');
// Put focus in the page
elements[0].focus();
elements[0].blur();
addEventListenersToElements(elements);
log('Tabbing forward....\n');
dispatchTabPress(document, false);
for (const element of elements) {
dispatchTabPress(document, false);
if (document.activeElement.id == 'a')
break;
}
lastFocusedElement.blur();
log('\nTabbing backward....\n');
dispatchTabPress(document, true);
for (const element of elements) {
dispatchTabPress(document, true);
if (document.activeElement.id == 'y')
break;
}
log('\nTest finished\n');
}
</script>
</head>
<body onload="test()">
<p>This page tests that the MathML tabbing order is respected properly.</p>
<p>To test, put focus in "a". Pressing Tab should focus "a" through "y" in order, and pressing Shift-Tab should reverse the order.</p>
<math>
<mspace class="tab" tabindex="6" id="g" width="1" height="1"/>
<mspace class="tab" id="mspace without tabindex is not focusable" width="1" height="1"/>
<mfrac class="tab" tabindex="1" id="a"/>
<mfrac class="tab" id="mfrac without tabindex is not focusable"/>
<mspace class="tab" tabindex="-5" id="not in tab order (negative tabindex)" width="1" height="1"/>
<mrow class="tab" tabindex="1" id="b"/>
<mrow class="tab" id="mrow without tabindex is not focusable"/>
<math class="tab" tabindex="0" id="i"/>
<mtext class="tab" tabindex="6" id="h"/>
<mtext class="tab" id="mtext without tabindex is not focusable"/>
<mpadded class="tab" tabindex="1" id="c"/>
<mpadded class="tab" id="mpadded without tabindex is not focusable"/>
<msqrt class="tab" tabindex="1" id="d"/>
<msqrt class="tab" id="msqrt without tabindex is not focusable"/>
<mroot class="tab" tabindex="1" id="e"/>
<mroot class="tab" id="mroot without tabindex is not focusable"/>
<mover class="tab" tabindex="0" id="j"/>
<mover class="tab" id="mover without tabindex is not focusable"/>
<mspace class="tab" tabindex="-1" id="not in tab order (negative tabindex)"/>
<munder class="tab" tabindex="0" id="k"/>
<munder class="tab" id="munder without tabindex is not focusable"/>
<munderover class="tab" tabindex="0" id="l"/>
<munderover class="tab" id="munderover without tabindex is not focusable"/>
<msub class="tab" tabindex="0" id="m"/>
<msub class="tab" id="msub without tabindex is not focusable"/>
<msup class="tab" tabindex="0" id="n"/>
<msup class="tab" id="msup without tabindex is not focusable"/>
<msubsup class="tab" tabindex="0" id="o"/>
<msubsup class="tab" id="msubsup without tabindex is not focusable"/>
<mmultiscripts class="tab" tabindex="0" id="p"/>
<mmultiscripts class="tab" id="mmultiscripts without tabindex is not focusable"/>
<menclose class="tab" tabindex="0" id="q"/>
<menclose class="tab" id="menclose without tabindex is not focusable"/>
<mphantom class="tab" tabindex="0" id="r"/>
<mphantom class="tab" id="mphantom without tabindex is not focusable"/>
<mstyle class="tab" tabindex="0" id="s"/>
<mstyle class="tab" id="mstyle without tabindex is not focusable"/>
<merror class="tab" tabindex="0" id="t"/>
<merror class="tab" id="merror without tabindex is not focusable"/>
<mtable class="tab" tabindex="0" id="u"/>
<mtable class="tab" id="mtable without tabindex is not focusable"/>
<ms class="tab" tabindex="0" id="v"/>
<ms class="tab" id="ms without tabindex is not focusable"/>
<mi class="tab" tabindex="0" id="w"/>
<mi class="tab" id="mi without tabindex is not focusable"/>
<mo class="tab" tabindex="0" id="x"/>
<mo class="tab" id="mo without tabindex is not focusable"/>
<mn class="tab" tabindex="0" id="y"/>
<mn class="tab" id="mn without tabindex is not focusable"/>
</math>
<pre id="log"></pre>
</body>
</html>