Add a content-animation test with accelerated CSS animations
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 9 Sep 2016 00:51:06 +0000 (00:51 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 9 Sep 2016 00:51:06 +0000 (00:51 +0000)
https://bugs.webkit.org/show_bug.cgi?id=161776

Reviewed by Dean Jackson.

PerformanceTests:

Add a test that measures the frame rate of accelerated CSS animations.

This is like css-animation.html (which animates 'left' and 'top') but animates
transforms instead. In order to get animation in X and Y we make two nested elements
and set transformX() on one, and transformY() on the other.

* Animation/css-accelerated-animation.html: Added.

Tools:

* Scripts/webkitpy/benchmark_runner/data/patches/ContentAnimation.patch:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@205680 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/Animation/css-accelerated-animation.html [new file with mode: 0644]
PerformanceTests/ChangeLog
Tools/ChangeLog
Tools/Scripts/webkitpy/benchmark_runner/data/patches/ContentAnimation.patch

diff --git a/PerformanceTests/Animation/css-accelerated-animation.html b/PerformanceTests/Animation/css-accelerated-animation.html
new file mode 100644 (file)
index 0000000..51ab317
--- /dev/null
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1.0">
+    <style>
+        body {
+            margin: 0;
+        }
+        #stage {
+            position: relative;
+            width: 320px;
+            height: 320px;
+            border: 1px solid black;
+            overflow: hidden;
+            z-index: 0;
+        }
+        
+        .particle-h {
+            position: absolute;
+            animation: horizontal infinite 2s alternate ease-in-out;
+        }
+
+        .particle-v {
+            position: absolute;
+            height: 20px;
+            width: 20px;
+            background-color: blue;
+            border-radius: 50%;
+            animation: vertical infinite 2s alternate ease-in-out;
+        }
+        
+        @keyframes horizontal {
+            from {
+                transform: translateX(0);
+            }
+            50% {
+                transform: translateX(300px);
+            }
+            to {
+                transform: translateX(0);
+            }
+        }
+
+        @keyframes vertical {
+            from {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(300px);
+            }
+            to {
+                transform: translateY(0);
+            }
+        }
+    </style>
+    <script>
+
+        var animationDuration = 2;
+
+        function randomInt(min, max)
+        {
+            return Math.round(this.random(min, max));
+        }
+
+        function random(min, max)
+        {
+            return (Math.random() * (max - min)) + min;
+        }
+
+        function randomColor()
+        {
+            var min = 32;
+            var max = 256 - 32;
+            return "#"
+                + this.randomInt(min, max).toString(16)
+                + this.randomInt(min, max).toString(16)
+                + this.randomInt(min, max).toString(16);
+        }
+        
+        function Point(x, y)
+        {
+            this.x = x;
+            this.y = y;
+        }
+
+        Point.pointOnCircle = function(angle, radius)
+        {
+            return new Point(radius * Math.cos(angle), radius * Math.sin(angle));
+        }
+
+        Point.prototype =
+        {
+            add: function(other)
+            {
+                if(isNaN(other.x))
+                    return new Point(this.x + other, this.y + other);
+                return new Point(this.x + other.x, this.y + other.y);
+            },
+
+            subtract: function(other)
+            {
+                if(isNaN(other.x))
+                    return new Point(this.x - other, this.y - other);
+                return new Point(this.x - other.x, this.y - other.y);
+            },
+
+            move: function(angle, velocity, timeDelta)
+            {
+                return this.add(Point.pointOnCircle(angle, velocity * (timeDelta / 1000)));
+            },
+
+            multiply: function(other)
+            {
+                if(isNaN(other.x))
+                    return new Point(this.x * other, this.y * other);
+                return new Point(this.x * other.x, this.y * other.y);
+            },
+
+            length: function() {
+                return Math.sqrt( this.x * this.x + this.y * this.y );
+            },
+
+            normalize: function() {
+                var l = Math.sqrt( this.x * this.x + this.y * this.y );
+                this.x /= l;
+                this.y /= l;
+                return this;
+            }
+        }
+
+        function Particle(maxPosition)
+        {
+            this.horizontalContainer = document.createElement('div');
+            this.horizontalContainer.className = 'particle-h';
+
+            var delay = random(0, animationDuration);
+            this.horizontalContainer.style.animationDuration = random(animationDuration - slop, animationDuration + slop) + 's';
+            this.horizontalContainer.style.animationDelay = '-' + delay + 's';
+
+            this.element = document.createElement('div');
+            this.element.className = 'particle-v';
+            this.element.style.backgroundColor = randomColor();
+            
+            this.horizontalContainer.appendChild(this.element);
+
+            var slop = 0.2;
+            this.element.style.animationDuration = random(animationDuration - slop, animationDuration + slop) + 's';
+            this.element.style.animationDelay = '-' + delay + 's';
+
+            this.maxPosition = maxPosition;
+            this.reset();
+            this.move();
+        }
+
+        Particle.prototype =
+        {
+            reset: function()
+            {
+                this.size = new Point(20, 20);
+                this.maxLocation = this.maxPosition.subtract(this.size);
+                this.position = new Point(0, 0);
+            },
+
+            move: function()
+            {
+                this.horizontalContainer.style.transform = "translateX(" + this.position.x + "px)";
+                this.element.style.transform = "translateY(" + this.position.y + "px) ";
+            }
+        }
+
+        var numParticles = 20;
+        var particles = [];
+
+        function makeParticles()
+        {
+            var stage = document.getElementById('stage');
+            var maxPosition = new Point(320, 320);
+            for (var i = 0; i < numParticles; ++i) {
+                particles.push(new Particle(maxPosition));
+                stage.appendChild(particles[i].horizontalContainer);
+            }
+        }
+
+        function setupAnimation()
+        {
+            makeParticles();
+        }
+
+        window.addEventListener('load', setupAnimation, false);
+    </script>
+</head>
+<body>
+
+<div id="stage">
+</div>
+
+</body>
+</html>
index 3a6ad32..d5b70e8 100644 (file)
@@ -1,3 +1,18 @@
+2016-09-08  Simon Fraser  <simon.fraser@apple.com>
+
+        Add a content-animation test with accelerated CSS animations
+        https://bugs.webkit.org/show_bug.cgi?id=161776
+
+        Reviewed by Dean Jackson.
+
+        Add a test that measures the frame rate of accelerated CSS animations.
+
+        This is like css-animation.html (which animates 'left' and 'top') but animates
+        transforms instead. In order to get animation in X and Y we make two nested elements
+        and set transformX() on one, and transformY() on the other.
+
+        * Animation/css-accelerated-animation.html: Added.
+
 2016-08-23  Saam Barati  <sbarati@apple.com>
 
         It should be easy to run ES6SampleBench from the jsc shell
