src/third_party/WebKit/LayoutTests/compositing/reflections/enable-disable-compositing-reflection.html

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