<!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>
</head>
<body>

    <!-- The invisible iframe should not set itself as the root layer. -->
    <div style="display: none;">
        <iframe src="resources/composited-subframe.html"></iframe>
    </div>
    <div class="box">
    </div>
</body>
</html>