| <!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)); |
| log('getPropertyCSSValue(' + prop + '): ' + document.defaultView.getComputedStyle(ob, null).getPropertyCSSValue(prop)); |
| ob = document.getElementById(id + 'Same'); |
| log('getPropertyValue(' + prop + '): ' + document.defaultView.getComputedStyle(ob, null).getPropertyValue(prop)); |
| log('getPropertyCSSValue(' + prop + '): ' + document.defaultView.getComputedStyle(ob, null).getPropertyCSSValue(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> |
