newly-composited-repaint-rect.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <!-- This test case reproduces a bug that is hopefully solved by https://bugs.webkit.org/show_bug.cgi?id=80641

       In the bug, a div element begins as non-composited, and the repaintRect had a
       correct non-zero offset because it paints into an ancestor container. Later, the
       layer becomes composited (in this case, because the layer is moved to overlap
       another composited layer). Because the layer is now composited, the repaintRect
       should have been recomputed - in particular, the offset of the repaintRect should
       become zero because it is now its own repaint container.

       Therefore, after the layer became composited, it was using the wrong repaint rect,
       which caused things not to repaint properly.
    -->

  <style type="text/css">
      .composited {
          will-change: transform;
          border: 2px solid black;
      }

      .box {
          width: 200px;
          height: 200px;
      }

      #scrolldiv {
          position: absolute;
          width: 100px;
          height: 100px;
          left: 250px;
          top: 50px;
          overflow-x: hidden;
          overflow-y: scroll;
      }

      .shouldNotBeSeen {
          background-color: red;
      }

      .shouldBeSeen {
          background-color: green;
      }
  </style>

</head>

<script src="../../../resources/run-after-layout-and-paint.js"></script>

<script>
    if (window.testRunner)
        testRunner.waitUntilDone();

    function changeDivPosition() {
        document.getElementById("scrolldiv").style.left="50px";
    }

    function repaintTest() {
        runAfterLayoutAndPaint(function() {
          // Changing the position will cause the scrolldiv to become composited because it overlaps another compostied element.
          changeDivPosition();

          // Force DumpRenderTree to do a layout and repaint here, this is where the repaintRect
          // goes wrong because it does not get updated for a newly composited element.
          runAfterLayoutAndPaint(function() {
              // Scrolling a little will demonstrate whether the repaint rect is correct or not.
              document.getElementById('scrolldiv').scrollTop = 500;
              testRunner.notifyDone();
          });
        });
    }

</script>

<body onload="repaintTest()">
  <div class="composited box"></div>
  <div id="scrolldiv">
    <div class="shouldNotBeSeen box"></div>
    <div class="shouldBeSeen box"></div>
  </div>
</body>

</html>
chromium/third_party/blink/web_tests/paint/invalidation/compositing/newly-composited-repaint-rect.html
