compositing/reflections/remove-add-reflection.html

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      #indicator {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50px;
        top: 150px;
        background-color: red;
      }
      #box {
        width: 100px;
        height: 100px;
        background-color: green;
        -webkit-transform: translate3d(50px, 50px, 0);
        -webkit-box-reflect: below;
      }
    </style>
    <script type="text/javascript">
      if (window.testRunner)
        testRunner.waitUntilDone();

      var reflectionOn = true;
      function toggleReflection()
      {
        reflectionOn = !reflectionOn;
        var box = document.getElementById('box');
        box.style.webkitBoxReflect = reflectionOn? 'below' : 'none';
      }
      
      function doTest()
      {
        window.setTimeout(function() {
          toggleReflection(); // remove
          
          window.setTimeout(function() {
            toggleReflection(); // add
          
            if (window.testRunner)
              testRunner.notifyDone();
          }, 0);
        }, 50);
      }
      
      window.addEventListener('load', doTest, false);
    </script>
  </head>
  <body>
    <!-- You should see a single green rectangle and no red below. -->
    <div id="indicator"></div>
    <div id="box"></div>
  </body>
</html>