compositor_heavy_animation.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    #backdrop {
      float: left;
      width: 512px;
      height: 512px;
      isolation: isolate;
      background-image: linear-gradient(to bottom,
          rgba(255, 255, 0, 0.9),
          rgba(255, 0, 0, 0.9),
          rgba(0, 255, 0, 0.9),
          rgba(0, 0, 255, 0.9),
          rgba(0, 0, 0, 0.9));
      position: absolute;
      top: 100px;
      left: 100px;
    }

    #backdrop div {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 2px;
      transform-style: preserve-3d;
    }
  </style>
  <script src="resources/perf_test_helper.js"></script>
  <script type="text/javascript">
    var N = PerfTestHelper.getN(200);
    var duration = 2000;
    function randomColorGenerator()
    {
      return '#' + Math.floor(Math.random()*16777215).toString(16);
    }
    function makeKeyframes() {
      var keyframes = [];
      var numKeyframes = 2;
      for (var i = 0; i < numKeyframes + 1; i++) {
        var fraction = i / numKeyframes;
        var t = (fraction * 0.6) + 0.1;
        keyframes.push({opacity: t});
      }
      return keyframes;
    }
    function startExperiment()
    {
      var keyframes = makeKeyframes();
      for (var i = 0; i < N; i++) {
        var elem = document.createElement("div");
        elem.style.backgroundColor = randomColorGenerator();
        elem.style.transform = "rotateZ(" + ((i + 1) * 10.1).toString() + "deg)";
        backdrop.appendChild(elem);
        elem.animate(keyframes, {duration: duration, iterations: Infinity,
          direction: 'alternate', delay: -2 * duration * Math.random()});
      }
      PerfTestHelper.signalReady();
    }
    window.addEventListener('load', startExperiment, false);
  </script>
</head>
<body>
<div id="backdrop"></div>
</body>
</html>
chromium/tools/perf/page_sets/tough_animation_cases/compositor_heavy_animation.html
