getComputedStyle-borderRadius.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
    <style>
        .test { float: left; width: 50px; height: 50px; border: 1px solid black; }
        #topRightDiff { -webkit-border-top-right-radius: 10px 20px; }
        #topRightSame {-webkit-border-top-right-radius: 10px; }
        #topLeftDiff { -webkit-border-top-left-radius: 10px 20px; }
        #topLeftSame { -webkit-border-top-left-radius: 10px; }
        #bottomRightDiff { -webkit-border-bottom-right-radius: 10px 20px; }
        #bottomRightSame { -webkit-border-bottom-right-radius: 10px; }
        #bottomLeftDiff { -webkit-border-bottom-left-radius: 10px 20px; }
        #bottomLeftSame { -webkit-border-bottom-left-radius: 10px; }
    </style>
    <script type="text/javascript">
        function log(msg)
        {
            document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
        }

        function test(id, prop)
        {
            var ob = document.getElementById(id + 'Diff');
            log('getPropertyValue(' + prop + '): ' + document.defaultView.getComputedStyle(ob, null).getPropertyValue(prop));
            ob = document.getElementById(id + 'Same');
            log('getPropertyValue(' + prop + '): ' + document.defaultView.getComputedStyle(ob, null).getPropertyValue(prop));
        }

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

            test('topRight', '-webkit-border-top-right-radius');
            test('topLeft', '-webkit-border-top-left-radius');
            test('bottomRight', '-webkit-border-bottom-right-radius');
            test('bottomLeft', '-webkit-border-bottom-left-radius');

            log('');

            log('Test getting 0px value border radius.')
            test('bottomRight', '-webkit-border-top-left-radius');
        }
    </script>
</head>
<body onload="runTests();">
    <p>Test calling getPropertyValue on computed styles for border radius properties.</p>
    <pre id="console"></pre>

    <div class="test" id="topRightDiff"></div>
    <div class="test" id="topRightSame"></div>
    <div class="test" id="topLeftDiff"></div>
    <div class="test" id="topLeftSame"></div>
    <div class="test" id="bottomRightDiff"></div>
    <div class="test" id="bottomRightSame"></div>
    <div class="test" id="bottomLeftDiff"></div>
    <div class="test" id="bottomLeftSame"></div>
    <script>
    </script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/getComputedStyle/getComputedStyle-borderRadius.html
