<html>
<head>
  <style type="text/css" media="screen">
    .transformed {
      height: 100px;
      width: 100px;
      margin: 20px;
      -webkit-transform: scale(2);
      -webkit-transform-origin: top left;
    }
  
    .layoutroot {
      height: 100px;
      width: 100px;
      overflow: hidden;
      background-color: red;
    }
  </style>
    <script src="resources/repaint.js"></script>
    <script>
        function repaintTest()
        {
            document.getElementById("target").style.width = "100px";
        }
    </script>
</head>
<body onload="runRepaintTest()">

  <p>Tests repaint after layout of a subtree, inside a transformed element. You should see a large green square below.</p>
  <div class="transformed">
    <div class="layoutroot">
      <div id="target" style="height: 100px; width: 50px; background-color: green;"></div>
    </div>
  </div>

</body>
</html>