<!DOCTYPE html>

<html>
<head>
  <style type="text/css" media="screen">
    iframe {
        border: 10px solid black;
        padding: 5px;
        height: 150px;
        width: 300px;
        -webkit-box-shadow: 0 0 20px black;
    }
    .box {
        height: 200px;
        width: 200px;
        margin: 10px;
        padding: 5px;
        background-color: blue;
        -webkit-transform: translateZ(0);
        overflow:hidden;
    }
    .box:hover {
        -webkit-transform: none;
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    
    if (window.layoutTestController) {
      layoutTestController.dumpAsText();
      layoutTestController.waitUntilDone();
    }

    function doTest()
    {
      window.setTimeout(function() {
        var div = document.getElementById('invisible');
        div.style.cssText = "display:none;";
        if (window.layoutTestController) {
          layoutTestController.display();
          document.getElementById('layers').innerHTML = layoutTestController.layerTreeAsText();
          layoutTestController.notifyDone();
        }
      }, 0)
    }
    
    window.addEventListener('load', doTest, false);
  </script>
</head>
<body>

    <!-- The nested iframe should disappear when we set it to "diplay:none". -->
    <div id="invisible">
        <iframe src="resources/intermediate-frame.html"></iframe>
    </div>
    <div class="box">
    </div>
    <pre id="layers">Layer tree appears here in DRT.</pre>
</body>
</html>