2012-10-01 20:53:45 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script src="../resources/runner.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="wrapper">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
|
|
<defs>
|
|
|
|
|
<g id="unit">
|
|
|
|
|
<polygon points="0,0 10,0 5,8.66025403784439"/>
|
|
|
|
|
</g>
|
|
|
|
|
|
|
|
|
|
<g id="q">
|
|
|
|
|
<use id="q0" xlink:href="#unit" x="10" y="0" fill="red"/>
|
|
|
|
|
<use id="q1" xlink:href="#unit" transform="translate(10,0) rotate(60)" fill="green"/>
|
|
|
|
|
<use id="q2" xlink:href="#unit" transform="translate(10,0) rotate(120)" fill="blue"/>
|
|
|
|
|
<use id="q3" xlink:href="#unit" transform="rotate(60) translate(10,0) rotate(-60)" fill="purple"/>
|
|
|
|
|
</g>
|
|
|
|
|
|
|
|
|
|
<g id="qq">
|
|
|
|
|
<use id="qq0" xlink:href="#q" x="20" y="0"/>
|
|
|
|
|
<use id="qq1" xlink:href="#q" transform="translate(20,0) rotate(60)"/>
|
|
|
|
|
<use id="qq2" xlink:href="#q" transform="translate(20,0) rotate(120)"/>
|
|
|
|
|
<use id="qq3" xlink:href="#unit" transform="rotate(60) translate(20,0) rotate(-60) scale(2)" fill="purple"/>
|
|
|
|
|
</g>
|
|
|
|
|
|
|
|
|
|
<g id="qqq">
|
|
|
|
|
<use xlink:href="#qq" x="40" y="0"/>
|
|
|
|
|
<use xlink:href="#qq" transform="translate(40,0) rotate(60)"/>
|
|
|
|
|
<use xlink:href="#qq" transform="translate(40,0) rotate(120)"/>
|
|
|
|
|
<use xlink:href="#q" transform="rotate(60) translate(40,0) rotate(-60) scale(2)"/>
|
|
|
|
|
</g>
|
|
|
|
|
</defs>
|
|
|
|
|
|
|
|
|
|
<use xlink:href="#qqq"/>
|
|
|
|
|
<g transform="translate(300 200)">
|
|
|
|
|
<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"/>
|
|
|
|
|
<text id="FPS" y="23" font-family="Verdana" font-size="23">0</text>
|
|
|
|
|
</g>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var frame = 0;
|
|
|
|
|
var times = [PerfTestRunner.now()];
|
|
|
|
|
var unit = document.getElementById("unit");
|
|
|
|
|
|
|
|
|
|
requestAnimationFrame =
|
|
|
|
|
window['requestAnimationFrame'] ||
|
|
|
|
|
window['webkitRequestAnimationFrame'] ||
|
|
|
|
|
window['mozRequestAnimationFrame'] ||
|
|
|
|
|
window['oRequestAnimationFrame'] ||
|
|
|
|
|
window['msRequestAnimationFrame'] ||
|
|
|
|
|
function(callback) {
|
|
|
|
|
window.setTimeout(callback, 1000 / 60);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function newFrame() {
|
|
|
|
|
times.push(PerfTestRunner.now());
|
|
|
|
|
var avg = (times[times.length - 1] - times[0]) / (times.length - 1);
|
|
|
|
|
while (times.length > 10)
|
|
|
|
|
times.shift();
|
|
|
|
|
|
|
|
|
|
document.getElementById("FPS").textContent = (1000 / avg).toFixed(2);
|
|
|
|
|
unit.setAttribute('transform', 'scale(' + (Math.abs(frame++ % 20 - 10) / 10) + ')');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function animate() {
|
|
|
|
|
newFrame();
|
|
|
|
|
requestAnimationFrame(animate);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (window.testRunner) {
|
2012-10-17 22:06:52 +00:00
|
|
|
PerfTestRunner.measureRunsPerSecond({ run: newFrame, done: function() {
|
2012-10-01 20:53:45 +00:00
|
|
|
document.getElementById('wrapper').style.display = 'none';
|
|
|
|
|
}});
|
|
|
|
|
} else
|
|
|
|
|
requestAnimationFrame(animate);
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
