third_party/WebKit/PerformanceTests/SVG/Cowboy_transform.html

   1 <!DOCTYPE html>
   2 <div>
   3     <object id="svg-content" data="resources/Cowboy.svg" width="400px" height="400px" type="image/svg+xml">
   4     </object>
   5 </div>
   6 <script src="../resources/runner.js"></script>
   7 <script>
   8 var svgContent;
   9 var startTime;
  10 var loop_iterations = 5;
  11 var ANIMATION_ITERATIONS = 5;
  12 var animation_loop;
  13 var offset;
  14 var state;
  15 var delta;
  16 var results = [];
  17 var now = function(){
  18     return window.performance ? performance.now() : Date.now();
  19 };
  20 var init = function(){
  21     animation_loop = ANIMATION_ITERATIONS;
  22     offset = 0;
  23     state = 'zoomin';
  24     delta = 1;
  25     startTime = now();
  26     requestAnimationFrame(step);
  27 };
  28 var step = function(){
  29     animation_loop--;
  30     if (animation_loop==0){
  31         animation_loop = ANIMATION_ITERATIONS;
  32         switch(state){
  33             case 'zoomin':
  34                 state='scroll';
  35                 delta = 0;
  36                 break;
  37             case 'scroll':
  38                 state='zoomout';
  39                 delta = 2;
  40                 break;
  41             case 'zoomout':
  42                 loop_iterations--;
  43                 results.push(now()-startTime);
  44                 if (loop_iterations>0)
  45                     init();
  46                 else{
  47                     PerfTestRunner.logStatistics(results, 'ms', "Time:");
  48                     if (testRunner) testRunner.notifyDone();
  49                 }
  50                 return;
  51         }
  52     }
  53     switch(state){
  54         case 'zoomin':
  55             delta += 0.2;
  56             svgContent.style.transform='matrix('+delta+',0,0,'+delta+',0,0)';
  57             break;
  58         case 'scroll':
  59             if (animation_loop>ANIMATION_ITERATIONS/2) delta += 80;
  60             else delta -= 80;
  61             svgContent.style.transform='matrix(2,0,0,2,'+delta+',0)';
  62             break;
  63         case 'zoomout':
  64             delta -= 0.2;
  65             svgContent.style.transform='matrix('+delta+',0,0,'+delta+',0,0)';
  66             break;
  67     }
  68     requestAnimationFrame(step);
  69 };
  70 window.onload = function(){
  71     svgContent = document.getElementById('svg-content').contentDocument.documentElement;
  72     init();
  73 }
  74 </script>