<!DOCTYPE html>

<html>
<head>
  <style type="text/css" media="screen">
    .container {
      position: absolute;
      margin: 20px;
      width: 120px;
      height: 120px;
      padding: 10px;
      border: 1px solid black;
      clip: rect(10px, 80px, 80px, 20px);
    }
    
    .intermediate {
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 1px solid blue;
    }
    
    .box {
      width: 100px;
      height: 150px;
      background-color: gray;
      -webkit-transform: translateZ(1px);
    }
    
    pre {
      margin-top: 360px;
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }
      
    function doTest() {
      if (window.testRunner) {
        var layersElement = document.getElementById('layers');
        // Do not include any text in the layers output, otherwise we need expected results for each platform.
        layersElement.style.display = "none";
        layersElement.innerText = window.internals.layerTreeAsText(document);
        layersElement.style.display = "block";
        testRunner.notifyDone();
      }
    }
    window.addEventListener('load', doTest, false);
  </script>
</head>
<body>

<!-- Test overflow clipping of composited elements in various configurations. -->
<div class="container">
  <div class="intermediate">
    <div class="box">
    </div>
  </div>
</div>

<div class="container" style="left: 200px;">
  <div class="intermediate" style="position: absolute">
    <div class="box">
    </div>
  </div>
</div>

<div class="container" style="z-index: 0; top: 200px;">
  <div class="intermediate">
    <div class="box">
    </div>
  </div>
</div>

<div class="container" style="z-index: 0; top: 200px; left: 200px;">
  <div class="intermediate" style="position: absolute; z-index: 0;">
    <div class="box">
    </div>
  </div>
</div>

<pre id="layers">
  In DRT, layer tree goes here.
</pre>

</body>
</html>