Index: pkg/polymer/lib/elements/web-animations-js/test/perf/balls-add-compositing.html |
diff --git a/pkg/polymer/lib/elements/web-animations-js/test/perf/balls-add-compositing.html b/pkg/polymer/lib/elements/web-animations-js/test/perf/balls-add-compositing.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..8c558842a750dc0c134b6f5b42f7d8f7f56de737 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/web-animations-js/test/perf/balls-add-compositing.html |
@@ -0,0 +1,147 @@ |
+<!-- |
+Copyright 2013 Google Inc. All Rights Reserved. |
+ |
+Licensed under the Apache License, Version 2.0 (the "License"); |
+you may not use this file except in compliance with the License. |
+You may obtain a copy of the License at |
+ |
+ http://www.apache.org/licenses/LICENSE-2.0 |
+ |
+Unless required by applicable law or agreed to in writing, software |
+distributed under the License is distributed on an "AS IS" BASIS, |
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
+See the License for the specific language governing permissions and |
+limitations under the License. |
+ |
+This test is based on code written by Cameron Adams and imported from |
+ http://themaninblue.com/experiment/AnimationBenchmark/html |
+--> |
+<!doctype html> |
+<head> |
+<style> |
+.ball { |
+ position: absolute; |
+ width: 12px; |
+ height: 12px; |
+ border-radius: 100%; |
+} |
+</style> |
+</head> |
+<script src="perf.js"></script> |
+<script src="../../web-animations.js"></script> |
+<script> |
+'use strict'; |
+ |
+var stageWidth = 600; |
+var stageHeight = 600; |
+var particleCount = 2500; |
+var minVelocity = 50; |
+var maxVelocity = 500; |
+var particleRadius = 6; |
+var colors = ['#cc0000', '#ffcc00', '#aaff00', '#0099cc', '#194c99', '#661999']; |
+var animationDuration = 10; |
+ |
+var particles = []; |
+var player; |
+ |
+var Particle = function() { |
+ this.element = document.createElement('div'); |
+ this.element.className = 'ball'; |
+ this.element.style.backgroundColor = colors[Math.floor(Perf.random() * colors.length)]; |
+ this.element.style.left = (stageWidth / 2 - particleRadius) + 'px'; |
+ this.element.style.top = (stageHeight / 2 - particleRadius) + 'px'; |
+ document.body.appendChild(this.element); |
+}; |
+ |
+Particle.prototype.generateAnimation = function(duration) { |
+ var keyframes = []; |
+ |
+ var angle = Math.PI * 2 * Perf.random(); |
+ var velocity = minVelocity + ((maxVelocity - minVelocity) * Perf.random()); |
+ var x = 0; |
+ var y = 0; |
+ var dx = Math.cos(angle) * velocity; |
+ var dy = Math.sin(angle) * velocity; |
+ |
+ var nextCollision = function(lineX, normalX, lineY, normalY) { |
+ var dtx = Infinity; |
+ var dty = Infinity; |
+ if (dx * normalX < 0) |
+ dtx = (lineX - x) / dx; |
+ if (dy * normalY < 0) |
+ dty = (lineY - y) / dy; |
+ var dt = Math.min(dtx, dty); |
+ var hitX = (dtx < dty); |
+ return { |
+ dt: dt, |
+ x: hitX ? lineX : x + (dx * dt), |
+ y: hitX ? y + (dy * dt) : lineY, |
+ dx: hitX ? -dx : dx, |
+ dy: hitX ? dy : -dy, |
+ }; |
+ }; |
+ |
+ var t = 0; |
+ keyframes.push(this.createKeyframe(0, x, y)); |
+ while (t < duration) { |
+ var collisionA = nextCollision(-stageWidth / 2, 1, -stageHeight / 2, 1); |
+ var collisionB = nextCollision(stageWidth / 2, -1, stageHeight / 2, -1); |
+ var collision = collisionA.dt < collisionB.dt ? collisionA : collisionB; |
+ if (t + collision.dt > duration) { |
+ var dt = duration - t; |
+ t = duration; |
+ x += dx * dt; |
+ y += dy * dt; |
+ } else { |
+ t += collision.dt; |
+ x = collision.x; |
+ y = collision.y; |
+ dx = collision.dx; |
+ dy = collision.dy; |
+ } |
+ keyframes.push(this.createKeyframe(t / duration, x, y)); |
+ } |
+ |
+ return new Animation(this.element, keyframes, duration); |
+}; |
+ |
+Particle.prototype.createKeyframe = function(offset, x, y) { |
+ return { |
+ composite: 'add', |
+ offset: offset, |
+ left: x + 'px', |
+ top: y + 'px', |
+ }; |
+}; |
+ |
+Particle.prototype.destroy = function() { |
+ document.body.removeChild(this.element); |
+}; |
+ |
+function cleanUp() { |
+ player.source = null; |
+ for (var i = 0; i < particles.length; i++) { |
+ particles[i].destroy(); |
+ } |
+ particles = []; |
+} |
+ |
+window.addEventListener('load', function () { |
+ var spacing = document.createElement('div'); |
+ spacing.style.display = 'inline-block'; |
+ spacing.style.width = '600px'; |
+ document.body.appendChild(spacing); |
+ |
+ var parGroup = new ParGroup([], {iterations: Infinity, direction: 'alternate'}); |
+ for (var i = 0; i < particleCount; i++) { |
+ var particle = new Particle(); |
+ parGroup.append(particle.generateAnimation(animationDuration)); |
+ particles.push(particle); |
+ } |
+ player = document.timeline.play(parGroup); |
+ |
+ Perf.oncomplete = cleanUp; |
+ Perf.start(); |
+}); |
+ |
+</script> |