src/third_party/WebKit/LayoutTests/compositing/squashing/squashed-layer-color-update.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     .squashed {
   6       height: 40px;
   7       width: 40px;
   8       background-color: lightgreen;
   9       position: absolute;
  10       top: 90px;
  11     }
  12     .composited {
  13       position: absolute;
  14       margin-top: 5px;
  15       height: 100px;
  16       width: 100px;
  17       background-color: lightblue;
  18       transform: translateZ(1px);
  19     }
  20   </style>
  21   <script>
  22       onload = function() {
  23           if (window.testRunner) {
  24               testRunner.waitUntilDone();
  25               internals.settings.setLayerSquashingEnabled(true);
  26           }
  27
  28           var target = document.getElementById('target3');
  29           requestAnimationFrame(function() {
  30               target.style.backgroundColor = 'green';
  31               getComputedStyle(target).backgroundColor;
  32               setTimeout(function() {
  33                   if (window.testRunner)
  34                       testRunner.notifyDone();
  35               });
  36           });
  37       }
  38   </script>
  39 </head>
  40 <body>
  41   <div id="target2" class="second composited">
  42   </div>
  43   <div id="target3" class="squashed"></div>
  44 </body>
  45 </html>