<!DOCTYPE html>
<html>
<head>
    <title>client rect precision test</title>
    <style> 
        #test {
            width: 4.5px;
            height: 4.5px;
            background: navy;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <div id="console">
        Box above should be 5x5px.<br>
    </div>
</body>
<script>
    var testElement = document.getElementById('test');
    var consoleElement = document.getElementById('console');

    function test()
    {
        var rect = testElement.getBoundingClientRect();
        var width = rect.right - rect.left;

        if (width == 4.5 && testElement.clientWidth == 5)
            log('PASS: getBoundingClientRect reports width with subpixel precision (4.5) and clientWidth reports snapped size (5).');
        else
            log('FAIL: getBoundingClientRect reports width of ' + width + ', expected 4.5. clientWidth reports width of ' + testElement.clientWidth + ', expected 5.');
    }

    function log(str)
    {
        consoleElement.appendChild(document.createTextNode(str));
        consoleElement.appendChild(document.createElement('br'));
    }

    test();
</script>
</html>