tabindex-focus.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/svg/dom/tabindex-focus.html
