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

   1 <!DOCTYPE html>
   2 <meta name="viewport" content="width=device-width, user-scalable=no">
   3 <link rel="stylesheet" type="text/css" href="resources/animation.css">
   4 <link rel="stylesheet" type="text/css" href="resources/tablet.css">
   5 <script src="resources/perftesthelper.js"></script>
   6
   7 <container id="container"></container>
   8
   9 <script>
  10 var N = PerfTestHelper.getN(1000);
  11 var duration = 1000;
  12
  13 var targets = [];
  14 function startAnimation(i) {
  15   if (targets[i])
  16     targets[i].remove();
  17   var target = document.createElement('target');
  18   container.appendChild(target);
  19   targets[i] = target;
  20 }
  21
  22 requestAnimationFrame(function(t) {
  23   var base = t;
  24   var i = 0;
  25
  26   function staggeredStart(t) {
  27     var elapsed = t - base;
  28     for (; i < N && i < N * elapsed / duration; i++) {
  29       startAnimation(i);
  30     }
  31     if (elapsed > duration) {
  32       PerfTestHelper.signalReady();
  33       i = 0;
  34       base = t - (elapsed % duration);
  35       elapsed = 0;
  36     }
  37     requestAnimationFrame(staggeredStart);
  38   }
  39   requestAnimationFrame(staggeredStart);
  40 });
  41 </script>