src/tools/perf/page_sets/tough_animation_cases/css_animations_simultaneous_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(1000);
  10 var duration = 1000;
  11 var style = null;
  12
  13 for (var i = 0; i < N; i++) {
  14   var target = document.createElement('target');
  15   container.appendChild(target);
  16 }
  17
  18 var nextAnim = 0;
  19 function updateStyle() {
  20   if (style) {
  21     style.remove();
  22   }
  23   anim = 'anim' + nextAnim++;
  24   style = document.createElement('style');
  25   style.textContent = '\
  26   target {\
  27     -webkit-animation: ' + anim + ' 1s linear infinite;\
  28   }\n\
  29   @-webkit-keyframes ' + anim + ' {\
  30     0% { opacity: 0; }\
  31     100% { opacity: 1; }\
  32   }';
  33   container.appendChild(style);
  34 }
  35
  36 updateStyle();
  37 setInterval(updateStyle, duration);
  38
  39 PerfTestHelper.signalReady();
  40 </script>