will-change-contents-suppresses-compositing.html

<!DOCTYPE html>
<style>
  .shouldNotComposite {
    width: 30px;
    height: 30px;
    margin: 4px;
    background-color: blue;
  }

  .positioned {
    position: relative;
    left: 40px;
  }

  #willChangeContents {
    will-change: contents;
  }

  #willChangeOpacity {
    will-change: opacity;
  }

  #willChangeTransform {
    will-change: -webkit-transform;
  }

  #willChangeTop {
    will-change: top;
  }

  #willChangeLeft {
    will-change: left;
  }

  #animateOpacity {
    -webkit-animation: fade-in-out 0.1s linear infinite alternate;
  }

  @-webkit-keyframes fade-in-out { from { opacity: 0.3; } to { opacity: 0.9; } }
</style>

<script>
  if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
  }

  function animationEventListener() {
    if (window.testRunner) {
      document.getElementById('layertree').innerText = internals.layerTreeAsText(document);
      testRunner.notifyDone();
    }
  }

  onload = function() {
    document.getElementById('animateOpacity').addEventListener('webkitAnimationIteration', animationEventListener);
  };
</script>
<div id="willChangeContents">
  <div id="willChangeOpacity" class="shouldNotComposite"></div>
  <div>
    <div id="willChangeLeft" class="positioned shouldNotComposite"></div>
  </div>
  <div>
    <div>
      <div id="willChangeTransform" class="shouldNotComposite">
        <div id="willChangeTop" class="positioned shouldNotComposite"></div>
      </div>
    </div>
  </div>
  <div id="animateOpacity" class="shouldNotComposite"></div>
</div>

<pre id="layertree"></pre>
chromium/third_party/blink/web_tests/compositing/will-change/will-change-contents-suppresses-compositing.html
