51 lines
1.9 KiB
HTML
51 lines
1.9 KiB
HTML
<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"> </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>
|