src/tools/perf/page_sets/tough_animation_cases/css_animations_staggered_chaining_by_inserting_style_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/tablet.css">
   4 <script src="resources/perftesthelper.js"></script>
   5
   6 <container id="container"></container>
   7
   8 <script>
   9 var N = PerfTestHelper.getN(500);
  10 var duration = 1000;
  11
  12 function startAnimation() {
  13   var target = document.createElement('target');
  14   container.appendChild(target);
  15   updateStyle(target);
  16   target.addEventListener('webkitAnimationEnd', function(e) {
  17     updateStyle(target);
  18   });
  19 }
  20
  21 var nextId = 0;
  22 var nextAnim = 0;
  23 function updateStyle(element) {
  24   if (!element.id) {
  25     element.id = 'e' + nextId++;
  26   }
  27   if (element.styleSheet) {
  28     element.styleSheet.remove();
  29   }
  30   var id = element.id;
  31   var anim = id + 'anim' + nextAnim++;
  32   var style = document.createElement('style');
  33   style.textContent = '\
  34   #' + id + ' {\
  35     -webkit-animation: ' + anim + ' 1s;\
  36   }\n\
  37   @-webkit-keyframes ' + anim + ' {\
  38     0% { opacity: 0; }\
  39     100% { opacity: 1; }\
  40   }';
  41   container.appendChild(style);
  42   element.styleSheet = style;
  43 }
  44
  45 requestAnimationFrame(function(t) {
  46   var base = t;
  47   var i = 0;
  48
  49   function staggeredStart(t) {
  50     elapsed = t - base;
  51     for (; i < N * elapsed / duration; i++) {
  52       startAnimation();
  53     }
  54     if (i < N) {
  55       requestAnimationFrame(staggeredStart);
  56     } else {
  57       PerfTestHelper.signalReady();
  58     }
  59   }
  60   requestAnimationFrame(staggeredStart);
  61 });
  62 </script>