src/third_party/WebKit/LayoutTests/fast/svg/tabindex-focus.html

   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", svgelements[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(element) ? 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, isFocusableWithTabindex(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(element.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, isFocusableWithTabindex(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>