<!DOCTYPE html>

<html>
<head>
  <style>
    
    .animating {
      -webkit-animation: slide 10s alternate linear infinite;
    }
    
    .container {
      height: 200px;
      width: 250px;
      padding: 5px;
      border: 1px solid black;
    }
    
    .banner {
      width: 100%;
      height: 50px;
      background-color: silver;
    }
    
    .box {
      position: relative;
      height: 100px;
      width: 100px;
      margin: 10px;
      background-color: blue;
    }
    
    .test1 {
      position: absolute;
      left: 0;
      top: 10px;
      background-color: orange;
    }

    .test2 {
      position: absolute;
      top: 60px;
      left: 120px;
      background-color: orange;
    }
    
    .composited {
      -webkit-transform: translateZ(0);
    }
    
    @-webkit-keyframes slide {
      from { -webkit-transform: none; }
      to { -webkit-transform: translateX(100px); }
    }
  </style>
  <script src="resources/compositing-overlap-utils.js"></script>
  <script>
    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }
      
    function runTest()
    {
      var box = document.getElementById('to-animate');
      box.addEventListener('webkitAnimationStart', dumpLayers, false);
      box.classList.add('animating');
    }
    
    window.addEventListener('load', runTest, false);
  </script>
</head>
<body>

  <div id="to-animate" class="container">
    <div class="composited banner"></div>
    <div class="test1 box">Should be composited</div>
    <div class="test2 box">Should not be composited</div>
  </div>

  <div class="box">Should be composited</div>
  <pre id="layers">Layer tree goes here in DRT</pre>

</body>
</html>