third_party/WebKit/LayoutTests/fast/css/getComputedStyle/getComputedStyle-borderRadius.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5         .test { float: left; width: 50px; height: 50px; border: 1px solid black; }
   6         #topRightDiff { -webkit-border-top-right-radius: 10px 20px; }
   7         #topRightSame {-webkit-border-top-right-radius: 10px; }
   8         #topLeftDiff { -webkit-border-top-left-radius: 10px 20px; }
   9         #topLeftSame { -webkit-border-top-left-radius: 10px; }
  10         #bottomRightDiff { -webkit-border-bottom-right-radius: 10px 20px; }
  11         #bottomRightSame { -webkit-border-bottom-right-radius: 10px; }
  12         #bottomLeftDiff { -webkit-border-bottom-left-radius: 10px 20px; }
  13         #bottomLeftSame { -webkit-border-bottom-left-radius: 10px; }
  14     </style>
  15     <script type="text/javascript">
  16         function log(msg)
  17         {
  18             document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
  19         }
  20
  21         function test(id, prop)
  22         {
  23             var ob = document.getElementById(id + 'Diff');
  24             log('getPropertyValue(' + prop + '): ' + document.defaultView.getComputedStyle(ob, null).getPropertyValue(prop));
  25             ob = document.getElementById(id + 'Same');
  26             log('getPropertyValue(' + prop + '): ' + document.defaultView.getComputedStyle(ob, null).getPropertyValue(prop));
  27         }
  28
  29         function runTests()
  30         {
  31             if (window.testRunner)
  32                 testRunner.dumpAsText();
  33
  34             test('topRight', '-webkit-border-top-right-radius');
  35             test('topLeft', '-webkit-border-top-left-radius');
  36             test('bottomRight', '-webkit-border-bottom-right-radius');
  37             test('bottomLeft', '-webkit-border-bottom-left-radius');
  38
  39             log('');
  40
  41             log('Test getting 0px value border radius.')
  42             test('bottomRight', '-webkit-border-top-left-radius');
  43         }
  44     </script>
  45 </head>
  46 <body onload="runTests();">
  47     <p>Test calling getPropertyValue on computed styles for border radius properties.</p>
  48     <pre id="console"></pre>
  49
  50     <div class="test" id="topRightDiff"></div>
  51     <div class="test" id="topRightSame"></div>
  52     <div class="test" id="topLeftDiff"></div>
  53     <div class="test" id="topLeftSame"></div>
  54     <div class="test" id="bottomRightDiff"></div>
  55     <div class="test" id="bottomRightSame"></div>
  56     <div class="test" id="bottomLeftDiff"></div>
  57     <div class="test" id="bottomLeftSame"></div>
  58     <script>
  59     </script>
  60 </body>
  61 </html>