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