subtree-layoutstate-transform.html | Explore in Territory

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

  <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>

chromium/third_party/blink/web_tests/paint/invalidation/transform/subtree-layoutstate-transform.html