Add CSS Animations performance tests

This adds several performance tests for CSS Animations
initiated in various ways.

BUG=421733

Review URL: https://codereview.chromium.org/665833002

Cr-Commit-Position: refs/heads/master@{#302641}

tools/perf/page_sets/tough_animation_cases.py

@@ -55,10 +55,11 @@ class ToughAnimationCasesPageSet(page_set_module.PageSet):
       'file://tough_animation_cases/balls_css_transition_all_properties.html',
       # pylint: disable=C0301
       'file://tough_animation_cases/overlay_background_color_css_transitions.html',
+
       # Why: Tests many CSS Transitions all starting at the same time triggered
       # by inserting new elements.
       # pylint: disable=C0301
-      'file://tough_animation_cases/css_transitions_simultaneous_by_inserting_new_elements.html?N=0316',
+      'file://tough_animation_cases/css_transitions_simultaneous_by_inserting_new_element.html?N=0316',
       # Why: Tests many CSS Transitions all starting at the same time triggered
       # by inserting style sheets.
       # pylint: disable=C0301
@@ -94,7 +95,7 @@ class ToughAnimationCasesPageSet(page_set_module.PageSet):
       # Why: Tests many CSS Transitions starting at different times triggered by
       # inserting style sheets.
       # pylint: disable=C0301
-      'file://tough_animation_cases/css_transitions_staggered_triggering_by_inserting_style.html?N=0316',
+      'file://tough_animation_cases/css_transitions_staggered_triggering_by_inserting_style_element.html?N=0316',
       # Why: Tests many CSS Transitions starting at different times triggered by
       # updating class.
       # pylint: disable=C0301
@@ -104,6 +105,62 @@ class ToughAnimationCasesPageSet(page_set_module.PageSet):
       # pylint: disable=C0301
       'file://tough_animation_cases/css_transitions_staggered_triggering_by_updating_inline_style.html?N=0316',
 
+      # Why: Tests many CSS Animations all starting at the same time with 500
+      # keyframes each.
+      'file://tough_animation_cases/css_animations_many_keyframes.html?N=0316',
+      # Why: Tests many CSS Animations all starting at the same time triggered
+      # by inserting new elements.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_simultaneous_by_inserting_new_element.html?N=0316',
+      # Why: Tests many CSS Animations all starting at the same time triggered
+      # by inserting style sheets.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_simultaneous_by_inserting_style_element.html?N=0316',
+      # Why: Tests many CSS Animations all starting at the same time triggered
+      # by updating class.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_simultaneous_by_updating_class.html?N=0316',
+      # Why: Tests many CSS Animations all starting at the same time triggered
+      # by updating inline style.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_simultaneous_by_updating_inline_style.html?N=0316',
+      # Why: Tests many CSS Animations chained together using events at
+      # different times triggered by inserting new elements.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_staggered_chaining_by_inserting_new_element.html?N=0316',
+      # Why: Tests many CSS Animations chained together using events at
+      # different times triggered by inserting style sheets.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_staggered_chaining_by_inserting_style_element.html?N=0316',
+      # Why: Tests many CSS Animations chained together using events at
+      # different times triggered by updating class.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_staggered_chaining_by_updating_class.html?N=0316',
+      # Why: Tests many CSS Animations chained together using events at
+      # different times triggered by updating inline style.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_staggered_chaining_by_updating_inline_style.html?N=0316',
+      # Why: Tests many CSS Animations starting at different times triggered by
+      # inserting new elements.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_staggered_triggering_by_inserting_new_element.html?N=0316',
+      # Why: Tests many CSS Animations all starting at the same time with
+      # staggered animation offsets.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_staggered_infinite_iterations.html?N=0316',
+      # Why: Tests many CSS Animations starting at different times triggered by
+      # inserting style sheets.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_staggered_triggering_by_inserting_style_element.html?N=0316',
+      # Why: Tests many CSS Animations starting at different times triggered by
+      # updating class.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_staggered_triggering_by_updating_class.html?N=0316',
+      # Why: Tests many CSS Animations starting at different times triggered by
+      # updating inline style.
+      # pylint: disable=C0301
+      'file://tough_animation_cases/css_animations_staggered_triggering_by_updating_inline_style.html?N=0316',
+
       # Why: Tests many Web Animations all starting at the same time with 500
       # keyframes each.
       'file://tough_animation_cases/web_animations_many_keyframes.html?N=0316',

tools/perf/page_sets/tough_animation_cases/css_animations_many_keyframes.html

+<!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/perftesthelper.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 = '@-webkit-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.webkitAnimation = 'anim ' + duration + 'ms linear infinite ' + (-duration / 10 * i / N) + 'ms';
+  container.appendChild(target);
+}
+
+container.appendChild(style);
+
+PerfTestHelper.signalReady();
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_simultaneous_by_inserting_new_element.html

