layer-repaint-rects.html | Explore in Territory

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Layer repaint</title>
    <style type="text/css" media="screen">
      body {
        margin: 0;
      }
      
      #container {
        position: absolute;
        top: 100px;
        height: 230px;
        width: 400px;
        border: 1px solid black;
      }
      
      #container > div {
        position: absolute;
        background-color: #8888FF;
        width: 200px;
        height: 100px;
      }

      #translate {
        top: 10px;
      }
      #container.over #translate {
        transform: translate(200px, 0px);
        transition-property: transform;
        transition-duration: 0.1s;
      }
      #widen {
        top: 120px;
        background-color: red !important;
      }
      #container.over #widen {
        width: 400px;
        transition-property: width;
        transition-duration: 0.1s;
      }
      
      #tester {
        position: absolute;
        background-color: green;
        width: 200px;
        height: 100px;
        top: 221px;
        left: 1px;
      }
    </style>
    <script type="text/javascript" charset="utf-8">
      
      if (window.testRunner)
        testRunner.waitUntilDone();

      function startTest()
      {
        var container = document.getElementById('container');
        container.addEventListener('transitionend', function() {
          container.className = '';
          if (window.testRunner)
            testRunner.notifyDone();
        });
        container.className = 'over';
      }
      window.addEventListener('load', startTest, false);
    </script>
  </head>
  <body>

    <p>Tests repaint after a layer stops compositing. You should see no red below after the end of the transition.</p>
    <div id="container">
      <div id="translate"></div>
      <div id="widen"></div>
    </div>
    
    <div id="tester"></div>
  </body>
</html>
chromium/third_party/blink/web_tests/paint/invalidation/compositing/layer-repaint-rects.html
