background_color_animation_with_gradient.html

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    #backdrop {
      margin: 0;
    }

    #backdrop div {
      position: absolute;
      border-radius: 2px;
      opacity: 0.5;
      width: 100%;
      height: 900px;
      -webkit-transform-style: preserve-3d;
      border: 1px solid black;
    }

    .gradient {
      background:-webkit-repeating-radial-gradient(circle, red, green 5%, blue 10%, red 15%);
      opacity: 0.25;
      width:100%;
      height:900px;
     }
  </style>
  <script type="text/javascript">
    var N = 5;
    var duration = 5000;
    function startExperiment()
    {
      var keyframes = [{background: '#111'}, {background: '#eee'}];
      document.body.animate(keyframes, {duration: duration, iterations: Infinity,
        direction: 'alternate', delay: -2 * duration * Math.random()});
      for (var i = 0; i < N; i++) {
        var elem = document.createElement("div");
        elem.style.webkitTransform = "rotate3d(1,1,0," + ((i + 1) * 10).toString() + "deg)";
        backdrop.appendChild(elem);
        elem.animate(keyframes, {duration: duration, iterations: Infinity,
          direction: 'alternate', delay: -2 * duration * Math.random()});
        var gradient = document.createElement("div");
        gradient.className = "gradient";
        elem.appendChild(gradient);
      }
    }
    window.addEventListener('load', startExperiment, false);
  </script>
</head>
<body>
<div id="backdrop"><div class="gradient"></div></div>
</body>
</html>
chromium/tools/perf/page_sets/tough_texture_upload_cases/background_color_animation_with_gradient.html
