third_party/WebKit/LayoutTests/fast/reflections/reflection-computed-style.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5         div { width: 0; height: 0 }
   6         #reflectionNone { -webkit-box-reflect: none }
   7         #reflectionDirection { -webkit-box-reflect: below }
   8         #reflectionOffset { -webkit-box-reflect: right 50% }
   9         #reflectionMask { -webkit-box-reflect: below 5px -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch; }
  10     </style>
  11     <script type="text/javascript">
  12         function log(msg)
  13         {
  14             document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
  15         }
  16
  17         function subTest(ob, prop)
  18         {
  19             log('  ' + prop);
  20             log('    getPropertyValue:    ' + document.defaultView.getComputedStyle(ob, null).getPropertyValue(prop));
  21         }
  22
  23         function test(id, val)
  24         {
  25             log('-webkit-box-reflect: ' + val + ';');
  26             var ob = document.getElementById(id);
  27             subTest(ob, '-webkit-box-reflect');
  28         }
  29
  30         function runTests()
  31         {
  32             if (window.testRunner)
  33                 testRunner.dumpAsText();
  34             test('reflectionNone', 'none');
  35             log('');
  36             test('reflectionDirection', 'below');
  37             log('');
  38             test('reflectionOffset', 'right 50%');
  39             log('');
  40             test('reflectionMask', 'below 5px -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch');
  41         }
  42     </script>
  43 </head>
  44 <body onload="runTests();">
  45     <p>Test calling getPropertyValue on computed styles for -webkit-border-image property.</p>
  46     <pre id="console"></pre>
  47
  48     <div id="reflectionNone"></div>
  49     <div id="reflectionDirection"></div>
  50     <div id="reflectionOffset"></div>
  51     <div id="reflectionMask"></div>
  52
  53 </body>
  54 </html>