fast/css/getComputedStyle/getComputedStyle-resolved-values.html

<!DOCTYPE html>
<html>
<head>
    <style>
        .outer {
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }

        .testbox {
            color: white;
            font: 24px 'Lucida Grande';
            background: green;
            border: 1em solid black;
        }

        #fixed {
            line-height: 30px;
            width: 150px;
            height: 100px;
            margin-top: 15px;
            margin-right: 30px;
            margin-bottom: 20px;
            margin-left: 10px;
            padding: 20px;
        }

        #percents {
            line-height: 150%;
            width: 50%;
            height: 25%;
            margin-top: 10%;
            margin-right: 5%;
            margin-bottom: 10%;
            margin-left: 20%;
            padding: 5%;
        }

        #ems {
            line-height: 24px;
            width: 10em;
            height: 5em;
            margin-top: 1em;
            margin-right: .5em;
            margin-bottom: 1.5em;
            margin-left: 2em;
            padding: .75em;
        }

        #auto {
            line-height: 30px;
            width: 200px;
            height: auto;
            margin: 0px auto;
            padding: auto;
        }

        #mixed {
            line-height: 200%;
            width: 30%;
            height: 20%;
            margin-top: 3em;
            /* margin-right/margin-bottom omitted */
            margin-left: auto;
            padding-top: 40px;
            padding-right: 10%;
            padding-bottom: 1em;
            padding-left: auto;
        }
    </style>
    
    <script>
        var resolvedValueStyles = [
            'line-height',
            'width',
            'height',
            'margin-top',
            'margin-right',
            'margin-bottom',
            'margin-left',
            'padding-top',
            'padding-right',
            'padding-bottom',
            'padding-left'
        ];

        var displayValues = [
            'block',
            'inline',
            'inline-block',
            'none'
        ];

        function log(msg) {
            document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
        }

        function test(id) {
            var div = document.getElementById(id),
                prop, displayValue, style, computedStyle;

            for (var i = 0; i < displayValues.length; i++) {
                div.style.display = displayValue = displayValues[i];
                computedStyle = window.getComputedStyle(div, null);
                log('Resolved values for element "' + id + '" with display "' + displayValue + '":');

                for (var j = 0; j < resolvedValueStyles.length; j++) {
                    style = resolvedValueStyles[j];
                    log(style + ': ' + computedStyle.getPropertyValue(style));
                }
                log('');
            }
            div.style.display = '';
            log('');
        }

        function runTests() {
            if (window.testRunner)
                testRunner.dumpAsText();

            test('fixed');
            test('percents');
            test('ems');
            test('auto');
            test('mixed');
        }
    </script>
</head>

<body onload="runTests();">
    <p>
        Test calling getPropertyValue on computed styles that return "resolved" values.<br />
        See <a href="http://dev.w3.org/csswg/cssom/#resolved-values">http://dev.w3.org/csswg/cssom/#resolved-values</a> for more information.
    </p>
    <pre id="console"></pre>

    <div class="outer">
        <div class="testbox" id="fixed">Fixed</div>
    </div>
    <div class="outer">
        <div class="testbox" id="percents">Percents</div>
    </div>
    <div class="outer">
        <div class="testbox" id="ems">EMs</div>
    </div>
    <div class="outer">
        <div class="testbox" id="auto">Auto</div>
    </div>
    <div class="outer">
        <div class="testbox" id="mixed">Mixed</div>
    </div>
</body>
</html>