+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="resources/animation.css">
+<link rel="stylesheet" type="text/css" href="resources/tablet.css">
+<script src="resources/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  container.textContent = '';
+  for (var i = 0; i < N; i++) {
+    startAnimation();
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+
+PerfTestHelper.signalReady();
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_simultaneous_by_inserting_style_element.html

+<!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/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+var style = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var nextAnim = 0;
+function updateStyle() {
+  if (style) {
+    style.remove();
+  }
+  anim = 'anim' + nextAnim++;
+  style = document.createElement('style');
+  style.textContent = '\
+  target {\
+    -webkit-animation: ' + anim + ' 1s linear infinite;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { opacity: 0; }\
+    100% { opacity: 1; }\
+  }';
+  container.appendChild(style);
+}
+
+updateStyle();
+setInterval(updateStyle, duration);
+
+PerfTestHelper.signalReady();
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_simultaneous_by_updating_class.html

+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="resources/animation.css">
+<link rel="stylesheet" type="text/css" href="resources/tablet.css">
+<script src="resources/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].classList.toggle('reverse');
+  }
+}
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+
+PerfTestHelper.signalReady();
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_simultaneous_by_updating_inline_style.html

+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="resources/animation.css">
+<link rel="stylesheet" type="text/css" href="resources/tablet.css">
+<script src="resources/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var anim = 0;
+function startAllAnimations() {
+  anim++;
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].style.webkitAnimationName = (anim % 2 ? '' : 'reverse-') + 'anim';
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+
+PerfTestHelper.signalReady();
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_inserting_new_element.html

+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="resources/animation.css">
+<link rel="stylesheet" type="text/css" href="resources/tablet.css">
+<script src="resources/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.remove();
+    startAnimation();
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      PerfTestHelper.signalReady();
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_inserting_style_element.html

+<!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/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(500);
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  updateStyle(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    updateStyle(target);
+  });
+}
+
+var nextId = 0;
+var nextAnim = 0;
+function updateStyle(element) {
+  if (!element.id) {
+    element.id = 'e' + nextId++;
+  }
+  if (element.styleSheet) {
+    element.styleSheet.remove();
+  }
+  var id = element.id;
+  var anim = id + 'anim' + nextAnim++;
+  var style = document.createElement('style');
+  style.textContent = '\
+  #' + id + ' {\
+    -webkit-animation: ' + anim + ' 1s;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { opacity: 0; }\
+    100% { opacity: 1; }\
+  }';
+  container.appendChild(style);
+  element.styleSheet = style;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      PerfTestHelper.signalReady();
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_updating_class.html

+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="resources/animation.css">
+<link rel="stylesheet" type="text/css" href="resources/tablet.css">
+<script src="resources/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.classList.toggle('reverse');
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      PerfTestHelper.signalReady();
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_updating_inline_style.html

+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="resources/animation.css">
+<link rel="stylesheet" type="text/css" href="resources/tablet.css">
+<script src="resources/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 0;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.style.webkitAnimationName = ((e.target.i++) % 2 ? '' : 'reverse-') + 'anim';
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      PerfTestHelper.signalReady();
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_staggered_infinite_iterations.html

+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="resources/animation.css">
+<link rel="stylesheet" type="text/css" href="resources/tablet.css">
+<script src="resources/perftesthelper.js"></script>
+<style>
+target {
+  -webkit-animation-iteration-count: infinite;
+}
+</style>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.animationDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+}
+
+PerfTestHelper.signalReady();
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_inserting_new_element.html

+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="resources/animation.css">
+<link rel="stylesheet" type="text/css" href="resources/tablet.css">
+<script src="resources/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i])
+    targets[i].remove();
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      PerfTestHelper.signalReady();
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
\ No newline at end of file

tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_inserting_style_element.html

+<!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/perftesthelper.js"></script>
+<style>
+target {
+  -webkit-animation: 1000ms linear;
+}
+</style>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+var targets = [];
+var styles = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewAnimationStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var animationName = 'anim' + step;
+  style.textContent = '@-webkit-keyframes ' + animationName + ' { 0% { opacity: 0; } 100% { opacity: 1; } }';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return animationName;
+}
+
+function startAnimations(startingTargets, startStep, endStep) {
+  var newAnimationName = addNewAnimationStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target.style.animationName = newAnimationName;
+    startInfo.target.style.animationDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N],
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startAnimations(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+
+  PerfTestHelper.signalReady();
+});
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_updating_class.html

+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="resources/animation.css">
+<link rel="stylesheet" type="text/css" href="resources/tablet.css">
+<script src="resources/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].classList.toggle('reverse');
+    return;
+  }
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      PerfTestHelper.signalReady();
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>

tools/perf/page_sets/tough_animation_cases/css_animations_staggered_triggering_by_updating_inline_style.html

+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="resources/animation.css">
+<link rel="stylesheet" type="text/css" href="resources/tablet.css">
+<script src="resources/perftesthelper.js"></script>
+
+<container id="container"></container>
+
+<script>
+var N = PerfTestHelper.getN(1000);
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].style.webkitAnimationName = ((targets[i].i++) % 2 ? '' : 'reverse-') + 'anim';
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  target.i = 0;
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      PerfTestHelper.signalReady();
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>

tools/perf/page_sets/tough_animation_cases/resources/animation.css

+/* Copyright 2014 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+target {
+  -webkit-animation: anim 1s linear;
+}
+target.reverse {
+  -webkit-animation: reverse-anim 1s linear;
+}
+@-webkit-keyframes anim {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+@-webkit-keyframes reverse-anim {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}