| <!doctype html> |
| <title>Tabindex on svg elements tests</title> |
| <script src=../../resources/testharness.js></script> |
| <script src=../../resources/testharnessreport.js></script> |
| <body> |
| <div id="testcontainer"><svg id="testroot" width="1" height="1"/></div> |
| <div id=log></div> |
| <script> |
| var svg = document.getElementById("testroot"); |
| function isFocusable(elm) { |
| switch (elm.nodeName) { |
| case "a": |
| return elm.hasAttributeNS("http://www.w3.org/1999/xlink", "href"); |
| default: |
| return false; |
| } |
| } |
| function isFocusableWithTabindex(elm) { |
| switch (elm.nodeName) { |
| case "a": |
| case "circle": |
| case "ellipse": |
| case "foreignObject": |
| case "g": |
| case "image": |
| case "line": |
| case "path": |
| case "polygon": |
| case "polyline": |
| case "rect": |
| case "svg": |
| case "switch": |
| case "text": |
| return true; |
| case "textPath": |
| //case "tref": /* not supported */ |
| case "tspan": |
| // only if inside a <text> element |
| return elm.parentNode.nodeName == "text"; |
| case "use": |
| return true; |
| default: |
| return false; |
| } |
| } |
| function createSvg() { |
| var svgelements = [ |
| "a", |
| "altGlyph", |
| "altGlyphDef", |
| "altGlyphItem", |
| "animate", |
| "animateColor", |
| "animateMotion", |
| "animateTransform", |
| "circle", |
| "clipPath", |
| "color-profile", |
| "cursor", |
| "definition-src", |
| "defs", |
| "desc", |
| "ellipse", |
| "feBlend", |
| "feColorMatrix", |
| "feComponentTransfer", |
| "feComposite", |
| "feConvolveMatrix", |
| "feDiffuseLighting", |
| "feDisplacementMap", |
| "feDistantLight", |
| "feFlood", |
| "feFuncA", |
| "feFuncB", |
| "feFuncG", |
| "feFuncR", |
| "feGaussianBlur", |
| "feImage", |
| "feMerge", |
| "feMergeNode", |
| "feMorphology", |
| "feOffset", |
| "fePointLight", |
| "feSpecularLighting", |
| "feSpotLight", |
| "feTile", |
| "feTurbulence", |
| "filter", |
| "font", |
| "font-face", |
| "font-face-format", |
| "font-face-name", |
| "font-face-src", |
| "font-face-uri", |
| "foreignObject", |
| "g", |
| "glyph", |
| "glyphRef", |
| "hkern", |
| "image", |
| "line", |
| "linearGradient", |
| "marker", |
| "mask", |
| "metadata", |
| "missing-glyph", |
| "mpath", |
| "path", |
| "pattern", |
| "polygon", |
| "polyline", |
| "radialGradient", |
| "rect", |
| "script", |
| "set", |
| "stop", |
| "style", |
| "svg", |
| "switch", |
| "symbol", |
| "text", |
| "textPath", |
| "title", |
| "tref", |
| "tspan", |
| "use", |
| "view", |
| "vkern"]; |
| for (var i = 0; i < svgelements.length; i++) { |
| svg.appendChild(document.createElementNS("http://www.w3.org/2000/svg", svgelements[i])); |
| } |
| } |
| |
| function setupTextContentElements() { |
| // specialcases for the text content elements |
| |
| // cleanup any old content |
| while(svg.firstChild) |
| svg.removeChild(svg.firstChild); |
| |
| var textContentChildElements = ["textPath", "tref", "tspan"]; |
| for (var i = 0; i < textContentChildElements.length; i++) { |
| var text = document.createElementNS("http://www.w3.org/2000/svg", "text"); |
| text.appendChild(document.createElementNS("http://www.w3.org/2000/svg", textContentChildElements[i])); |
| svg.appendChild(text); |
| } |
| } |
| |
| setup(createSvg); |
| var element = svg.firstElementChild; |
| while(element) { |
| test(function() { |
| try { |
| element.focus(); |
| assert_equals(document.activeElement, isFocusable(element) ? element : document.body); |
| } |
| finally { |
| document.body.focus(); |
| } |
| }, element.nodeName + ".focus() without tabindex set."); |
| test(function() { |
| try { |
| element.setAttribute("tabindex", "1"); |
| element.focus(); |
| assert_equals(document.activeElement, isFocusableWithTabindex(element) ? element : document.body); |
| element.removeAttribute("tabindex"); |
| } |
| finally { |
| document.body.focus(); |
| } |
| }, element.nodeName + ".focus() with tabindex set."); |
| |
| element.parentNode.removeChild(element); |
| element = svg.firstElementChild; |
| } |
| |
| setupTextContentElements(); |
| var element = svg.firstElementChild; |
| while(element) { |
| test(function() { |
| try { |
| element.firstElementChild.focus(); |
| assert_equals(document.activeElement, isFocusable(element.firstElementChild) ? element.firstElementChild : document.body); |
| } |
| finally { |
| document.body.focus(); |
| } |
| }, element.firstElementChild.nodeName + ".focus() without tabindex set (as text child.)"); |
| test(function() { |
| try { |
| element.firstElementChild.setAttribute("tabindex", "1"); |
| element.firstElementChild.focus(); |
| assert_equals(document.activeElement, isFocusableWithTabindex(element.firstElementChild) ? element.firstElementChild : document.body); |
| element.firstElementChild.removeAttribute("tabindex"); |
| } |
| finally { |
| document.body.focus(); |
| } |
| }, element.firstElementChild.nodeName + ".focus() with tabindex set (as text child.)"); |
| |
| element.parentNode.removeChild(element); |
| element = svg.firstElementChild; |
| } |
| </script> |
| </body> |
