| <!DOCTYPE html> |
| <div> |
| <object id="svg-content" data="resources/Cowboy.svg" width="400px" height="400px" type="image/svg+xml"> |
| </object> |
| </div> |
| <script src="../resources/runner.js"></script> |
| <script> |
| var svgContent; |
| var startTime; |
| var loop_iterations = 5; |
| var ANIMATION_ITERATIONS = 5; |
| var animation_loop; |
| var offset; |
| var state; |
| var delta; |
| var results = []; |
| var now = function(){ |
| return window.performance ? performance.now() : Date.now(); |
| }; |
| var init = function(){ |
| animation_loop = ANIMATION_ITERATIONS; |
| offset = 0; |
| state = 'zoomin'; |
| delta = 1; |
| startTime = now(); |
| requestAnimationFrame(step); |
| }; |
| var step = function(){ |
| animation_loop--; |
| if (animation_loop==0){ |
| animation_loop = ANIMATION_ITERATIONS; |
| switch(state){ |
| case 'zoomin': |
| state='scroll'; |
| delta = 0; |
| break; |
| case 'scroll': |
| state='zoomout'; |
| delta = 2; |
| break; |
| case 'zoomout': |
| loop_iterations--; |
| results.push(now()-startTime); |
| if (loop_iterations>0) |
| init(); |
| else{ |
| PerfTestRunner.logStatistics(results, 'ms', "Time:"); |
| if (testRunner) testRunner.notifyDone(); |
| } |
| return; |
| } |
| } |
| switch(state){ |
| case 'zoomin': |
| delta += 0.2; |
| svgContent.style.transform='matrix('+delta+',0,0,'+delta+',0,0)'; |
| break; |
| case 'scroll': |
| if (animation_loop>ANIMATION_ITERATIONS/2) delta += 80; |
| else delta -= 80; |
| svgContent.style.transform='matrix(2,0,0,2,'+delta+',0)'; |
| break; |
| case 'zoomout': |
| delta -= 0.2; |
| svgContent.style.transform='matrix('+delta+',0,0,'+delta+',0,0)'; |
| break; |
| } |
| requestAnimationFrame(step); |
| }; |
| window.onload = function(){ |
| svgContent = document.getElementById('svg-content').contentDocument.documentElement; |
| init(); |
| } |
| </script> |
