src/tools/perf/page_sets/tough_animation_cases/web_animations_set_current_time_in_raf.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
   7 <container id="container"></container>
   8
   9 <script>
  10 var N = PerfTestHelper.getN(1000);
  11 var duration = 1000;
  12 var players = [];
  13 var prevTime = null;
  14
  15 for (var i = 0; i < N; i++) {
  16   var target = document.createElement('target');
  17   container.appendChild(target);
  18
  19   var player = target.animate([
  20     {opacity: 0},
  21     {opacity: 1},
  22   ], {
  23     duration: duration,
  24     iterations: Infinity,
  25   });
  26   if (player.pause) {
  27     player.pause();
  28   }
  29   players.push(player);
  30 }
  31
  32 requestAnimationFrame(function setCurrentTime(time) {
  33   if (prevTime == null) {
  34     prevTime = time;
  35   }
  36   var delta = time - prevTime;
  37   players.forEach(function(player) {
  38     player.currentTime += delta;
  39   });
  40   prevTime = time;
  41
  42   requestAnimationFrame(setCurrentTime);
  43 });
  44
  45 PerfTestHelper.signalReady();
  46 </script>