animation-overlap-with-children.html

<!DOCTYPE html>

<html>
<head>
  <style>
    
    .animating {
      animation: slide 10s alternate linear infinite;
    }
    
    .container {
      height: 200px;
      width: 250px;
      padding: 5px;
      border: 1px solid black;
    }
    
    .banner {
      width: 100%;
      height: 50px;
      background-color: silver;
    }
    
    .box {
      position: relative;
      height: 100px;
      width: 100px;
      margin: 10px;
      background-color: blue;
    }
    
    .test1 {
      position: absolute;
      left: 0;
      top: 10px;
      background-color: orange;
    }

    .test2 {
      position: absolute;
      top: 60px;
      left: 120px;
      background-color: orange;
    }
    
    .composited {
      will-change: transform;
    }
    
    @keyframes slide {
      from { transform: translateX(0px); }
      to { transform: translateX(100px); }
    }
  </style>
  <script>
    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }
      
    function runTest()
    {
      if (window.testRunner) {
        internals.pauseAnimations(0.0);
        document.getElementById('layers').innerText = internals.layerTreeAsText(document);
        testRunner.notifyDone();
      }
    }
    window.addEventListener('load', runTest, false);
  </script>
</head>
<body>

  <div id="to-animate" class="container animating">
    <div class="composited banner"></div>
    <div class="test1 box">Should be composited</div>
    <div class="test2 box">Should not be composited</div>
  </div>

  <div class="box">Should be composited</div>
  <pre id="layers">Layer tree goes here in DRT</pre>

</body>
</html>
chromium/third_party/blink/web_tests/compositing/layer-creation/animation-overlap-with-children.html
