src/tools/perf/page_sets/tough_animation_cases/css_transitions_staggered_chaining_by_updating_class.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 <link rel="stylesheet" type="text/css" href="resources/transition.css">
   5 <script src="resources/perftesthelper.js"></script>
   6 <style>
   7 target {
   8   opacity: 0;
   9 }
  10 .keyframe0 {
  11   opacity: 0;
  12 }
  13 .keyframe1 {
  14   opacity: 1;
  15 }
  16 </style>
  17
  18 <container id="container"></container>
  19
  20 <script>
  21 var N = PerfTestHelper.getN(1000);
  22 var duration = 1000;
  23 var keyframeValues = [0, 1];
  24
  25 for (var i = 0; i < N; i++) {
  26   var target = document.createElement('target');
  27   target._keyframe = 0;
  28   target.style.transitionDelay = (-i / N * duration) + 'ms';
  29   container.appendChild(target);
  30   target.addEventListener('transitionend', restartTransition);
  31 }
  32
  33 function restartTransition(event) {
  34   event.target._keyframe ^= 1;
  35   event.target.className = 'keyframe' + event.target._keyframe;
  36   event.target.style.removeProperty('transition-delay');
  37 }
  38
  39 requestAnimationFrame(function() {
  40   var styleRule = document.styleSheets[2].rules[0].style;
  41   styleRule.opacity = keyframeValues[1];
  42   requestAnimationFrame(function() {
  43     styleRule.opacity = keyframeValues[0];
  44   });
  45 });
  46
  47 PerfTestHelper.signalReady();
  48 </script>