animation-compositing.html | Explore in Territory

<!DOCTYPE html>

<html>
<head>
  <style type="text/css" media="screen">
    .box {
      height: 100px;
      width: 100px;
      background-color: blue;
    }
    
    .spinning {
      animation: spin 2s infinite linear;
    }
    
    @keyframes spin {
      from { transform: rotate(0); }
      to   { transform: rotate(360deg); }
    }
  </style>
</head>
<body>

  <div id="box" class="box"></div>

  <!-- We should create layers, even on platforms that don't support accelerated animation. -->
  <div id="result">Test only works in DRT</div>

  <script type="text/javascript" charset="utf-8">
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    var box = document.getElementById('box');
    box.addEventListener('animationstart', function() {
      if (window.testRunner) {
          var layers = internals.layerTreeAsText(document);
          var result;
          if (layers.includes("DIV id='box' class='box spinning'"))
            result = "PASS: created compositing layers when animating transform.";
          else
            result = "FAIL: no layers found";
          document.getElementById('result').innerHTML = result;
          testRunner.notifyDone();
      }
    }, false);
    box.classList.toggle('spinning');
  </script>
</body>
</html>
chromium/third_party/blink/web_tests/compositing/animation/animation-compositing.html
