third_party/WebKit/LayoutTests/compositing/layer-creation/incremental-destruction.html

   1 <!DOCTYPE html>
   2 <style>
   3 #target {
   4     transition: opacity 10ms;
   5     opacity: 0.5;
   6 }
   7 #target.dim {
   8     opacity: 0.2;
   9 }
  10 </style>
  11 <script>
  12 if (window.testRunner)
  13     testRunner.waitUntilDone();
  14
  15 window.addEventListener('load', function() {
  16     requestAnimationFrame(function() {
  17         requestAnimationFrame(function() {
  18             var target = document.getElementById('target');
  19             target.classList.remove('dim');
  20             target.addEventListener('transitionend', function() {
  21                 requestAnimationFrame(function() {
  22                     requestAnimationFrame(function() {
  23                         if (window.testRunner)
  24                             testRunner.notifyDone();
  25                     });
  26                 });
  27             });
  28         });
  29     });
  30 });
  31 </script>
  32 <div id="target" class="dim" style="width: 500px; height: 500px; background-color: blue;"></div>
  33 <div style="width: 300px; height: 300px; position: absolute; left: 20px; top: 400px; background-color: purple; z-index:1000">
  34     <div style="width:100px; height:100px; position:relative; left:10px; top:10px; transform:translateZ(0); background-color:yellow"></div>
  35 </div>