blob: 8f6c1503ee4476978717449e5d3c2722675a1a13 [file] [log] [blame]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<svg style="position: absolute; top: 10px; left: 10px; width: 500px; height: 300px;">
<g>
<text id="test" x="0" y="50" font-size="25" fill="#000" text-rendering="geometricPrecision">Sphinx of black quartz, judge my vow.</text>
</g>
<g>
<text id="measure" x="0" y="150" fill="#000" text-rendering="geometricPrecision" xml:space="preserve">&nbsp;</text>
</g>
</svg>
<script>
var hasSubpixelPrecision = false;
function measureText(testElement)
{
var measureElement = document.getElementById('measure');
measureElement.setAttribute('font-size', testElement.getAttribute('font-size'));
var str = testElement.firstChild.nodeValue;
var characterWidths = {};
var width = 0;
for (var i = 0; i < str.length; i++) {
var c = str[i];
var w = characterWidths[c];
if (!w) {
measureElement.firstChild.nodeValue = c;
w = measureElement.getBoundingClientRect().width;
characterWidths[c] = w;
hasSubpixelPrecision = hasSubpixelPrecision || w.toFixed(2) != Math.round(w);
}
width += w;
}
return width;
}
var el = document.getElementById('test');
var elementWidth = el.getBoundingClientRect().width;
var textWidth = measureText(el);
var tolerance = hasSubpixelPrecision ? 0.15 : 2; // enclosing may expand up to one pixel in each direction.
if (Math.abs(elementWidth - textWidth) <= tolerance)
testPassed('Width of text element is the sum of the width of all characters.');
else
testFailed('Width of text element is ' + elementWidth + ', expected ' + textWidth);
</script>
</body>
</html>