src/tools/perf/page_sets/tough_animation_cases/web_animations_many_keyframes.html

   1 <!DOCTYPE html>
   2 <meta name="viewport" content="width=device-width, user-scalable=no">
   3 <link rel="stylesheet" type="text/css" href="resources/tablet.css">
   4 <script src="resources/perftesthelper.js"></script>
   5 <script src="resources/web_animations_api_check.js"></script>
   6 <style>
   7 target {
   8   position: absolute;
   9   width: 0px;
  10   height: 0px;
  11   border: 5px solid green;
  12   border-radius: 100%;
  13 }
  14 </style>
  15
  16 <container id="container"></container>
  17
  18 <script>
  19 var N = PerfTestHelper.getN(1000);
  20 var numKeyframes = 500;
  21 var duration = 4000;
  22
  23 function makeKeyframes(numKeyframes, width, height) {
  24   var keyframes = [];
  25   for (var i = 0; i < numKeyframes + 1; i++) {
  26     var fraction = i / numKeyframes;
  27     var t = fraction * 2 * Math.PI;
  28     var x = Math.cos(t) - Math.pow(Math.cos(4 * t), 3);
  29     x = ((x / 4 + 1 / 2) * width).toFixed(5);
  30     var y = Math.pow(Math.sin(4 * t), 3) - Math.sin(2 * t);
  31     y = ((y / 4 + 1 / 2) * height).toFixed(5);
  32     keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
  33   }
  34   return keyframes;
  35 }
  36
  37 requestAnimationFrame(function() {
  38   var keyframes = makeKeyframes(numKeyframes, 550, 800);
  39   for (var i = 0; i < N; i++) {
  40     var target = document.createElement('target');
  41     container.appendChild(target);
  42     target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration / 10 * i / N});
  43   }
  44 });
  45
  46 PerfTestHelper.signalReady();
  47 </script>