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
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test for SVG tabIndex - Bug 778654</title>
<link rel="stylesheet" type="text/css"
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" overflow="visible">
<foreignObject id="f" x="0" y="0" width="200" height="60" tabindex="0">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
</foreignObject>
<rect id="r" x="0" y="70" width="100" height="100" fill="yellow" tabindex="1"/>
<text id="t" x="0" y="200" tabindex="2">
This is SVG text
</text>
<a xlink:href="#" id="l1" tabindex="3">
<circle cx="10" cy="230" r="10"/>
</a>
<a id="l2" tabindex="4">
<circle cx="10" cy="260" r="10"/>
</a>
<rect id="r6" x="0" y="70" width="100" height="100" fill="yellow" tabindex="6"/>
<rect id="r7" x="0" y="70" width="100" height="100" fill="yellow" tabindex="7"/>
</svg>
<pre id="test">
<script class="testbody" type="text/javascript">
SimpleTest.waitForExplicitFinish();
function main() {
var f = document.getElementById("f");
var r = document.getElementById("r");
var t = document.getElementById("t");
var l1 = document.getElementById("l1");
var l2 = document.getElementById("l2");
const isMac = ("nsILocalFileMac" in SpecialPowers.Ci);
try {
// Step 1: Checking by assigning tabIndex
is(f.tabIndex, 0, "foreignObject initial tabIndex");
f.tabIndex = 1;
is(f.tabIndex, 1, "foreignObject tabIndex is set to 1");
is(r.tabIndex, 1, "rect initial tabIndex");
r.tabIndex = 2;
is(r.tabIndex, 2, "rect tabIndex is set to 2");
is(t.tabIndex, 2, "text initial tabIndex");
t.tabIndex = 3;
is(t.tabIndex, 3, "text is set to 3");
is(l1.tabIndex, 3, "link initial tabIndex");
l1.tabIndex = 4;
is(l1.tabIndex, 4, "link is set to 4");
is(l2.tabIndex, 4, "non-link initial tabIndex");
l2.tabIndex = 5;
is(l2.tabIndex, 5, "non-link is set to 4");
// Step 2: Checking by triggering TAB event
is(document.activeElement.tabIndex, -1, "In the beginning, the active element tabindex is -1");
synthesizeKey("KEY_Tab");
is(document.activeElement.tabIndex, 1, "The active element tabindex is 1");
synthesizeKey("KEY_Tab");
is(document.activeElement.tabIndex, 2, "The active element tabindex is 2");
synthesizeKey("KEY_Tab");
is(document.activeElement.tabIndex, 3, "The active element tabindex is 3");
synthesizeKey("KEY_Tab");
// On Mac, SVG link elements should not be focused.
if (isMac) {
is(document.activeElement.tabIndex, 6, "The active element tabindex is 6");
} else {
is(document.activeElement.tabIndex, 4, "The active element tabindex is 4");
}
synthesizeKey("KEY_Tab");
// On Mac, SVG link elements should not be focused.
if (isMac) {
is(document.activeElement.tabIndex, 7, "The active element tabindex is 7");
} else {
is(document.activeElement.tabIndex, 5, "The active element tabindex is 5");
}
} catch (e) {
ok(false, "Got unexpected exception" + e);
}
SimpleTest.finish();
}
SimpleTest.waitForFocus(main);
</script>
</pre>
</body>
</html>
|
