third_party/WebKit/LayoutTests/compositing/repaint/become-overlay-composited-layer.html

   1 <html>
   2 <head>
   3     <style type="text/css" media="screen">
   4     #container
   5     {
   6         position: relative;
   7         width: 500px;
   8         height: 100px;
   9         opacity: 0.85;
  10         border: 1px solid black;
  11     }
  12
  13     #box
  14     {
  15         position: absolute;
  16         height: 100px;
  17         width: 250px;
  18         left: 250px;
  19         background-color: blue;
  20         -webkit-transition: left 0.2s, top 0.2s;
  21     }
  22
  23     #container.right #box
  24     {
  25         left: 0px;
  26         top: 100px;
  27     }
  28
  29     #fader
  30     {
  31         position: absolute;
  32         top: 0;
  33         left: 0;
  34         background-color: black;
  35         width: 50px;
  36         height: 50px;
  37         opacity: 0.5;
  38         -webkit-transition: opacity 0.2s;
  39     }
  40
  41     #container.right #fader {
  42       opacity: 1;
  43     }
  44     </style>
  45     <script type="text/javascript" charset="utf-8">
  46       if (window.testRunner)
  47         testRunner.waitUntilDone();
  48
  49       function runTest()
  50       {
  51         var container = document.getElementById("container");
  52         var fader = document.getElementById("fader");
  53         fader.addEventListener('webkitTransitionEnd', function() {
  54           fader.addEventListener('webkitTransitionEnd', function() {
  55             if (window.testRunner)
  56               testRunner.notifyDone();
  57           });
  58           container.className = "";
  59         });
  60         container.className = "right";
  61       }
  62
  63       window.addEventListener('load', runTest, false);
  64     </script>
  65 </head>
  66 <body>
  67     <p><a href="<rdar://problem/6983207>">rdar://problem/6983207</a>Should not leave blue box behind after moving to the top right.</p>
  68     <div id="container">
  69         <div id="box"></div>
  70         <div id="fader"></div>
  71     </div>
  72
  73 </body></html>