getComputedStyle-margin-percentage.html

<!DOCTYPE html>
<html>
<head>
    <style>
        #foo { 
            background: purple;
            border: 10px double #000000; 
            width: 50%;
            height: auto;
            
            margin-left: 33%;
            margin-top: 10%;
            margin-right: auto;
            
            padding-left: auto;
            left: auto;
            color: white;
            font: 24px 'Lucida Grande';
            line-height: 24px;
        }
    </style>
    
    <script>
        function log(msg) {
            document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
        }
        
        function test(prop) {
            var div = document.getElementById('foo');
            log(prop + ': ' + window.getComputedStyle(div, null).getPropertyValue(prop));
        }
        
        function runTests() {
            if (window.testRunner)
                testRunner.dumpAsText();
                
            test('margin-left');
            test('margin-top');
            test('margin-right');
            test('margin-bottom');
        }
    </script>
</head>

<body onload="runTests();">
    <p>Test calling getPropertyValue on computed margin styles.</p>
    <pre id="console"></pre>
    
    <div id="foo">Test</div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/getComputedStyle/getComputedStyle-margin-percentage.html
