OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <title>Tabindex on svg elements tests</title> | |
3 <script src=../../resources/testharness.js></script> | |
4 <script src=../../resources/testharnessreport.js></script> | |
5 <body> | |
6 <div id="testcontainer"><svg id="testroot" width="1" height="1"/></div> | |
7 <div id=log></div> | |
8 <script> | |
9 var svg = document.getElementById("testroot"); | |
10 function isFocusable(elm) { | |
11 switch (elm.nodeName) { | |
12 case "a": | |
13 return elm.hasAttributeNS("http://www.w3.org/1999/xlink"
, "href"); | |
14 default: | |
15 return false; | |
16 } | |
17 } | |
18 function isFocusableWithTabindex(elm) { | |
19 switch (elm.nodeName) { | |
20 case "a": | |
21 case "circle": | |
22 case "ellipse": | |
23 case "foreignObject": | |
24 case "g": | |
25 case "image": | |
26 case "line": | |
27 case "path": | |
28 case "polygon": | |
29 case "polyline": | |
30 case "rect": | |
31 case "svg": | |
32 case "switch": | |
33 case "text": | |
34 return true; | |
35 case "textPath": | |
36 //case "tref": /* not supported */ | |
37 case "tspan": | |
38 // only if inside a <text> element | |
39 return elm.parentNode.nodeName == "text"; | |
40 case "use": | |
41 return true; | |
42 default: | |
43 return false; | |
44 } | |
45 } | |
46 function createSvg() { | |
47 var svgelements = [ | |
48 "a", | |
49 "altGlyph", | |
50 "altGlyphDef", | |
51 "altGlyphItem", | |
52 "animate", | |
53 "animateColor", | |
54 "animateMotion", | |
55 "animateTransform", | |
56 "circle", | |
57 "clipPath", | |
58 "color-profile", | |
59 "cursor", | |
60 "definition-src", | |
61 "defs", | |
62 "desc", | |
63 "ellipse", | |
64 "feBlend", | |
65 "feColorMatrix", | |
66 "feComponentTransfer", | |
67 "feComposite", | |
68 "feConvolveMatrix", | |
69 "feDiffuseLighting", | |
70 "feDisplacementMap", | |
71 "feDistantLight", | |
72 "feFlood", | |
73 "feFuncA", | |
74 "feFuncB", | |
75 "feFuncG", | |
76 "feFuncR", | |
77 "feGaussianBlur", | |
78 "feImage", | |
79 "feMerge", | |
80 "feMergeNode", | |
81 "feMorphology", | |
82 "feOffset", | |
83 "fePointLight", | |
84 "feSpecularLighting", | |
85 "feSpotLight", | |
86 "feTile", | |
87 "feTurbulence", | |
88 "filter", | |
89 "font", | |
90 "font-face", | |
91 "font-face-format", | |
92 "font-face-name", | |
93 "font-face-src", | |
94 "font-face-uri", | |
95 "foreignObject", | |
96 "g", | |
97 "glyph", | |
98 "glyphRef", | |
99 "hkern", | |
100 "image", | |
101 "line", | |
102 "linearGradient", | |
103 "marker", | |
104 "mask", | |
105 "metadata", | |
106 "missing-glyph", | |
107 "mpath", | |
108 "path", | |
109 "pattern", | |
110 "polygon", | |
111 "polyline", | |
112 "radialGradient", | |
113 "rect", | |
114 "script", | |
115 "set", | |
116 "stop", | |
117 "style", | |
118 "svg", | |
119 "switch", | |
120 "symbol", | |
121 "text", | |
122 "textPath", | |
123 "title", | |
124 "tref", | |
125 "tspan", | |
126 "use", | |
127 "view", | |
128 "vkern"]; | |
129 for (var i = 0; i < svgelements.length; i++) { | |
130 svg.appendChild(document.createElementNS("http://www.w3.org/2000/svg", s
vgelements[i])); | |
131 } | |
132 } | |
133 | |
134 function setupTextContentElements() { | |
135 // specialcases for the text content elements | |
136 | |
137 // cleanup any old content | |
138 while(svg.firstChild) | |
139 svg.removeChild(svg.firstChild); | |
140 | |
141 var textContentChildElements = ["textPath", "tref", "tspan"]; | |
142 for (var i = 0; i < textContentChildElements.length; i++) { | |
143 var text = document.createElementNS("http://www.w3.org/2000/svg", "text"
); | |
144 text.appendChild(document.createElementNS("http://www.w3.org/2000/svg",
textContentChildElements[i])); | |
145 svg.appendChild(text); | |
146 } | |
147 } | |
148 | |
149 setup(createSvg); | |
150 var element = svg.firstElementChild; | |
151 while(element) { | |
152 test(function() { | |
153 try { | |
154 element.focus(); | |
155 assert_equals(document.activeElement, isFocusable(elemen
t) ? element : document.body); | |
156 } | |
157 finally { | |
158 document.body.focus(); | |
159 } | |
160 }, element.nodeName + ".focus() without tabindex set."); | |
161 test(function() { | |
162 try { | |
163 element.setAttribute("tabindex", "1"); | |
164 element.focus(); | |
165 assert_equals(document.activeElement, isFocusableWithTab
index(element) ? element : document.body); | |
166 element.removeAttribute("tabindex"); | |
167 } | |
168 finally { | |
169 document.body.focus(); | |
170 } | |
171 }, element.nodeName + ".focus() with tabindex set."); | |
172 | |
173 element.parentNode.removeChild(element); | |
174 element = svg.firstElementChild; | |
175 } | |
176 | |
177 setupTextContentElements(); | |
178 var element = svg.firstElementChild; | |
179 while(element) { | |
180 test(function() { | |
181 try { | |
182 element.firstElementChild.focus(); | |
183 assert_equals(document.activeElement, isFocusable(elemen
t.firstElementChild) ? element.firstElementChild : document.body); | |
184 } | |
185 finally { | |
186 document.body.focus(); | |
187 } | |
188 }, element.firstElementChild.nodeName + ".focus() without tabindex set."
); | |
189 test(function() { | |
190 try { | |
191 element.firstElementChild.setAttribute("tabindex", "1"); | |
192 element.firstElementChild.focus(); | |
193 assert_equals(document.activeElement, isFocusableWithTab
index(element.firstElementChild) ? element.firstElementChild : document.body); | |
194 element.firstElementChild.removeAttribute("tabindex"); | |
195 } | |
196 finally { | |
197 document.body.focus(); | |
198 } | |
199 }, element.firstElementChild.nodeName + ".focus() with tabindex set."); | |
200 | |
201 element.parentNode.removeChild(element); | |
202 element = svg.firstElementChild; | |
203 } | |
204 </script> | |
205 </body> | |
OLD | NEW |