cool-Blue · August 29, 2015 14:22
diff --git a/readme.md b/readme.md
diff --git a/readme.md.bak b/readme.md.bak
 ## In Webkit and Blink ##


 ### Add a textPath element using **camelCase** ###
 	document.createElementNS("http://www.w3.org/2000/svg", "textPath")  
 	
 *	   Wrap it in a `text` element and add a `xlink:href`
 *	   Reference with `.setAttributeNS` and put text on `.textContent`
 *	   Try to find it with `querySelectorAll` and `querySelector` using "textPath" - **FAIL**
 *	   Try to find it with `querySelectorAll` and `querySelector` using "textpath" - **FAIL**
 *	   Try to find it with `getElementsByTagName` using "textPath" - **SUCCESS**
 *	   Try to find it with `getElementsByTagName` using "textpath" - **FAIL**
 *	   Check if text is rendered on textPath - **SUCCESS**


 ### Add a textPath element using **lowercase** ###
 	document.createElementNS("http://www.w3.org/2000/svg", "textpath")  
 	
 *    Wrap it in a `text` element and add a `xlink:href`
 *    Reference with `.setAttributeNS` and put text on `.textContent`
 *    Try to find it with `querySelectorAll` and `querySelector` using "textPath" - **SUCCESS**
 *    Try to find it with `querySelectorAll` and `querySelector` using "textpath" - **SUCCESS**
 *    Try to find it with `getElementsByTagName` using "textPath" - **FAIL**
 *    Try to find it with `getElementsByTagName` using "textpath" - **SUCCESS**
 *    Check if text is rendered on textPath - **FAIL**
diff --git a/fullsize.png b/fullsize.png
diff --git a/get browser info.js b/get browser info.js
 /// <reference path="../../SO Questions/Pie Chart/d3/d3 CB.js" />
 function get_browser_info() {
 	var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\w,\.]+)/i) || [];
 	if (/trident/i.test(M[1])) {
 		tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
 		return { name: 'IE', version: (tem[1] || '') };
 	}
 	if (M[1] === 'Chrome') {
 		tem = ua.match(/\bOPR\/(\d+)/)
 		if (tem != null) { return { name: 'Opera', version: tem[1] }; }
 	}
 	M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
 	if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
 	return M[0] + "\tversion: " + M[1]
 };
 function setAttributes(e, desc) {
 	var ns;
 	for (var attr in desc) {
 		if (ns = d3_ns.qualify(attr))
 			e.setAttributeNS(ns, attr, desc[attr]);
 		else
 			e.setAttribute(attr, desc[attr]);
 	}
 	return e;
 }
 var d3_nsPrefix = {
 	svg: "http://www.w3.org/2000/svg",
 	xhtml: "http://www.w3.org/1999/xhtml",
 	xlink: "http://www.w3.org/1999/xlink",
 	xml: "http://www.w3.org/XML/1998/namespace",
 	xmlns: "http://www.w3.org/2000/xmlns/"
 };
 d3_ns = {
 	prefix: d3_nsPrefix,
 	qualify: function (name) {
 		var i = name.indexOf(":"), prefix = name;
 		if (i >= 0) {
 			prefix = name.slice(0, i);
 			name = name.slice(i + 1);
 		}
 		//simplified by nailing it to a piece of wood...
 		return d3_nsPrefix.hasOwnProperty(prefix) ? d3_nsPrefix[prefix] : null;
 	}
 };
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title></title>
  <style type="text/css">
    svg {
      position: absolute;
    }

    body {
      white-space: pre;
      font: 12px Courier;
    }
  </style>
 </head>
 <body>
  <a href="fullsize.png">results for Chrome version: 43.0.2357.124</a><br />
  <script src="get browser info.js"></script>
  <script type="text/javascript">
    var ns = "http://www.w3.org/2000/svg",
        svg = document.body.appendChild(setAttributes(document.createElementNS(ns, "svg"),
          { height: "320", width: "400" }));

    draw("textPath", svg);

    document.writeln(get_browser_info());
    write(document, "querySelector", "textPath"); // fail
    write(document, "querySelector", "textpath"); // fail
    writeAll(document, "querySelectorAll", "textPath"); // fail
    writeAll(document, "querySelectorAll", "textpath"); // fail
    writeAll(document, "getElementsByTagName", "textPath"); // success!
    writeAll(document, "getElementsByTagName", "textpath"); // fail

    write(svg, "querySelector", "textPath"); // fail
    write(svg, "querySelector", "textpath"); // fail
    writeAll(svg, "querySelectorAll", "textPath"); // fail
    writeAll(svg, "querySelectorAll", "textpath"); // fail
    writeAll(svg, "getElementsByTagName", "textPath"); // success!
    writeAll(svg, "getElementsByTagName", "textpath"); // fail

    writeAll(svg, "querySelectorAll", "*"); // success!

    draw("textpath", svg);

    function write(element, method, selector) {
      var result = element[method](selector);
      document.write(element + " " + method + "(" + selector + "): ");
      if (result) document.write(result); else document.write("FAIL");
      document.writeln("");
    }

    function writeAll(element, method, selector) {
      var results = element[method](selector),
          i = -1,
          n = results.length;
      document.write(element + " " + method + "(" + selector + "): ");
      if (n) {
        while (++i < n) {
          document.write(results[i]);
          if (i < n - 1) document.write(", ");
        }
      } else document.write("FAIL");
      document.writeln("");
    }
    function draw(tp, svg) {
      var indx = svg.getElementsByTagName("g").length,
          dx = indx * 200, p1 = [-100, 0], p2 = [100, 0],
          group = svg.appendChild(setAttributes(document.createElementNS(ns, "g"),
            { transform: "translate(" + (100 + dx) + ",300)" })),
          path = group.appendChild(setAttributes(document.createElementNS(ns, "path"),
            { id: "myPath" + indx, d: "M" + p1 + " A100,70 0 0,1 " + p2, fill: "none", stroke: "black", })),
          tpLabel = group.appendChild(setAttributes(document.createElementNS(ns, "text"), { "text-anchor": "middle", dy: -20 })),
          text = group.appendChild(setAttributes(document.createElementNS(ns, "text"), { dy: 20 })),
          testTp = text.appendChild(setAttributes(document.createElementNS(ns, tp),
            { id: "testTextPath", "xlink:href": "#myPath" + indx, startOffset: 100, }));
      testTp.textContent = tp;
      tpLabel.textContent = tp;
    }
  </script>

 </body>
 </html>
