squashed-layer-color-update.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <style>
    .squashed {
      height: 40px;
      width: 40px;
      background-color: lightgreen;
      position: absolute;
      top: 90px;
    }
    .composited {
      position: absolute;
      margin-top: 5px;
      height: 100px;
      width: 100px;
      background-color: lightblue;
      transform: translateZ(1px);
    }
  </style>
  <script>
      onload = function() {
          if (window.testRunner)
              testRunner.waitUntilDone();
      
          var target = document.getElementById('target3');
          requestAnimationFrame(function() {
              target.style.backgroundColor = 'green';
              getComputedStyle(target).backgroundColor;
              setTimeout(function() {
                  if (window.testRunner)
                      testRunner.notifyDone();
              });
          });
      }
  </script>
</head>
<body>
  <div id="target2" class="second composited">
  </div>
  <div id="target3" class="squashed"></div>
</body>
</html>

chromium/third_party/blink/web_tests/compositing/squashing/squashed-layer-color-update.html