src/third_party/WebKit/PerformanceTests/Animation/balls-keyframe-animations.html

   1 <!--
   2 Copyright (c) 2012 Cameron Adams. All rights reserved.
   3 Copyright (c) 2012 Code Aurora Forum. All rights reserved.
   4 Copyright (C) 2013 Google Inc. All rights reserved.
   5
   6 Redistribution and use in source and binary forms, with or without
   7 modification, are permitted provided that the following conditions are
   8 met:
   9     * Redistributions of source code must retain the above copyright
  10 notice, this list of conditions and the following disclaimer.
  11     * Redistributions in binary form must reproduce the above
  12 copyright notice, this list of conditions and the following disclaimer
  13 in the documentation and/or other materials provided with the
  14 distribution.
  15     * Neither the name of Code Aurora Forum Inc., Google Inc. nor the
  16 names of its contributors may be used to endorse or promote products
  17 derived from this software without specific prior written permission.
  18
  19 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  20 "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  21 LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  22 A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  23 OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  24 SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  25 LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  26 DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  27 THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  28 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  29 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  30
  31 This test is based on code written by Cameron Adams and imported from
  32   http://themaninblue.com/experiment/AnimationBenchmark/html
  33 -->
  34
  35 <!doctype html>
  36 <head>
  37 <title>Benchmark - Balls Animation using CSS Animations</title>
  38 <style>
  39 html {
  40     height: 100%;
  41 }
  42
  43 body {
  44     width: 100%;
  45     height: 100%;
  46     overflow: hidden;
  47     margin: 0;
  48     padding: 0;
  49 }
  50
  51 span {
  52     position: absolute;
  53     width: 12px;
  54     height: 12px;
  55     border-radius: 6px;
  56 }
  57 </style>
  58 <script src="../resources/runner.js"></script>
  59 <script src="resources/framerate.js"></script>
  60 <script>
  61 var stageWidth = 600;
  62 var stageHeight = 600;
  63 var maxParticles = 2500;
  64 var minVelocity = 50;
  65 var maxVelocity = 500;
  66 var particleRadius = 6;
  67 var colors = ["#cc0000", "#ffcc00", "#aaff00", "#0099cc", "#194c99", "#661999"];
  68 var animationDuration = 10;
  69
  70 var particles = [];
  71
  72 window.onload = function () {
  73     PerfTestRunner.prepareToMeasureValuesAsync({
  74         description: "Measure performance of CSS Animations animating 'left' and 'top'.",
  75         done: onCompletedRun,
  76         unit: 'fps'
  77     });
  78
  79     generateStyleElement();
  80
  81     // Create the particles
  82     for (var i = 0; i < maxParticles; i++) {
  83         var particle = new Particle(i);
  84         particle.start();
  85         particles.push(particle);
  86     }
  87
  88     startTrackingFrameRate();
  89 }
  90
  91 function generateStyleElement() {
  92     var allParticleKeyframes = '';
  93     for (var i = 0; i < maxParticles; i++)
  94         allParticleKeyframes += generateParticleKeyframes(i);
  95     document.querySelector('#keyframes').innerHTML = allParticleKeyframes;
  96 }
  97
  98 function generateParticleKeyframes(index) {
  99     var keyframes = '@-webkit-keyframes ' + animationNameForIndex(index) + '{\n';
 100
 101     var angle = Math.PI * 2 * PerfTestRunner.random();
 102     var velocity = minVelocity + ((maxVelocity - minVelocity) * PerfTestRunner.random());
 103     var x = stageWidth / 2 - particleRadius;
 104     var y = stageHeight / 2 - particleRadius;
 105     var dx = Math.cos(angle) * velocity;
 106     var dy = Math.sin(angle) * velocity;
 107
 108     function detectCollision(lineX, normalX, lineY, normalY) {
 109         var dtx = Infinity;
 110         var dty = Infinity;
 111         if (dx * normalX < 0)
 112             dtx = (lineX - x) / dx;
 113         if (dy * normalY < 0)
 114             dty = (lineY - y) / dy;
 115         var dt = Math.min(dtx, dty);
 116         var hitX = (dtx < dty);
 117         return {
 118             dt: dt,
 119             x: hitX ? lineX : x + (dx * dt),
 120             y: hitX ? y + (dy * dt) : lineY,
 121             dx: hitX ? -dx : dx,
 122             dy: hitX ? dy : -dy,
 123         };
 124     }
 125
 126     var t = 0;
 127     keyframes += generateKeyframe(0, x, y);
 128     while (t < animationDuration) {
 129         var collisionA = detectCollision(0, 1, 0, 1);
 130         var collisionB = detectCollision(stageWidth, -1, stageHeight, -1);
 131         var collision = collisionA.dt < collisionB.dt ? collisionA : collisionB;
 132         if (t + collision.dt > animationDuration) {
 133             var dt = animationDuration - t;
 134             t = animationDuration;
 135             x += dx * dt;
 136             y += dy * dt;
 137         } else {
 138             t += collision.dt;
 139             x = collision.x;
 140             y = collision.y;
 141             dx = collision.dx;
 142             dy = collision.dy;
 143         }
 144         keyframes += generateKeyframe(t, x, y);
 145     }
 146
 147     keyframes += '}\n';
 148     return keyframes;
 149 }
 150
 151 function generateKeyframe(t, x, y) {
 152     return (100 * t / animationDuration) + '% { left: ' + x + 'px; top: ' + y + 'px; }\n';
 153 }
 154
 155 function animationNameForIndex(index) {
 156     return 'animation-' + index;
 157 }
 158
 159 function Particle(index)
 160 {
 161     // Create visual element for the particle.
 162     var domNode = document.createElement('span');
 163     document.body.appendChild(domNode);
 164
 165     // Set colour of element.
 166     domNode.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
 167     domNode.style.webkitAnimationTimingFunction = 'linear';
 168     domNode.style.webkitAnimationIterationCount = 'infinite';
 169     domNode.style.webkitAnimationDirection = 'alternate';
 170     domNode.style.webkitAnimationDuration = animationDuration + 's';
 171
 172     function start() {
 173         domNode.style.webkitAnimationName = animationNameForIndex(index);
 174     }
 175
 176     function destroy()
 177     {
 178         document.body.removeChild(domNode);
 179     }
 180
 181     this.start = start;
 182     this.destroy = destroy;
 183 }
 184
 185 function onCompletedRun() {
 186     testRunning = false;
 187     stopTrackingFrameRate();
 188
 189     for (var i = 0; i < particles.length; i++)
 190         particles[i].destroy();
 191     particles = [];
 192 }
 193 </script>
 194 <style id="keyframes"></style>
 195 </head>
 196 </html>