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