fast/css/getComputedStyle/getComputedStyle-border-box.html

<html>
    <head>
        <script>
            function test()
            {
                if (window.testRunner)
                    testRunner.dumpAsText();
                var d1 = document.getElementById('d1');
                var d2 = document.getElementById('d2');
                
                var style = window.getComputedStyle(d1, null);
                var computedWidth = style.getPropertyValue("width");
                var computedHeight = style.getPropertyValue("height");
                
                var size = "200px";
                
                if (computedWidth == size && computedHeight == size)
                    d1.innerHTML = "Test 1 Passed";
                else
                    d1.innerHTML = "Test 1 Failed.  Computed width = " + computedWidth + "<br> Computed height = " + computedHeight;
                    
                 style = window.getComputedStyle(d2, null);
                computedWidth = style.getPropertyValue("width");
                computedHeight = style.getPropertyValue("height");
                if (computedWidth == size && computedHeight == size)
                    d2.innerHTML = "Test 2 Passed";
                else
                    d2.innerHTML = "Test 2 Failed.  Computed width = " + computedWidth + "<br> Computed height = " + computedHeight;               
            }
        </script>
        <style>
            div {
                width: 200px;
                height: 200px;
                border: 5px solid black;
                padding: 10px;
            }
            #d1 {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box; 
            }
        </style>
    </head>
    <body onload="test()">
        This tests that getComputedStyle will take box-sizing into account when computing the width and height of a box. <br>
        <div id="d1"></div>
        <div id="d2"></div>
    </body>
</html>