Unreviewed, fix build failure
[WebKit-https.git] / PerformanceTests / Animation / balls.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
4 <!--
5     Copyright (c) 2012 Cameron Adams. All rights reserved.
6     Copyright (c) 2012 Code Aurora Forum. All rights reserved.
7
8     Redistribution and use in source and binary forms, with or without
9     modification, are permitted provided that the following conditions are
10     met:
11         * Redistributions of source code must retain the above copyright
12           notice, this list of conditions and the following disclaimer.
13         * Redistributions in binary form must reproduce the above
14           copyright notice, this list of conditions and the following
15           disclaimer in the documentation and/or other materials provided
16           with the distribution.
17         * Neither the name of Code Aurora Forum, Inc. nor the names of its
18           contributors may be used to endorse or promote products derived
19           from this software without specific prior written permission.
20
21     THIS SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESS OR IMPLIED
22     WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
23     MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT
24     ARE DISCLAIMED.  IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS
25     BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
26     CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
27     SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
28     BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
29     WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
30     OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN
31     IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
32
33     This test is based on code written by Cameron Adams and imported from
34       http://themaninblue.com/experiment/AnimationBenchmark/html
35 -->
36
37 <head>
38
39     <title>Benchmark - HTML &amp; JavaScript</title>
40
41     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
42     <meta name="author" content="The Man in Blue" />
43     <meta name="robots" content="all" />
44     <meta name="MSSmartTagsPreventParsing" content="true" />
45     <meta name="description" content="" />
46     <meta name="keywords" content="" />
47
48     <style type="text/css">
49
50     html {
51         height: 100%;
52     }
53
54     body {
55         width: 100%;
56         height: 100%;
57         overflow: hidden;
58         margin: 0;
59         padding: 0;
60     }
61
62     span {
63         position: absolute;
64         width: 12px;
65         height: 12px;
66         overflow: hidden;
67         -webkit-border-radius: 6px;
68         -moz-border-radius: 6px;
69         border-radius: 6px;
70         background-color: #000000;
71     }
72
73     .shadows span {
74         -webkit-box-shadow: 4px 4px 3px rgba(0,0,0,0.33);
75         -moz-box-shadow: 4px 4px 3px rgba(0,0,0,0.33);
76         box-shadow: 4px 4px 3px rgba(0,0,0,0.33);
77     }
78
79     #frameRate {
80         position: absolute;
81         right: 10px;
82         bottom: 10px;
83         z-index: 100;
84         font-size: 25px;
85         font-family: Arial, Helvetica, sans-serif;
86     }
87
88     </style>
89
90     <script type="text/javascript">
91
92     var FRAMES_PER_TIMER_READING = 10;
93     var MAX_PARTICLES = 2500;
94     var MAX_VELOCITY = 50;
95     var PARTICLE_RADIUS = 6;
96     var STAGE_WIDTH = 600;
97     var STAGE_HEIGHT = 600;
98     var COLORS = ["#cc0000", "#ffcc00", "#aaff00", "#0099cc", "#194c99", "#661999"];
99
100     var frameTimes = [];
101     var iteration = 0;
102     var run = 0;
103     var animateIntervalId = 0;
104     var statistics = [];
105     var frameRates = [];
106     var particles = [];
107
108     window.onload = function () {
109         PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'fps'});
110
111         // Create the particles
112         for (var i = 0; i < MAX_PARTICLES; i++)
113             particles.push(new Particle());
114
115         // Start the animation
116         animateIntervalId = setInterval(animate, 1);
117     }
118
119     function animate()
120     {
121         var currTime = PerfTestRunner.now();
122         var timeDelta = currTime - frameTimes[frameTimes.length - 1];
123
124         if (isNaN(timeDelta))
125             timeDelta = 0;
126
127         // Draw each particle
128         for (var particle in particles)
129             particles[particle].draw(timeDelta);
130
131         if ((iteration++ % FRAMES_PER_TIMER_READING) == 0) {
132             // Limit the frame time array to the last 30 frames
133             if (frameTimes.length > 30)
134                 frameTimes.splice(0, 1);
135
136             frameTimes.push(currTime);
137
138             // Calculate the framerate based upon the difference between the absolute times of the oldest and newest frames, subdivided by how many frames were drawn inbetween
139             var frameRate = document.getElementById("frameRate");
140             var frameRateVal = FRAMES_PER_TIMER_READING * 1000 / ((currTime - frameTimes[0]) / (frameTimes.length - 1));
141
142             if (!isNaN(frameRateVal))
143                 PerfTestRunner.measureValueAsync(frameRateVal);
144         }
145     }
146
147     function Particle()
148     {
149         var angle = Math.PI * 2 * PerfTestRunner.random();
150         var velocity = MAX_VELOCITY / 8 * 7 * PerfTestRunner.random() + MAX_VELOCITY / 8;
151         var x = STAGE_WIDTH / 2 - PARTICLE_RADIUS;
152         var y = STAGE_HEIGHT / 2 - PARTICLE_RADIUS;
153
154         // Create visual element for the particle
155         var domNode = document.createElement('span');
156         document.body.appendChild(domNode);
157
158         // Set initial position to middle of screen
159         domNode.style.left = x + "px";
160         domNode.style.top = y + "px";
161
162         // Set colour of element
163         domNode.style.backgroundColor = COLORS[Math.floor(Math.random() * COLORS.length)];
164
165         function destroy()
166         {
167             document.body.removeChild(domNode);
168             return;
169         }
170
171         function draw(timeDelta)
172         {
173             // Calculate next position of particle
174             var nextX = x + Math.cos(angle) * velocity * (timeDelta / 1000);
175             var nextY = y + Math.sin(angle) * velocity * (timeDelta / 1000);
176
177             // If particle is going to move off right side of screen
178             if (nextX + PARTICLE_RADIUS * 2 > STAGE_WIDTH)
179                 // If angle is between 3 o'clock and 6 o'clock
180                 if ((angle >= 0 && angle < Math.PI / 2))
181                     angle = Math.PI - angle;
182                 // If angle is between 12 o'clock and 3 o'clock
183                 else if (angle > Math.PI / 2 * 3)
184                     angle = angle - (angle - Math.PI / 2 * 3) * 2
185
186             // If particle is going to move off left side of screen
187             if (nextX < 0)
188                 // If angle is between 6 o'clock and 9 o'clock
189                 if ((angle > Math.PI / 2 && angle < Math.PI))
190                     angle = Math.PI - angle;
191                 // If angle is between 9 o'clock and 12 o'clock
192                 else if (angle > Math.PI && angle < Math.PI / 2 * 3)
193                     angle = angle + (Math.PI / 2 * 3 - angle) * 2
194
195             // If particle is going to move off bottom side of screen
196             if (nextY + PARTICLE_RADIUS * 2 > STAGE_HEIGHT)
197                 // If angle is between 3 o'clock and 9 o'clock
198                 if ((angle > 0 && angle < Math.PI))
199                     angle = Math.PI * 2 - angle;
200
201             // If particle is going to move off top side of screen
202             if (nextY < 0)
203                 // If angle is between 9 o'clock and 3 o'clock
204                 if ((angle > Math.PI && angle < Math.PI * 2))
205                     angle = angle - (angle - Math.PI) * 2;
206
207             domNode.style.left = nextX + "px";
208             domNode.style.top = nextY + "px";
209
210             x = nextX;
211             y = nextY;
212         }
213
214         return { draw: draw, destroy: destroy }
215     }
216
217     function onCompletedRun() {
218         clearInterval(animateIntervalId);
219
220         for (var particle in particles) {
221             var p = particles[particle];
222             particles[particle] = 0;
223             p.destroy();
224         }
225         particles = [];
226
227         frameRate.innerHTML = "";
228     }
229     </script>
230     <script src="../resources/runner.js"></script>
231 </head>
232
233 <body>
234     <div id="frameRate">
235     </div>
236 </body>
237
238 </html>