cpsievert · August 29, 2015 14:14
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <style>
 body	{
 	font-family: sans-serif;
 	font-size: 0.7em;
 }

 pre	{
 	position: absolute;
 	top: 0px;
 	left: 180px;
 	font-size: 1.3em;	
 }

 svg	{
 	shape-rendering: crispEdges;
 	border: 3px solid black;
 }

 table 	{
 	border-collapse: collapse;	
 }

 th, td	{
 	padding: 2px;
 }

 td:nth-child(3)	{
 	text-align: right;
 }

 text	{
 	font-size: 2em;
 }

 </style>
 </head>
 <body>
 <svg width="150" height="150">
 	<text id="test1" y="50">test1</text>
 	<text id="test2" y="100">
 		<tspan id="test3">test3</tspan>	
 	</text>
 	<tspan id="test4">test4</tspan>
 </svg>

 <pre>
 &lt;svg width="150" height="150"&gt;
 	&lt;text id="test1" y="50"&gt;test1&lt;/text&gt;
 	&lt;text id="test2" y="100"&gt;
 		&lt;tspan id="test3"&gt;test3&lt;/tspan&gt;	
 	&lt;/text&gt;
 	&lt;tspan id="test4"&gt;test4&lt;/tspan&gt;
 &lt;/svg&gt;
 </pre>
 <p></p>
 <table border="1">
 	<tr>
 		<th>id</th><th>Code</th><th>Result</th><th>Note</th>
 	</tr>
 	<tr>
 		<td>test1</td><td>document.getElementById("test1").getBBox().width</td><td id="result1a"></td><td>Integer in Chrome; Float in IE and Firefox.</td>
 	</tr>
 	<tr>
 		<td>test2</td><td>document.getElementById("test2").getBBox().width</td><td id="result2a"></td><td>Integer in Chrome; Float in IE and Firefox.</td>
 	</tr>
 	<tr>
 		<td>test3</td><td>document.getElementById("test3").getBBox().width</td><td id="result3a"></td><td>IE and Firefox can't get the BBox of a TSPAN and error out.</td>
 	</tr>
 	<tr>
 		<td>test4</td><td>document.getElementById("test4").getBBox().width</td><td id="result4a"></td><td>IE and Firefox can't get the BBox of a TSPAN whether it's inside a TEXT or not.</td>
 	</tr>
 	<tr><td colspan="4"></td></tr>
 	<tr>
 		<td>test1</td><td>document.getElementById("test1").getBoundingClientRect().width</td><td id="result1b"></td><td>Integer in IE, Chrome and Safari. Same width as "test2" in Chrome eventhough 1 is narrower than 2.</td>
 	</tr>
 	<tr>
 		<td>test2</td><td>document.getElementById("test2").getBoundingClientRect().width</td><td id="result2b"></td><td>Integer in IE, Chrome and Safari. Same width as "test1" in Chrome eventhough 2 is wider than 1.</td>
 	</tr>
 	<tr>
 		<td>test3</td><td>document.getElementById("test3").getBoundingClientRect().width</td><td id="result3b"></td><td>Integer in Chrome and Safari.</td>
 	</tr>
 	<tr>
 		<td>test4</td><td>document.getElementById("test4").getBoundingClientRect().width</td><td id="result4b"></td><td>Integer in Chrome and Safari.</td>
 	</tr>
 	<tr><td colspan="4"></td></tr>
 	<tr>
 		<td>test1</td><td>document.getElementById("test1").getComputedTextLength()</td><td id="result1c"></td><td>Integer in Chrome; Float in IE and Firefox.</td>
 	</tr>
 	<tr>
 		<td>test2</td><td>document.getElementById("test2").getComputedTextLength()</td><td id="result2c"></td><td>Integer in Chrome; Float in IE and Firefox.</td>
 	</tr>
 	<tr>
 		<td>test3</td><td>document.getElementById("test3").getComputedTextLength()</td><td id="result3c"></td><td>Integer in Chrome; Float in IE and Firefox.</td>
 	</tr>
 	<tr>
 		<td>test4</td><td>document.getElementById("test4").getComputedTextLength()</td><td id="result4c"></td><td>A TSPAN which is not in a TEXT has no width</td>
 	</tr>
 </table>

 <script>

 document.body.onload = function () {
 	document.getElementById("result1a").innerHTML = document.getElementById("test1").getBBox().width;
 	document.getElementById("result2a").innerHTML = document.getElementById("test2").getBBox().width;

 	try {
 		document.getElementById("result3a").innerHTML = document.getElementById("test3").getBBox().width;
 	}
 	catch(e) {
 		document.getElementById("result3a").innerHTML = e.message;
 	}
 	try {
 		document.getElementById("result4a").innerHTML = document.getElementById("test4").getBBox().width;
 	}
 	catch(e) {
 		document.getElementById("result4a").innerHTML = e.message;
 	}

 	document.getElementById("result1b").innerHTML = document.getElementById("test1").getBoundingClientRect().width;
 	document.getElementById("result2b").innerHTML = document.getElementById("test2").getBoundingClientRect().width;
 	document.getElementById("result3b").innerHTML = document.getElementById("test3").getBoundingClientRect().width;
 	document.getElementById("result4b").innerHTML = document.getElementById("test4").getBoundingClientRect().width;

 	document.getElementById("result1c").innerHTML = document.getElementById("test1").getComputedTextLength();
 	document.getElementById("result2c").innerHTML = document.getElementById("test2").getComputedTextLength();
 	document.getElementById("result3c").innerHTML = document.getElementById("test3").getComputedTextLength();
 	document.getElementById("result4c").innerHTML = document.getElementById("test4").getComputedTextLength();
 }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	font-family: sans-serif;
	font-size: 0.7em;
	}

	pre {
	position: absolute;
	top: 0px;
	left: 180px;
	font-size: 1.3em;
	}

	svg {
	shape-rendering: crispEdges;
	border: 3px solid black;
	}

	table {
	border-collapse: collapse;
	}

	th, td {
	padding: 2px;
	}

	td:nth-child(3) {
	text-align: right;
	}

	text {
	font-size: 2em;
	}

	</style>
	</head>
	<body>
	<svg width="150" height="150">
	<text id="test1" y="50">test1</text>
	<text id="test2" y="100">
	<tspan id="test3">test3</tspan>
	</text>
	<tspan id="test4">test4</tspan>
	</svg>

	<pre>
	<svg width="150" height="150">
	<text id="test1" y="50">test1</text>
	<text id="test2" y="100">
	<tspan id="test3">test3</tspan>
	</text>
	<tspan id="test4">test4</tspan>
	</svg>
	</pre>
	<p></p>
	<table border="1">
	<tr>
	<th>id</th><th>Code</th><th>Result</th><th>Note</th>
	</tr>
	<tr>
	<td>test1</td><td>document.getElementById("test1").getBBox().width</td><td id="result1a"></td><td>Integer in Chrome; Float in IE and Firefox.</td>
	</tr>
	<tr>
	<td>test2</td><td>document.getElementById("test2").getBBox().width</td><td id="result2a"></td><td>Integer in Chrome; Float in IE and Firefox.</td>
	</tr>
	<tr>
	<td>test3</td><td>document.getElementById("test3").getBBox().width</td><td id="result3a"></td><td>IE and Firefox can't get the BBox of a TSPAN and error out.</td>
	</tr>
	<tr>
	<td>test4</td><td>document.getElementById("test4").getBBox().width</td><td id="result4a"></td><td>IE and Firefox can't get the BBox of a TSPAN whether it's inside a TEXT or not.</td>
	</tr>
	<tr><td colspan="4"></td></tr>
	<tr>
	<td>test1</td><td>document.getElementById("test1").getBoundingClientRect().width</td><td id="result1b"></td><td>Integer in IE, Chrome and Safari. Same width as "test2" in Chrome eventhough 1 is narrower than 2.</td>
	</tr>
	<tr>
	<td>test2</td><td>document.getElementById("test2").getBoundingClientRect().width</td><td id="result2b"></td><td>Integer in IE, Chrome and Safari. Same width as "test1" in Chrome eventhough 2 is wider than 1.</td>
	</tr>
	<tr>
	<td>test3</td><td>document.getElementById("test3").getBoundingClientRect().width</td><td id="result3b"></td><td>Integer in Chrome and Safari.</td>
	</tr>
	<tr>
	<td>test4</td><td>document.getElementById("test4").getBoundingClientRect().width</td><td id="result4b"></td><td>Integer in Chrome and Safari.</td>
	</tr>
	<tr><td colspan="4"></td></tr>
	<tr>
	<td>test1</td><td>document.getElementById("test1").getComputedTextLength()</td><td id="result1c"></td><td>Integer in Chrome; Float in IE and Firefox.</td>
	</tr>
	<tr>
	<td>test2</td><td>document.getElementById("test2").getComputedTextLength()</td><td id="result2c"></td><td>Integer in Chrome; Float in IE and Firefox.</td>
	</tr>
	<tr>
	<td>test3</td><td>document.getElementById("test3").getComputedTextLength()</td><td id="result3c"></td><td>Integer in Chrome; Float in IE and Firefox.</td>
	</tr>
	<tr>
	<td>test4</td><td>document.getElementById("test4").getComputedTextLength()</td><td id="result4c"></td><td>A TSPAN which is not in a TEXT has no width</td>
	</tr>
	</table>

	<script>

	document.body.onload = function () {
	document.getElementById("result1a").innerHTML = document.getElementById("test1").getBBox().width;
	document.getElementById("result2a").innerHTML = document.getElementById("test2").getBBox().width;

	try {
	document.getElementById("result3a").innerHTML = document.getElementById("test3").getBBox().width;
	}
	catch(e) {
	document.getElementById("result3a").innerHTML = e.message;
	}
	try {
	document.getElementById("result4a").innerHTML = document.getElementById("test4").getBBox().width;
	}
	catch(e) {
	document.getElementById("result4a").innerHTML = e.message;
	}

	document.getElementById("result1b").innerHTML = document.getElementById("test1").getBoundingClientRect().width;
	document.getElementById("result2b").innerHTML = document.getElementById("test2").getBoundingClientRect().width;
	document.getElementById("result3b").innerHTML = document.getElementById("test3").getBoundingClientRect().width;
	document.getElementById("result4b").innerHTML = document.getElementById("test4").getBoundingClientRect().width;

	document.getElementById("result1c").innerHTML = document.getElementById("test1").getComputedTextLength();
	document.getElementById("result2c").innerHTML = document.getElementById("test2").getComputedTextLength();
	document.getElementById("result3c").innerHTML = document.getElementById("test3").getComputedTextLength();
	document.getElementById("result4c").innerHTML = document.getElementById("test4").getComputedTextLength();
	}
	</script>
	</body>
	</html>