become-overlay-composited-layer.html

<html>
<head>
    <style type="text/css" media="screen">
    #container
    {
        position: relative;
        width: 500px;
        height: 100px;
        opacity: 0.85;
        border: 1px solid black;
    }

    #box
    {
        position: absolute;
        height: 100px;
        width: 250px;
        left: 250px;
        background-color: blue;
        transition: left 0.2s, top 0.2s;
    }

    #container.right #box
    {
        left: 0px;
        top: 100px;
    }

    #fader
    {
        position: absolute;
        top: 0;
        left: 0;
        background-color: black;
        width: 50px;
        height: 50px;
        opacity: 0.5;
        transition: opacity 0.2s;
    }
    
    #container.right #fader {
      opacity: 1;
    }
    </style>
    <script type="text/javascript" charset="utf-8">
      if (window.testRunner)
        testRunner.waitUntilDone();

      function runTest()
      {
        var container = document.getElementById("container");
        var fader = document.getElementById("fader");
        fader.addEventListener('transitionend', function() {
          fader.addEventListener('transitionend', function() {
            if (window.testRunner)
              testRunner.notifyDone();
          });
          container.className = "";
        });
        container.className = "right";
      }

      window.addEventListener('load', runTest, false);
    </script>
</head>
<body>
    <p><a href="<rdar://problem/6983207>">rdar://problem/6983207</a>Should not leave blue box behind after moving to the top right.</p>
    <div id="container">
        <div id="box"></div>
        <div id="fader"></div>
    </div>

</body></html>
chromium/third_party/blink/web_tests/paint/invalidation/compositing/become-overlay-composited-layer.html