diff --git a/Selecting SVG camelCase b/Selecting SVG camelCase
 Cannot find camelCase element, will not render text on textPath if the element is inserted in lower case.
diff --git a/thumbnail.png b/thumbnail.png
	## In Webkit and Blink ##


	### Add a textPath element using camelCase ###
	document.createElementNS("http://www.w3.org/2000/svg", "textPath")

	* Wrap it in a `text` element and add a `xlink:href`
	* Reference with `.setAttributeNS` and put text on `.textContent`
	* Try to find it with `querySelectorAll` and `querySelector` using "textPath" - FAIL
	* Try to find it with `querySelectorAll` and `querySelector` using "textpath" - FAIL
	* Try to find it with `getElementsByTagName` using "textPath" - SUCCESS
	* Try to find it with `getElementsByTagName` using "textpath" - FAIL
	* Check if text is rendered on textPath - SUCCESS


	### Add a textPath element using lowercase ###
	document.createElementNS("http://www.w3.org/2000/svg", "textpath")

	* Wrap it in a `text` element and add a `xlink:href`
	* Reference with `.setAttributeNS` and put text on `.textContent`
	* Try to find it with `querySelectorAll` and `querySelector` using "textPath" - SUCCESS
	* Try to find it with `querySelectorAll` and `querySelector` using "textpath" - SUCCESS
	* Try to find it with `getElementsByTagName` using "textPath" - FAIL
	* Try to find it with `getElementsByTagName` using "textpath" - SUCCESS
	* Check if text is rendered on textPath - FAIL
	/// <reference path="../../SO Questions/Pie Chart/d3/d3 CB.js" />
	function get_browser_info() {
	var ua = navigator.userAgent, tem, M = ua.match(/(opera\|chrome\|safari\|firefox\|msie\|trident(?=\/))\/?\s*([\w,\.]+)/i) \|\| [];
	if (/trident/i.test(M[1])) {
	tem = /\brv[ :]+(\d+)/g.exec(ua) \|\| [];
	return { name: 'IE', version: (tem[1] \|\| '') };
	}
	if (M[1] === 'Chrome') {
	tem = ua.match(/\bOPR\/(\d+)/)
	if (tem != null) { return { name: 'Opera', version: tem[1] }; }
	}
	M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
	if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
	return M[0] + "\tversion: " + M[1]
	};
	function setAttributes(e, desc) {
	var ns;
	for (var attr in desc) {
	if (ns = d3_ns.qualify(attr))
	e.setAttributeNS(ns, attr, desc[attr]);
	else
	e.setAttribute(attr, desc[attr]);
	}
	return e;
	}
	var d3_nsPrefix = {
	svg: "http://www.w3.org/2000/svg",
	xhtml: "http://www.w3.org/1999/xhtml",
	xlink: "http://www.w3.org/1999/xlink",
	xml: "http://www.w3.org/XML/1998/namespace",
	xmlns: "http://www.w3.org/2000/xmlns/"
	};
	d3_ns = {
	prefix: d3_nsPrefix,
	qualify: function (name) {
	var i = name.indexOf(":"), prefix = name;
	if (i >= 0) {
	prefix = name.slice(0, i);
	name = name.slice(i + 1);
	}
	//simplified by nailing it to a piece of wood...
	return d3_nsPrefix.hasOwnProperty(prefix) ? d3_nsPrefix[prefix] : null;
	}
	};
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<style type="text/css">
	svg {
	position: absolute;
	}

	body {
	white-space: pre;
	font: 12px Courier;
	}
	</style>
	</head>
	<body>
	<a href="fullsize.png">results for Chrome version: 43.0.2357.124</a><br />
	<script src="get browser info.js"></script>
	<script type="text/javascript">
	var ns = "http://www.w3.org/2000/svg",
	svg = document.body.appendChild(setAttributes(document.createElementNS(ns, "svg"),
	{ height: "320", width: "400" }));

	draw("textPath", svg);

	document.writeln(get_browser_info());
	write(document, "querySelector", "textPath"); // fail
	write(document, "querySelector", "textpath"); // fail
	writeAll(document, "querySelectorAll", "textPath"); // fail
	writeAll(document, "querySelectorAll", "textpath"); // fail
	writeAll(document, "getElementsByTagName", "textPath"); // success!
	writeAll(document, "getElementsByTagName", "textpath"); // fail

	write(svg, "querySelector", "textPath"); // fail
	write(svg, "querySelector", "textpath"); // fail
	writeAll(svg, "querySelectorAll", "textPath"); // fail
	writeAll(svg, "querySelectorAll", "textpath"); // fail
	writeAll(svg, "getElementsByTagName", "textPath"); // success!
	writeAll(svg, "getElementsByTagName", "textpath"); // fail

	writeAll(svg, "querySelectorAll", "*"); // success!

	draw("textpath", svg);

	function write(element, method, selector) {
	var result = element[method](selector);
	document.write(element + " " + method + "(" + selector + "): ");
	if (result) document.write(result); else document.write("FAIL");
	document.writeln("");
	}

	function writeAll(element, method, selector) {
	var results = element[method](selector),
	i = -1,
	n = results.length;
	document.write(element + " " + method + "(" + selector + "): ");
	if (n) {
	while (++i < n) {
	document.write(results[i]);
	if (i < n - 1) document.write(", ");
	}
	} else document.write("FAIL");
	document.writeln("");
	}
	function draw(tp, svg) {
	var indx = svg.getElementsByTagName("g").length,
	dx = indx * 200, p1 = [-100, 0], p2 = [100, 0],
	group = svg.appendChild(setAttributes(document.createElementNS(ns, "g"),
	{ transform: "translate(" + (100 + dx) + ",300)" })),
	path = group.appendChild(setAttributes(document.createElementNS(ns, "path"),
	{ id: "myPath" + indx, d: "M" + p1 + " A100,70 0 0,1 " + p2, fill: "none", stroke: "black", })),
	tpLabel = group.appendChild(setAttributes(document.createElementNS(ns, "text"), { "text-anchor": "middle", dy: -20 })),
	text = group.appendChild(setAttributes(document.createElementNS(ns, "text"), { dy: 20 })),
	testTp = text.appendChild(setAttributes(document.createElementNS(ns, tp),
	{ id: "testTextPath", "xlink:href": "#myPath" + indx, startOffset: 100, }));
	testTp.textContent = tp;
	tpLabel.textContent = tp;
	}
	</script>

	</body>
	</html>