Unreviewed, fix build failure
[WebKit-https.git] / PerformanceTests / Animation / css-animation.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5     <meta name="viewport" content="initial-scale=1.0">
6     <style>
7         body {
8             margin: 0;
9         }
10         #stage {
11             position: relative;
12             width: 320px;
13             height: 320px;
14             border: 1px solid black;
15             overflow: hidden;
16         }
17         
18         .particle {
19             position: absolute;
20             height: 20px;
21             width: 20px;
22             background-color: blue;
23             border-radius: 50%;
24             animation: horizontal infinite 2s alternate ease-in-out, vertical infinite 2s alternate ease-in-out;
25         }
26         
27         @keyframes horizontal {
28             from {
29                 left: 0;
30             }
31             50% {
32                 left: 300px;
33             }
34             to {
35                 left: 0;
36             }
37         }
38
39         @keyframes vertical {
40             from {
41                 top: 0;
42             }
43             50% {
44                 top: 300px;
45             }
46             to {
47                 top: 0;
48             }
49         }
50     </style>
51     <script>
52
53         var animationDuration = 2;
54
55         function randomInt(min, max)
56         {
57             return Math.round(this.random(min, max));
58         }
59
60         function random(min, max)
61         {
62             return (Math.random() * (max - min)) + min;
63         }
64
65         function randomColor()
66         {
67             var min = 32;
68             var max = 256 - 32;
69             return "#"
70                 + this.randomInt(min, max).toString(16)
71                 + this.randomInt(min, max).toString(16)
72                 + this.randomInt(min, max).toString(16);
73         }
74         
75         function Point(x, y)
76         {
77             this.x = x;
78             this.y = y;
79         }
80
81         Point.pointOnCircle = function(angle, radius)
82         {
83             return new Point(radius * Math.cos(angle), radius * Math.sin(angle));
84         }
85
86         Point.prototype =
87         {
88             add: function(other)
89             {
90                 if(isNaN(other.x))
91                     return new Point(this.x + other, this.y + other);
92                 return new Point(this.x + other.x, this.y + other.y);
93             },
94
95             subtract: function(other)
96             {
97                 if(isNaN(other.x))
98                     return new Point(this.x - other, this.y - other);
99                 return new Point(this.x - other.x, this.y - other.y);
100             },
101
102             move: function(angle, velocity, timeDelta)
103             {
104                 return this.add(Point.pointOnCircle(angle, velocity * (timeDelta / 1000)));
105             },
106
107             multiply: function(other)
108             {
109                 if(isNaN(other.x))
110                     return new Point(this.x * other, this.y * other);
111                 return new Point(this.x * other.x, this.y * other.y);
112             },
113
114             length: function() {
115                 return Math.sqrt( this.x * this.x + this.y * this.y );
116             },
117
118             normalize: function() {
119                 var l = Math.sqrt( this.x * this.x + this.y * this.y );
120                 this.x /= l;
121                 this.y /= l;
122                 return this;
123             }
124         }
125
126         function Particle(maxPosition)
127         {
128             this.element = document.createElement('div');
129             this.element.className = 'particle';
130             this.element.style.backgroundColor = randomColor();
131             var slop = 0.2;
132             this.element.style.animationDuration = random(animationDuration - slop, animationDuration + slop) + 's, ' + random(animationDuration - slop, animationDuration + slop) + 's';
133             this.element.style.animationDelay = '-' + random(0, animationDuration) + 's';
134             this.maxPosition = maxPosition;
135             this.reset();
136             this.move();
137         }
138
139         Particle.prototype =
140         {
141             reset: function()
142             {
143                 this.size = new Point(20, 20);
144                 this.maxLocation = this.maxPosition.subtract(this.size);
145                 this.position = new Point(0, 0);
146             },
147
148             move: function()
149             {
150                 this.element.style.transform = "translate(" + this.position.x + "px," + this.position.y + "px) ";
151             }
152         }
153
154         var numParticles = 20;
155         var particles = [];
156
157         function makeParticles()
158         {
159             var stage = document.getElementById('stage');
160             var maxPosition = new Point(320, 320);
161             for (var i = 0; i < numParticles; ++i) {
162                 particles.push(new Particle(maxPosition));
163                 stage.appendChild(particles[i].element);
164             }
165         }
166                 
167         function setupAnimation()
168         {
169             makeParticles();
170         }
171         
172         window.addEventListener('load', setupAnimation, false);
173     </script>
174 </head>
175 <body>
176
177 <div id="stage">
178 </div>
179
180 </body>
181 </html>