cpsievert/index.html

## 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>