third_party/WebKit/LayoutTests/compositing/will-change/will-change-contents-suppresses-compositing.html

   1 <!DOCTYPE html>
   2 <style>
   3   .shouldNotComposite {
   4     width: 30px;
   5     height: 30px;
   6     margin: 4px;
   7     background-color: blue;
   8   }
   9
  10   .positioned {
  11     position: relative;
  12     left: 40px;
  13   }
  14
  15   #willChangeContents {
  16     will-change: contents;
  17   }
  18
  19   #willChangeOpacity {
  20     will-change: opacity;
  21   }
  22
  23   #willChangeTransform {
  24     will-change: -webkit-transform;
  25   }
  26
  27   #willChangeTop {
  28     will-change: top;
  29   }
  30
  31   #willChangeLeft {
  32     will-change: left;
  33   }
  34
  35   #animateOpacity {
  36     -webkit-animation: fade-in-out 0.1s linear infinite alternate;
  37   }
  38
  39   @-webkit-keyframes fade-in-out { from { opacity: 0.3; } to { opacity: 0.9; } }
  40 </style>
  41
  42 <script>
  43   if (window.testRunner) {
  44     testRunner.dumpAsText();
  45     testRunner.waitUntilDone();
  46   }
  47
  48   function animationEventListener() {
  49     if (window.testRunner) {
  50       document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
  51       testRunner.notifyDone();
  52     }
  53   }
  54
  55   onload = function() {
  56     document.getElementById('animateOpacity').addEventListener('webkitAnimationIteration', animationEventListener);
  57   };
  58 </script>
  59 <div id="willChangeContents">
  60   <div id="willChangeOpacity" class="shouldNotComposite"></div>
  61   <div>
  62     <div id="willChangeLeft" class="positioned shouldNotComposite"></div>
  63   </div>
  64   <div>
  65     <div>
  66       <div id="willChangeTransform" class="shouldNotComposite">
  67         <div id="willChangeTop" class="positioned shouldNotComposite"></div>
  68       </div>
  69     </div>
  70   </div>
  71   <div id="animateOpacity" class="shouldNotComposite"></div>
  72 </div>
  73
  74 <pre id="layertree"></pre>