1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="../resources/runner.js"></script> 5 </head> 6 <body> 7 <div id="wrapper"> 8 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 9 <defs> 10 <g id="unit"> 11 <polygon points="0,0 10,0 5,8.66025403784439"/> 12 </g> 13 14 <g id="q"> 15 <use id="q0" xlink:href="#unit" x="10" y="0" fill="red"/> 16 <use id="q1" xlink:href="#unit" transform="translate(10,0) rotate(60)" fill="green"/> 17 <use id="q2" xlink:href="#unit" transform="translate(10,0) rotate(120)" fill="blue"/> 18 <use id="q3" xlink:href="#unit" transform="rotate(60) translate(10,0) rotate(-60)" fill="purple"/> 19 </g> 20 21 <g id="qq"> 22 <use id="qq0" xlink:href="#q" x="20" y="0"/> 23 <use id="qq1" xlink:href="#q" transform="translate(20,0) rotate(60)"/> 24 <use id="qq2" xlink:href="#q" transform="translate(20,0) rotate(120)"/> 25 <use id="qq3" xlink:href="#unit" transform="rotate(60) translate(20,0) rotate(-60) scale(2)" fill="purple"/> 26 </g> 27 28 <g id="qqq"> 29 <use xlink:href="#qq" x="40" y="0"/> 30 <use xlink:href="#qq" transform="translate(40,0) rotate(60)"/> 31 <use xlink:href="#qq" transform="translate(40,0) rotate(120)"/> 32 <use xlink:href="#q" transform="rotate(60) translate(40,0) rotate(-60) scale(2)"/> 33 </g> 34 </defs> 35 36 <use xlink:href="#qqq"/> 37 <g transform="translate(300 200)"> 38 <rect width="70" height="26" stroke-width="1" fill="rgb(255,255,255)" fill-opacity="1.000" stroke="rgb(0,0,0)" stroke-opacity="1.000"/> 39 <text id="FPS" y="23" font-family="Verdana" font-size="23">0</text> 40 </g> 41 </svg> 42 </div> 43 44 <script type="text/javascript"> 45 var frame = 0; 46 var times = [PerfTestRunner.now()]; 47 var unit = document.getElementById("unit"); 48 49 requestAnimationFrame = 50 window['requestAnimationFrame'] || 51 window['webkitRequestAnimationFrame'] || 52 window['mozRequestAnimationFrame'] || 53 window['oRequestAnimationFrame'] || 54 window['msRequestAnimationFrame'] || 55 function(callback) { 56 window.setTimeout(callback, 1000 / 60); 57 }; 58 59 function newFrame() { 60 times.push(PerfTestRunner.now()); 61 var avg = (times[times.length - 1] - times[0]) / (times.length - 1); 62 while (times.length > 10) 63 times.shift(); 64 65 document.getElementById("FPS").textContent = (1000 / avg).toFixed(2); 66 unit.setAttribute('transform', 'scale(' + (Math.abs(frame++ % 20 - 10) / 10) + ')'); 67 }; 68 69 function animate() { 70 newFrame(); 71 requestAnimationFrame(animate); 72 } 73 74 if (window.testRunner) { 75 PerfTestRunner.measureRunsPerSecond({ run: newFrame, done: function() { 76 document.getElementById('wrapper').style.display = 'none'; 77 }}); 78 } else 79 requestAnimationFrame(animate); 80 </script> 81 </body> 82 </html> 83
