css_animations_many_keyframes.html | Explore in Territory

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="resources/tablet.css">
<script src="resources/perf_test_helper.js"></script>
<style>
target {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 5px solid green;
  border-radius: 100%;
}
</style>

<container id="container"></container>

<script>
var N = PerfTestHelper.getN(1000);
var numKeyframes = 500;
var duration = 4000;

function makeKeyframes(numKeyframes, width, height) {
  var keyframes = '@keyframes anim {\n'
  for (var i = 0; i < numKeyframes + 1; i++) {
    var fraction = i / numKeyframes;
    var t = fraction * 2 * Math.PI;
    var x = Math.cos(t) - Math.pow(Math.cos(4 * t), 3);
    x = ((x / 4 + 1 / 2) * width).toFixed(5);
    var y = Math.pow(Math.sin(4 * t), 3) - Math.sin(2 * t);
    y = ((y / 4 + 1 / 2) * height).toFixed(5);
    keyframes += (fraction * 100) + '% { transform: translate(' + x + 'px, ' + y + 'px); }\n';
  }
  return keyframes;
}

var style = document.createElement('style');
style.textContent = makeKeyframes(numKeyframes, 550, 800);

for (var i = 0; i < N; i++) {
  var target = document.createElement('target');
  target.style.animation = 'anim ' + duration + 'ms linear infinite ' + (-duration / 10 * i / N) + 'ms';
  container.appendChild(target);
}

container.appendChild(style);

PerfTestHelper.signalReady();
</script>
chromium/tools/perf/page_sets/tough_animation_cases/css_animations_many_keyframes.html
