src/third_party/WebKit/LayoutTests/compositing/reflections/become-simple-composited-reflection.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <style>
   6     body {
   7       margin: 0;
   8     }
   9
  10     .box {
  11       height: 200px;
  12       width: 200px;
  13       background-color: red;
  14       transform: translateZ(1px);
  15     }
  16
  17     .indicator {
  18       position: absolute;
  19       top: 200px;
  20       background-color: green;
  21     }
  22
  23     .reflected {
  24       -webkit-box-reflect: below 0;
  25     }
  26   </style>
  27   <script>
  28
  29     if (window.testRunner) {
  30       testRunner.dumpAsTextWithPixelResults();
  31       testRunner.waitUntilDone();
  32     }
  33
  34     function doTest()
  35     {
  36       window.setTimeout(function() {
  37         document.getElementById('test').style.backgroundColor = 'transparent';
  38         if (window.testRunner)
  39           testRunner.notifyDone();
  40       }, 0);
  41     }
  42     window.addEventListener('load', doTest, false);
  43   </script>
  44 </head>
  45 <body>
  46
  47   <div class="indicator box"></div>
  48   <!-- You should see no red box below -->
  49   <div id="test" class="reflected box"></div>
  50
  51 </body>
  52 </html>