index 592afbf..52748ee 100644 (file)
@@ -1,3 +1,12 @@
+2016-09-08  Simon Fraser  <simon.fraser@apple.com>
+
+        Add a content-animation test with accelerated CSS animations
+        https://bugs.webkit.org/show_bug.cgi?id=161776
+
+        Reviewed by Dean Jackson.
+
+        * Scripts/webkitpy/benchmark_runner/data/patches/ContentAnimation.patch:
+
 2016-09-08  Alex Christensen  <achristensen@webkit.org>
 
         URLParser: Parsing empty URLs with a base URL should return the base URL
index bd44014..1b50d33 100644 (file)
@@ -1,3 +1,62 @@
+diff --git a/css-accelerated-animation.html b/css-accelerated-animation.html
+index 51ab3178addd49b3d9a19b03479d59be6aabf00b..fd637bc420c751b695afa84cc05ec9b25800f1ad 100644
+--- a/css-accelerated-animation.html
++++ b/css-accelerated-animation.html
+@@ -185,9 +185,54 @@
+         function setupAnimation()
+         {
+             makeParticles();
++
++            window.setTimeout(function() {
++                location.hash = 'done';
++            }, 10000)
++        }
++
++        function hashChanged()
++        {
++            if (location.hash === '#submit')
++                submitResults();
++        }
++
++        function submitResults()
++        {
++            var results = {
++                'content-animation' : {
++                    'metrics' : {
++                        'FrameRate' : ['Arithmetic']
++                    },
++                    'tests' : {
++                        'css-accelerated-animation' : {
++                            'metrics' : {
++                                'FrameRate' : {
++                                    'current' : ['<native_framerate>'] // <native_framerate> is replaced by a framerate computed in native code
++                                }
++                            }
++                        }
++                    }
++                }
++            };
++            var resultsString = JSON.stringify(results);
++            var xhr = new XMLHttpRequest();
++            xhr.open("POST", "/report");
++            xhr.setRequestHeader("Content-type", "application/json");
++            xhr.setRequestHeader("Content-length", resultsString.length);
++            xhr.setRequestHeader("Connection", "close");
++            xhr.onreadystatechange = function() {
++                if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
++                    closeRequest = new XMLHttpRequest();
++                    closeRequest.open("GET", "/shutdown");
++                    closeRequest.send()
++                }
++            }
++            xhr.send(resultsString);
+         }
+         window.addEventListener('load', setupAnimation, false);
++        window.addEventListener("hashchange", hashChanged, false);
+     </script>
+ </head>
+ <body>
 diff --git a/css-animation.html b/css-animation.html
 index adae19cb018ed1ca93fd6b4cda80002348482fc3..8f1e29933faa13586dbf97b7874024854fbf2147 100644
 --- a/css-animation.html