<!DOCTYPE html>

<html>
<head>
  <style>
    .box {
      position: absolute;
      top: 20px;
      left: 20px;
      height: 100px;
      width: 100px;
      background-color: red;
    }

    .composited {
      -webkit-transform: translateZ(0);
      background-color: green;
      outline: 10px solid transparent; /* inflate compositing layer bounds */
    }

    .box > .box {
      top: 50px;
      left: 50px;
      width: 200px;
      background-color: rgba(255, 0, 0, 0.6);
    }

    #indicator {
      position: absolute;
      top: 75px;
      left: 75px;
      height: 56px;
      width: 56px;
      background-color: blue;
    }
  </style>
  <script>
      if (window.testRunner) {
          testRunner.dumpAsText();
          testRunner.waitUntilDone();
      }

      function doTest()
      {
          if (window.testRunner) {
              document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
              testRunner.notifyDone();
          }
      }

      window.addEventListener('load', doTest, false);
  </script>
</head>
<body>
  <div class="composited box">
    <div class="composited box"></div>
  </div>

  <div id="indicator"></div>

  <pre id="layertree"></pre>
</body>
</html>