third_party/WebKit/LayoutTests/compositing/reflections/remove-add-reflection.html

   1 <html>
   2   <head>
   3     <style>
   4       body {
   5         margin: 0;
   6       }
   7
   8       #indicator {
   9         position: absolute;
  10         width: 100px;
  11         height: 100px;
  12         left: 50px;
  13         top: 150px;
  14         background-color: red;
  15       }
  16       #box {
  17         width: 100px;
  18         height: 100px;
  19         background-color: green;
  20         transform: translate3d(50px, 50px, 0);
  21         -webkit-box-reflect: below;
  22       }
  23     </style>
  24     <script type="text/javascript">
  25       if (window.testRunner)
  26         testRunner.waitUntilDone();
  27
  28       var reflectionOn = true;
  29       function toggleReflection()
  30       {
  31         reflectionOn = !reflectionOn;
  32         var box = document.getElementById('box');
  33         box.style.webkitBoxReflect = reflectionOn? 'below' : 'none';
  34       }
  35
  36       function doTest()
  37       {
  38         window.setTimeout(function() {
  39           toggleReflection(); // remove
  40
  41           window.setTimeout(function() {
  42             toggleReflection(); // add
  43
  44             if (window.testRunner)
  45               testRunner.notifyDone();
  46           }, 0);
  47         }, 50);
  48       }
  49
  50       window.addEventListener('load', doTest, false);
  51     </script>
  52   </head>
  53   <body>
  54     <!-- You should see a single green rectangle and no red below. -->
  55     <div id="indicator"></div>
  56     <div id="box"></div>
  57   </body>
  58 </html>