<!DOCTYPE html>
<html>
  <head>
    <style>
    #container {
        width: 500px;
        height: 5000px;
        border: 1px solid black;
        background-color: yellow;
        -webkit-transform:translateZ(0);
    }
    
    .box {
        position: absolute;
        left:50px;
        width: 200px;
        height: 200px;
        -webkit-transform:translateZ(0);
    }
    
    .at-the-top {
        top: 400px;
        background-color: red;
    }
    </style>
    <script>
        if (window.testRunner)
            testRunner.dumpAsText();
        
        var result = "";

        function testOnLoad()
        {
            // First with no kids
            if (window.testRunner)
                result = "First (no children):<br>" + window.internals.layerTreeAsText(document);

            // Second add kid
            var box = document.createElement("div");
            box.className = "box at-the-top";
            document.getElementById('container').appendChild(box);
            if (window.testRunner)
                result += "<br><br>Second (child added):<br>" + window.internals.layerTreeAsText(document);
            
            // Third remove kid
            var container = document.getElementById('container');
            container.removeChild(container.lastChild);
            if (window.testRunner) {
                result += "<br><br>Third (child removed):<br>" + window.internals.layerTreeAsText(document);
                document.getElementById('layers').innerHTML = result;
            }
        }
      
        window.addEventListener('load', testOnLoad, false);
    </script>
  </head>
  <body>
      <p>
        The yellow box should be large enough to scroll off the bottom.
        At the start there should be no child. After 100ms a red box is 
        added and after 100ms more it should be removed. This tests that 
        we can support very large compositing layers with dynamically added 
        and removed child compositing layers.
      </p>
        <div id="container"></div>
        <pre id="layers">Layer tree appears here in DRT.</pre>
  </body>
</html>