<!DOCTYPE html>

<html>
<head>
  <style>
    .container {
      height: 460px;
      width: 120px;
      overflow: hidden;
      position: relative;
      left: 50px;
      z-index: 0; /* create stacking context */
      border: 1px solid black;
      background-color: white;
    }
    
    .box {
      position: relative;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: blue;
    }

    .force-layer {
      -webkit-transform: translateZ(1px);
    }

    .yellow {
      background-color: yellow;
    }

    .gray {
      background-color: gray;
    }
    
    .animating1 {
      -webkit-animation: translate1 2s linear infinite alternate;
    }

    .animating2 {
      -webkit-animation: translate2 2s linear infinite alternate;
    }
    
    @-webkit-keyframes translate1 {
      from { -webkit-transform: translate(0px, -110px); }
      to   { -webkit-transform: translate(0px, 590px); }
    }

    @-webkit-keyframes translate2 {
      from { -webkit-transform: translate(0px, -220px); }
      to   { -webkit-transform: translate(0px, 110px); }
    }
  </style>
  <script>
    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }

    function queueBoxForAnimation(elementId, animationClass, callback) {
      var box = document.getElementById(elementId);
      if (callback)
        box.addEventListener('webkitAnimationStart', callback, false);
      box.classList.add(animationClass);
    }
      
    function runTest()
    {
      queueBoxForAnimation("to-animate1", "animating1");
      queueBoxForAnimation("to-animate2", "animating2", animationStarted);
    }

    function animationStarted()
    {
      if (window.testRunner) {
        var layersElement = document.getElementById('layers');
        // Make sure we don't include the #layers element in the tree. The text size
        // might differ between platforms.
        layersElement.style.display = "none";
        layersElement.innerText = window.internals.layerTreeAsText(document);
        layersElement.style.display = "block";
        testRunner.notifyDone();
      }
    }
    window.addEventListener('load', runTest, false);
  </script>
</head>
<body>
  <!-- The test checks that composited layers are created when needed to display elements in front of animated layers. 
       There are two animations going at the same time. The second animation is inside a clipping
       container (white background with black border). The first animation should display behind the clipping container.
       For both animations, the following should be true:
       1. Yellow box should display in front of the blue box.
       2. Gray boxes should display behind the blue box. 
  -->
  <!-- This div will not get a layer -->
  <div class="box gray"></div>
  <div id="to-animate1" class="box"></div>
  <div class="container">
    <!-- This div will be forced to get a layer -->
    <div class="box gray force-layer"></div>
    <!-- This div will not get a layer -->
    <div class="box gray"></div>
    <div id="to-animate2" class="box"></div>
    <!-- This div will get a layer -->
    <div class="box yellow"></div>
  </div>
  <!-- This div will also get a layer -->
  <div class="box yellow"></div>
  <pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>