tools/perf/page_sets/tough_animation_cases/css_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/perf_test_helper.js"></script>
   5 <style>
   6 target {
   7   position: absolute;
   8   width: 0px;
   9   height: 0px;
  10   border: 5px solid green;
  11   border-radius: 100%;
  12 }
  13 </style>
  14
  15 <container id="container"></container>
  16
  17 <script>
  18 var N = PerfTestHelper.getN(1000);
  19 var numKeyframes = 500;
  20 var duration = 4000;
  21
  22 function makeKeyframes(numKeyframes, width, height) {
  23   var keyframes = '@-webkit-keyframes anim {\n'
  24   for (var i = 0; i < numKeyframes + 1; i++) {
  25     var fraction = i / numKeyframes;
  26     var t = fraction * 2 * Math.PI;
  27     var x = Math.cos(t) - Math.pow(Math.cos(4 * t), 3);
  28     x = ((x / 4 + 1 / 2) * width).toFixed(5);
  29     var y = Math.pow(Math.sin(4 * t), 3) - Math.sin(2 * t);
  30     y = ((y / 4 + 1 / 2) * height).toFixed(5);
  31     keyframes += (fraction * 100) + '% { transform: translate(' + x + 'px, ' + y + 'px); }\n';
  32   }
  33   return keyframes;
  34 }
  35
  36 var style = document.createElement('style');
  37 style.textContent = makeKeyframes(numKeyframes, 550, 800);
  38
  39 for (var i = 0; i < N; i++) {
  40   var target = document.createElement('target');
  41   target.style.webkitAnimation = 'anim ' + duration + 'ms linear infinite ' + (-duration / 10 * i / N) + 'ms';
  42   container.appendChild(target);
  43 }
  44
  45 container.appendChild(style);
  46
  47 PerfTestHelper.signalReady();
  48 </script>