third_party/WebKit/LayoutTests/compositing/repaint/end-of-opacity-transition.html

   1 <!DOCTYPE html>
   2 <script>
   3 if (window.testRunner)
   4   testRunner.waitUntilDone();
   5 onload = function() {
   6   var animated = document.getElementById('animated');
   7   animated.addEventListener('transitionend', function() {
   8     if (window.testRunner)
   9       testRunner.notifyDone();
  10   });
  11   animated.style.opacity = 1;
  12 }
  13 </script>
  14 <style>
  15 #background, #foreground {
  16   position: absolute;
  17   top: 0;
  18   left: 0;
  19   width: 200px;
  20   height: 200px;
  21 }
  22 #background {
  23   background-color: red;
  24 }
  25 #animated {
  26   -webkit-transition: opacity 0.2s;
  27   opacity: 0.1;
  28 }
  29 #foreground {
  30   background-color: green;
  31 }
  32 body {
  33   margin: 0;
  34 }
  35 #description {
  36   position: absolute;
  37   top: 300px;
  38 }
  39 </style>
  40 <div id="background"></div>
  41 <div id="animated"><div id="foreground"></div></div>
  42 <div id="description">
  43 Tests paint invalidation on end of opacity transition.<br>
  44 Passes if there is a green square and no red.<br>
  45 </div>