Update benchmark tests
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Mar 2016 00:30:44 +0000 (00:30 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Mar 2016 00:30:44 +0000 (00:30 +0000)
https://bugs.webkit.org/show_bug.cgi?id=155723

Reviewed by Darin Adler.
Provisionally reviewed by Said Abou-Hallawa.

Add quadratic and bezier segments to the canvas path test.

* Animometer/resources/runner/tests.js: Some of the query strings are unnecessary.
Rename the test.
* Animometer/tests/master/resources/canvas-stage.js:
(tune): Update to be able to take an array of possible constructors. Choose one randomly.
* Animometer/tests/master/resources/canvas-tests.js:
(CanvasLinePoint.Utilities.createClass): Move the point selection out to a separate
function called randomPoint() for reuse. Move X_LOOPS, Y_LOOPS, and offsets into the
class definition.
(randomPoint): Scale the grid down a little bit so that the lines along the edge of the
canvas are not cut off when the stroke size is thick.
(CanvasQuadraticSegment): Added.
(CanvasBezierSegment): Added.
(SimpleCanvasStage): Pass in an array of the different segment types. Since line segments
are short compared to the curved ones, make it twice as likely to render a line segment.
(SimpleCanvasStage.animate): Update the drawing code so that we render all line segments.

Add a helper method that selects a random element from an array.

* Animometer/tests/resources/main.js:
(Stage.randomElementInArray): Select a random element from the provided array.

* Animometer/tests/bouncing-particles/resources/bouncing-tagged-images.js: Refactor.
* Animometer/tests/dom/resources/leaves.js: Ditto.
* Animometer/tests/master/resources/dom-particles.js: Ditto.
* Animometer/tests/master/resources/image-data.js: Ditto.
* Animometer/tests/master/resources/leaves.js: Ditto.
* Animometer/tests/simple/resources/simple-canvas-paths.js: Ditto.

Add canvas tests that includes all stroke and fill paths. This makes it possible to avoid having to
include the full simple canvas suite for perf testing.

* Animometer/resources/debug-runner/tests.js: Add new tests. Move the canvas test into the Canvas
suite.
* Animometer/tests/simple/resources/simple-canvas-paths.js: Add a CanvasStroke and CanvasFill particle
that random selects an object to render.

* Animometer/resources/debug-runner/tests.js: Move 3D suite before basic canvas suite.
When updating the perf bot script, we will include the suites up to this one, but exclude
the basic canvas suite.

Move compositing transforms test to HTML suite and remove the empty Miscellaneous suite.

* Animometer/resources/debug-runner/tests.js:
* Animometer/tests/dom/compositing-transforms.html: Renamed from PerformanceTests/Animometer/tests/misc/compositing-transforms.html.
* Animometer/tests/dom/resources/compositing-transforms.js: Renamed from PerformanceTests/Animometer/tests/misc/resources/compositing-transforms.js.

Clean up miscellaneous test suite. Add a canvas ellipse test, and remove the other
canvas tests.

* Animometer/resources/debug-runner/tests.js: Add ellipse tests to the simple suite.
* Animometer/tests/misc/canvas-electrons.html: Removed.
* Animometer/tests/misc/canvas-stars.html: Removed.
* Animometer/tests/misc/resources/canvas-electrons.js: Removed.
* Animometer/tests/misc/resources/canvas-stars.js: Removed.
* Animometer/tests/simple/resources/simple-canvas-paths.js: Add ellipse primitives.

Merge text tests together into one.

* Animometer/resources/runner/tests.js: Remove international.html.
* Animometer/tests/master/international.html: Removed.
* Animometer/tests/master/resources/text.js:
(animate): Update styling. Manually calculate gradients for the shadow particles.
Reduce the step size for y direction to avoid cutting text off at the margins. Increase
step for x since there will be a little more room.
* Animometer/tests/master/text.html: Add more translations and lay it out in a table.

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

21 files changed:
PerformanceTests/Animometer/resources/debug-runner/tests.js
PerformanceTests/Animometer/resources/runner/tests.js
PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-tagged-images.js
PerformanceTests/Animometer/tests/dom/compositing-transforms.html [moved from PerformanceTests/Animometer/tests/misc/compositing-transforms.html with 100% similarity]
PerformanceTests/Animometer/tests/dom/resources/compositing-transforms.js [moved from PerformanceTests/Animometer/tests/misc/resources/compositing-transforms.js with 100% similarity]
PerformanceTests/Animometer/tests/dom/resources/leaves.js
PerformanceTests/Animometer/tests/master/international.html [deleted file]
PerformanceTests/Animometer/tests/master/resources/canvas-stage.js
PerformanceTests/Animometer/tests/master/resources/canvas-tests.js
PerformanceTests/Animometer/tests/master/resources/dom-particles.js
PerformanceTests/Animometer/tests/master/resources/image-data.js
PerformanceTests/Animometer/tests/master/resources/leaves.js
PerformanceTests/Animometer/tests/master/resources/text.js
PerformanceTests/Animometer/tests/master/text.html
PerformanceTests/Animometer/tests/misc/canvas-electrons.html [deleted file]
PerformanceTests/Animometer/tests/misc/canvas-stars.html [deleted file]
PerformanceTests/Animometer/tests/misc/resources/canvas-electrons.js [deleted file]
PerformanceTests/Animometer/tests/misc/resources/canvas-stars.js [deleted file]
PerformanceTests/Animometer/tests/resources/main.js
PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js
PerformanceTests/ChangeLog

index b019cab8aad8e7e2a5a3426f72b6cccec19175de..c3bfbc77b0b5b9cefba26869c4efe3007b4ef149 100644 (file)
@@ -168,16 +168,16 @@ Suites.push(new Suite("HTML suite",
         {
             url: "dom/leaves.html",
             name: "Leaves 2.0"
+        },
+        {
+            url: "dom/compositing-transforms.html?particleWidth=50&particleHeight=50&filters=yes&imageSrc=../resources/yin-yang.svg",
+            name: "Composited Transforms"
         }
     ]
 ));
 
 Suites.push(new Suite("Canvas suite",
     [
-        {
-            url: "bouncing-particles/bouncing-canvas-shapes.html?particleWidth=12&particleHeight=12&shape=circle",
-            name: "canvas bouncing circles"
-        },
         {
             url: "bouncing-particles/bouncing-canvas-shapes.html?particleWidth=40&particleHeight=40&shape=rect&clip=star",
             name: "canvas bouncing clipped rects"
@@ -194,6 +194,18 @@ Suites.push(new Suite("Canvas suite",
             url: "bouncing-particles/bouncing-canvas-images.html?particleWidth=80&particleHeight=80&imageSrc=../resources/yin-yang.png",
             name: "canvas bouncing PNG images"
         },
+        {
+            url: "simple/simple-canvas-paths.html?pathType=strokes",
+            name: "Stroke shapes"
+        },
+        {
+            url: "simple/simple-canvas-paths.html?pathType=fills",
+            name: "Fill shapes"
+        },
+        {
+            url: "simple/tiled-canvas-image.html",
+            name: "Canvas put/get image data"
+        },
     ]
 ));
 
@@ -222,6 +234,15 @@ Suites.push(new Suite("SVG suite",
     ]
 ));
 
+Suites.push(new Suite("3D Graphics",
+    [
+        {
+            url: "3d/webgl.html",
+            name: "WebGL"
+        },
+    ]
+));
+
 Suites.push(new Suite("Basic canvas path suite",
     [
         {
@@ -280,6 +301,10 @@ Suites.push(new Suite("Basic canvas path suite",
             url: "simple/simple-canvas-paths.html?pathType=rect",
             name: "Canvas rects"
         },
+        {
+            url: "simple/simple-canvas-paths.html?pathType=ellipse",
+            name: "Canvas ellipses"
+        },
         {
             url: "simple/simple-canvas-paths.html?pathType=lineFill",
             name: "Canvas line path, fill"
@@ -305,34 +330,8 @@ Suites.push(new Suite("Basic canvas path suite",
             name: "Canvas rects, fill"
         },
         {
-            url: "simple/tiled-canvas-image.html",
-            name: "Canvas put/get image data"
-        },
-    ]
-));
-
-Suites.push(new Suite("3D Graphics",
-    [
-        {
-            url: "3d/webgl.html",
-            name: "WebGL"
-        },
-    ]
-));
-
-Suites.push(new Suite("Miscellaneous Tests",
-    [
-        {
-            url: "misc/compositing-transforms.html?particleWidth=50&particleHeight=50&filters=yes&imageSrc=../resources/yin-yang.svg",
-            name: "Composited Transforms"
-        },
-        {
-            url: "misc/canvas-electrons.html",
-            name: "Canvas electrons"
-        },
-        {
-            url: "misc/canvas-stars.html",
-            name: "Canvas stars"
-        },
+            url: "simple/simple-canvas-paths.html?pathType=ellipseFill",
+            name: "Canvas ellipses, fill"
+        }
     ]
 ));
index 0881e32a6f5f7f45bec0105d0119f545c6cf7879..b2352491888b699c3aca9b9c1b837d6a6ef9ecd3 100644 (file)
@@ -25,17 +25,13 @@ Suites.push(new Suite("Animometer",
             name: "Leaves"
         },
         {
-            url: "master/canvas-stage.html?pathType=linePath&lineJoin=round&lineCap=round",
-            name: "Canvas line path, round join"
+            url: "master/canvas-stage.html?pathType=linePath",
+            name: "Paths"
         },
         {
             url: "master/canvas-stage.html?pathType=line&lineCap=square",
             name: "Canvas line segments"
         },
-        {
-            url: "master/text.html",
-            name: "A to Z"
-        },
         {
             url: "master/focus.html",
             name: "Focus"
@@ -45,7 +41,7 @@ Suites.push(new Suite("Animometer",
             name: "Images"
         },
         {
-            url: "master/international.html",
+            url: "master/text.html",
             name: "Design"
         },
         {
index ad33e2dede879f94236ce7f9c7f74ae3a723ef94..1ef6a091d2131fd3655a13dd8cc1b6317db1c6c6 100644 (file)
@@ -8,7 +8,7 @@ BouncingTaggedImage = Utilities.createSubclass(BouncingParticle,
         this.element = document.createElement("img");
         this.element.style.width = this.size.x + "px";
         this.element.style.height = this.size.y + "px";
-        this.element.setAttribute("src", stage.images[Stage.randomInt(0, stage.images.length - 1)].src);
+        this.element.setAttribute("src", Stage.randomElementInArray(stage.images).src);
 
         stage.element.appendChild(this.element);
         this._move();
index 7b0778e8703b021385d7d7bb9a4aa0c35af52be1..9cef548125c7c1c1f6ffb9773d256e6ddcbf8b16 100644 (file)
@@ -2,7 +2,7 @@ Leaf = Utilities.createSubclass(Particle,
     function(stage)
     {
         this.element = document.createElement("img");
-        this.element.setAttribute("src", stage.images[Stage.randomInt(0, stage.images.length - 1)].src);
+        this.element.setAttribute("src", Stage.randomElementInArray(stage.images).src);
         stage.element.appendChild(this.element);
 
         Particle.call(this, stage);
diff --git a/PerformanceTests/Animometer/tests/master/international.html b/PerformanceTests/Animometer/tests/master/international.html
deleted file mode 100644 (file)
index c15da93..0000000
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="resources/stage.css">
-    <style type="text/css">
-
-        #stage {
-            font-family: Helvetica;
-            font-size: 48px;
-        }
-        #stage div {
-            width: 60%;
-            position: absolute;
-            text-align: center;
-        }
-        #template {
-            color: #111;
-        }
-    </style>
-</head>
-<body>
-    <div id="stage">
-        <div id="template">
-            <p>设计</p>
-            <p class="rtl">تصميم</p>
-            <p>дизайн</p>
-            <p>デザイン</p>
-            <p class="rtl">עיצוב</p>
-            <p>디자인</p>
-        </div>
-    </div>
-    <script src="../../resources/strings.js"></script>
-    <script src="../../resources/extensions.js"></script>
-    <script src="../../resources/statistics.js"></script>
-    <script src="../resources/math.js"></script>
-    <script src="../resources/main.js"></script>
-    <script src="resources/text.js"></script>
-</body>
-</html>
index 2ad63a3ee3748dc5482dda0e861eb50dd0c2bc3a..22002eccd61fd5db19604152241612998199b7ae 100644 (file)
@@ -27,8 +27,12 @@ SimpleCanvasStage = Utilities.createSubclass(Stage,
         if (newIndex < 0) {
             this.offsetIndex = 0;
             newIndex = -newIndex;
-            for (var i = 0; i < newIndex; ++i)
-                this.objects.push(new this._canvasObject(this));
+            for (var i = 0; i < newIndex; ++i) {
+                if (this._canvasObject.constructor === Array)
+                    this.objects.push(new (Stage.randomElementInArray(this._canvasObject))(this));
+                else
+                    this.objects.push(new this._canvasObject(this));
+            }
         } else
             this.offsetIndex = newIndex;
     },
index f9a0c66a1ac01971d8ea14b500a7b1abf6f3d027..79fc867082965c189821c1c50a69edd253995637 100644 (file)
@@ -81,43 +81,95 @@ CanvasArc = Utilities.createClass(
 // CanvasLinePoint contains no draw() method since it is either moveTo or
 // lineTo depending on its index.
 CanvasLinePoint = Utilities.createClass(
-    function(stage, coordinateMaximum)
+    function(stage)
     {
-        var X_LOOPS = 40;
-        var Y_LOOPS = 20;
+        var colors = ["#101010", "#808080", "#c0c0c0", "#101010", "#808080", "#c0c0c0", "#e01040"];
+        this.color = Stage.randomElementInArray(colors);
+        this.width = Math.pow(Pseudo.random(), 5) * 20 + 1;
+        this.isSplit = Pseudo.random() > 0.95;
 
-        var offsets = [[-2, -1], [2, 1], [-1, 0], [1, 0], [-1, 2], [1, -2]];
-        var offset = offsets[Math.floor(Pseudo.random() * offsets.length)];
+        var nextPoint;
+        if (stage.objects.length)
+            nextPoint = this.randomPoint(stage, stage.objects[stage.objects.length - 1].coordinate);
+        else
+            nextPoint = this.randomPoint(stage, this.gridSize.center);
+        this.point = nextPoint.point;
+        this.coordinate = nextPoint.coordinate;
+    }, {
 
-        this.coordinate = new Point(X_LOOPS/2, Y_LOOPS/2);
+    gridSize: new Point(80, 40),
+    offsets: [
+        new Point(-4, 0),
+        new Point(2, 0),
+        new Point(1, -2),
+        new Point(1, 2),
+    ],
+
+    randomPoint: function(stage, startCoordinate)
+    {
+        var coordinate = startCoordinate;
         if (stage.objects.length) {
-            var head = stage.objects[stage.objects.length - 1].coordinate;
-            this.coordinate.x = head.x;
-            this.coordinate.y = head.y;
+            var offset = Stage.randomElementInArray(this.offsets);
+
+            coordinate = coordinate.add(offset);
+            if (coordinate.x < 0 || coordinate.x > this.gridSize.width)
+                coordinate.x -= offset.x * 2;
+            if (coordinate.y < 0 || coordinate.y > this.gridSize.height)
+                coordinate.y -= offset.y * 2;
         }
 
-        var nextCoordinate = this.coordinate.x + offset[0];
-        if (nextCoordinate < 0 || nextCoordinate > X_LOOPS)
-            this.coordinate.x -= offset[0];
-        else
-            this.coordinate.x = nextCoordinate;
-        nextCoordinate = this.coordinate.y + offset[1];
-        if (nextCoordinate < 0 || nextCoordinate > Y_LOOPS)
-            this.coordinate.y -= offset[1];
-        else
-            this.coordinate.y = nextCoordinate;
+        var x = (coordinate.x + .5) * stage.size.x / (this.gridSize.width + 1);
+        var y = (coordinate.y + .5) * stage.size.y / (this.gridSize.height + 1);
+        return {
+            point: new Point(x, y),
+            coordinate: coordinate
+        };
+    },
 
-        var xOff = .25 * (this.coordinate.y % 2);
-        var randX = (xOff + this.coordinate.x) * stage.size.x / X_LOOPS;
-        var randY = this.coordinate.y * stage.size.y / Y_LOOPS;
-        var colors = ["#101010", "#808080", "#c0c0c0", "#101010", "#808080", "#c0c0c0", "#e01040"];
-        this.color = colors[Math.floor(Pseudo.random() * colors.length)];
+    draw: function(context)
+    {
+        context.lineTo(this.point.x, this.point.y);
+    }
+});
 
-        this.width = Math.pow(Pseudo.random(), 5) * 20 + 1;
-        this.isSplit = Pseudo.random() > 0.9;
-        this.point = new Point(randX, randY);
+CanvasQuadraticSegment = Utilities.createSubclass(CanvasLinePoint,
+    function(stage)
+    {
+        CanvasLinePoint.call(this, stage);
+        // The chosen point is instead the control point.
+        this._point2 = this.point;
+
+        // Get another random point for the actual end point of the segment.
+        var nextPoint = this.randomPoint(stage, this.coordinate);
+        this.point = nextPoint.point;
+        this.coordinate = nextPoint.coordinate;
+    }, {
+
+    draw: function(context)
+    {
+        context.quadraticCurveTo(this._point2.x, this._point2.y, this.point.x, this.point.y);
     }
-);
+});
+
+CanvasBezierSegment = Utilities.createSubclass(CanvasLinePoint,
+    function(stage)
+    {
+        CanvasLinePoint.call(this, stage);
+        // The chosen point is instead the first control point.
+        this._point2 = this.point;
+        var nextPoint = this.randomPoint(stage, this.coordinate);
+        this._point3 = nextPoint.point;
+
+        nextPoint = this.randomPoint(stage, nextPoint.coordinate);
+        this.point = nextPoint.point;
+        this.coordinate = nextPoint.coordinate;
+    }, {
+
+    draw: function(context, off)
+    {
+        context.bezierCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this.point.x, this.point.y);
+    }
+});
 
 // === STAGES ===
 
@@ -190,7 +242,7 @@ CanvasLineSegmentStage = Utilities.createSubclass(SimpleCanvasStage,
 CanvasLinePathStage = Utilities.createSubclass(SimpleCanvasStage,
     function()
     {
-        SimpleCanvasStage.call(this, CanvasLinePoint);
+        SimpleCanvasStage.call(this, [CanvasLinePoint, CanvasLinePoint, CanvasQuadraticSegment, CanvasBezierSegment]);
     }, {
 
     initialize: function(benchmark, options)
@@ -210,19 +262,21 @@ CanvasLinePathStage = Utilities.createSubclass(SimpleCanvasStage,
             if (i == this.offsetIndex) {
                 context.lineWidth = object.width;
                 context.strokeStyle = object.color;
+                context.beginPath();
                 context.moveTo(object.point.x, object.point.y);
             } else {
+                object.draw(context);
+
                 if (object.isSplit) {
                     context.stroke();
 
                     context.lineWidth = object.width;
                     context.strokeStyle = object.color;
                     context.beginPath();
+                    context.moveTo(object.point.x, object.point.y);
                 }
 
-                context.lineTo(object.point.x, object.point.y);
-
-                if (Pseudo.random() > 0.999)
+                if (Pseudo.random() > 0.995)
                     object.isSplit = !object.isSplit;
             }
         }
index e5f613affbba91eb65c0d6986f4f149e2fcf216a..c6512bd9675701f0464527a294f214464253a132 100644 (file)
@@ -13,7 +13,7 @@ DOMParticle = Utilities.createSubclass(Particle,
     {
         Particle.prototype.reset.call(this);
 
-        var emitLocation = this.stage.emitLocation[Stage.randomInt(0, this.stage.emitLocation.length - 1)];
+        var emitLocation = Stage.randomElementInArray(this.stage.emitLocation);
         this.position = new Point(emitLocation.x, emitLocation.y);
 
         var angle = Stage.randomInt(0, this.stage.emitSteps) / this.stage.emitSteps * Math.PI * 2 + Stage.dateCounterValue(100) * this.stage.emissionSpin;
index 07d3dd885d019c2e6613a4447c4ffc4c33fd7a62..7a028f28ac193aeaafd10cc8147c0e105d1e4c5a 100644 (file)
@@ -146,7 +146,7 @@ var ImageDataStage = Utilities.createSubclass(Stage,
                 context.putImageData(imageData, 0, 0);
             else {
                 this._refreshElement(element);
-                element.getContext("2d").drawImage(this.images[Stage.randomInt(0, this.images.length - 1)], 0, 0, this.imageWidth, this.imageHeight);
+                element.getContext("2d").drawImage(Stage.randomElementInArray(this.images), 0, 0, this.imageWidth, this.imageHeight);
             }
         }
     },
index 9101b75a272fd7f0d48f1214afff0632613f8ea4..50bd2fd07d9cd832406567c1e81acca6277f47d2 100644 (file)
@@ -2,7 +2,7 @@ Leaf = Utilities.createSubclass(Particle,
     function(stage)
     {
         this.element = document.createElement("img");
-        this.element.setAttribute("src", stage.images[Stage.randomInt(0, stage.images.length - 1)].src);
+        this.element.setAttribute("src", Stage.randomElementInArray(stage.images).src);
         var sizeString = this.sizeMinimum + "px";
         this.element.style.width = sizeString;
         this.element.style.height = sizeString;
index d70b7aa39b3bcccafbcb1d81da1e8949ce7a9f5b..f5950b224e4f60ca75825d1d58c62a22b3ccb93a 100644 (file)
@@ -10,12 +10,20 @@ var TextStage = Utilities.createSubclass(Stage,
     }, {
 
     shadowFalloff: new UnitBezier(new Point(0.015, 0.750), new Point(0.755, 0.235)),
-    shimmerAverage: 0.4,
+    shimmerAverage: 0,
     shimmerMax: 0.5,
     millisecondsPerRotation: 1000 / (.26 * Math.PI * 2),
-    particleDistance: 1,
+    particleDistanceX: 1.5,
+    particleDistanceY: .5,
     lightnessMin: 13,
     lightnessMax: 94,
+    gradients: [
+        [10, 176, 176, 209, 148, 140],
+        [171, 120, 154, 245, 196, 154],
+        [224, 99, 99, 71, 134, 148],
+        [101, 100, 117, 80, 230, 175],
+        [232, 165, 30, 69, 186, 172]
+    ],
 
     initialize: function(benchmark)
     {
@@ -66,21 +74,24 @@ var TextStage = Utilities.createSubclass(Stage,
         var x = 0;
         var y = 0;
         var progress = 0;
-        var stepX = Math.sin(angle) * this.particleDistance;
-        var stepY = Math.cos(angle) * this.particleDistance;
+        var stepX = Math.sin(angle) * this.particleDistanceX;
+        var stepY = Math.cos(angle) * this.particleDistanceY;
+        var gradient = this.gradients[Math.floor(angle/(Math.PI * 2)) % this.gradients.length];
+        var offset = Stage.dateCounterValue(200);
         for (var i = 0; i < this._offsetIndex; ++i) {
-            x += stepX;
-            y += stepY;
-
             var element = this.testElements[i];
 
             var colorProgress = this.shadowFalloff.solve(progress);
-            var shimmer = Math.sin(Stage.dateCounterValue(100) - colorProgress);
-            colorProgress += Utilities.lerp(shimmer, this.shimmerAverage, this.shimmerMax);
-            var interpolatedLightness = Math.round(Utilities.lerp(Math.max(Math.min(colorProgress, 1), 0), this.lightnessMin, this.lightnessMax));
+            var shimmer = Math.sin(offset - colorProgress);
+            colorProgress = Math.max(Math.min(colorProgress + Utilities.lerp(shimmer, this.shimmerAverage, this.shimmerMax), 1), 0);
+            var r = Math.round(Utilities.lerp(colorProgress, gradient[0], gradient[3]));
+            var g = Math.round(Utilities.lerp(colorProgress, gradient[1], gradient[4]));
+            var b = Math.round(Utilities.lerp(colorProgress, gradient[2], gradient[5]));
+            element.style.color = "rgb(" + r + "," + g + "," + b + ")";
 
-            element.style.color = "hsl(0,0%," + interpolatedLightness + "%)";
-            element.style.transform = "translateX(" + Math.floor(y) + "px) translateY(" + Math.floor(x) + "px)";
+            x += stepX;
+            y += stepY;
+            element.style.transform = "translateX(" + Math.floor(x) + "px) translateY(" + Math.floor(y) + "px)";
 
             progress += this._stepProgress;
         }
index bc32834d28460844ed234b9176f77adba9ebc6f0..02b516a4f36a8ac0342e0ff5269ff72bdc8e6f6d 100644 (file)
@@ -8,20 +8,57 @@
         #stage {
             font-family: Helvetica;
             font-size: 48px;
+            background-color: #313534;/* #d1948c;*/
         }
         #stage div {
-            width: 21em;
+            width: 80%;
+            height: 90%;
             position: absolute;
+            text-align: center;
         }
         #template {
-            color: #111;
+            color: #FCFCFC;
+        }
+        table {
+            position: relative;
+            width: 100%;
+            height: 100%;
+        }
+        td {
+            width: 33%;
+        }
+        tr {
+            height: 20%;
         }
     </style>
 </head>
 <body>
     <div id="stage">
         <div id="template">
-            Whenever the black fox jumped the squirrel gazed suspiciously. Amazingly few discotheques provide jukeboxes.
+            <table>
+                <tbody>
+                    <tr>
+                        <td>σχέδιο</td>
+                        <td>设计</td>
+                        <td>suunnittelu</td>
+                    </tr>
+                    <tr>
+                        <td>design</td>
+                        <td>дизайн</td>
+                        <td class="rtl">تصميم</td>
+                    </tr>
+                    <tr>
+                        <td>디자인</td>
+                        <td>conception</td>
+                        <td>デザイン</td>
+                    </tr>
+                    <tr>
+                        <td>konstruktion</td>
+                        <td class="rtl">עיצוב</td>
+                        <td>diseño</td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
     <script src="../../resources/strings.js"></script>
diff --git a/PerformanceTests/Animometer/tests/misc/canvas-electrons.html b/PerformanceTests/Animometer/tests/misc/canvas-electrons.html
deleted file mode 100644 (file)
index bf933bd..0000000
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="../resources/stage.css">
-</head>
-<body>
-    <canvas id="stage"></canvas>
-    <script src="../../resources/strings.js"></script>
-    <script src="../../resources/extensions.js"></script>
-    <script src="../../resources/statistics.js"></script>
-    <script src="../resources/math.js"></script>
-    <script src="../resources/main.js"></script>
-    <script src="resources/canvas-electrons.js"></script>
-</body>
-</html>
diff --git a/PerformanceTests/Animometer/tests/misc/canvas-stars.html b/PerformanceTests/Animometer/tests/misc/canvas-stars.html
deleted file mode 100644 (file)
index da5b0b2..0000000
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="../resources/stage.css">
-    <script src="../../resources/strings.js"></script>
-    <script src="../../resources/extensions.js"></script>
-    <script src="../../resources/statistics.js"></script>
-    <script src="../resources/math.js"></script>
-    <script src="../resources/main.js"></script>
-    <script src="resources/canvas-stars.js"></script>
-</head>
-<body>
-    <canvas id="stage"></canvas>
-</body>
-</html>
diff --git a/PerformanceTests/Animometer/tests/misc/resources/canvas-electrons.js b/PerformanceTests/Animometer/tests/misc/resources/canvas-electrons.js
deleted file mode 100644 (file)
index 6dc6e21..0000000
+++ /dev/null
@@ -1,115 +0,0 @@
-(function() {
-
-function CanvasElectron(stage)
-{
-    this._context = stage.context;
-    this._stageSize = stage.size;
-
-    var minSide = Math.min(this._stageSize.width, this._stageSize.height);
-    var radiusX = Stage.random(minSide / 8, 7 * minSide / 16);
-    var radiusY = Stage.random(minSide / 8, 3 * radiusX / 4);
-    this._orbitRadiuses = new Point(radiusX, radiusY);
-    this._radius = Stage.random(5, 15);
-    this._direction = Stage.randomInt(0, 2);
-    this._angle = Stage.randomInt(0, 360);
-    this._color = Stage.randomColor();
-    this._rotater = Stage.randomRotater();
-    this._rotater.next(Stage.random(0, this._rotater.interval));
-}
-
-CanvasElectron.prototype = {
-    _draw: function()
-    {
-        // Calculate the position of the object on the ellipse.
-        var angle = this._direction ? this._rotater.degree() : 360 - this._rotater.degree();
-        var position = this._stageSize.center.subtract(Point.pointOnEllipse(angle, this._orbitRadiuses));
-
-        this._context.save();
-            this._context.translate(this._stageSize.center.x, this._stageSize.center.y);
-            this._context.rotate(this._angle * Math.PI / 180);
-            this._context.translate(-this._stageSize.center.x, -this._stageSize.center.y);
-
-            // Set the stroke and the fill colors
-            this._context.strokeStyle = "rgba(192, 192, 192, 0.9)";
-            this._context.fillStyle = this._color;
-
-            // Draw the orbit of the object.
-            if (this._context.ellipse) {
-                this._context.beginPath();
-                this._context.ellipse(this._stageSize.center.x, this._stageSize.center.y, this._orbitRadiuses.x, this._orbitRadiuses.y, 0, 0, 2 * Math.PI);
-                this._context.stroke();
-            }
-
-            // Draw the object.
-            this._context.beginPath();
-            this._context.arc(position.x, position.y, this._radius, 0, Math.PI * 2, true);
-            this._context.fill();
-        this._context.restore();
-    },
-
-    animate: function(timeDelta)
-    {
-        this._rotater.next(timeDelta / 100);
-        this._draw();
-    }
-};
-
-CanvasElectronsStage = Utilities.createSubclass(Stage,
-    function()
-    {
-        Stage.call(this);
-        this._electrons = [];
-    }, {
-
-    initialize: function(benchmark, options)
-    {
-        Stage.prototype.initialize.call(this, benchmark, options);
-        this.context = this.element.getContext("2d");
-    },
-
-    tune: function(count)
-    {
-        if (count == 0)
-            return;
-
-        if (count > 0) {
-            for (var i = 0; i < count; ++i)
-                this._electrons.push(new CanvasElectron(this));
-            return;
-        }
-
-        count = Math.min(-count, this._electrons.length);
-        this._electrons.splice(-count, count);
-    },
-
-    animate: function(timeDelta)
-    {
-        this.context.clearRect(0, 0, this.size.x, this.size.y);
-
-        // Draw a big star in the middle.
-        this.context.fillStyle = "orange";
-        this.context.beginPath();
-        this.context.arc(this.size.center.x, this.size.center.y, 50, 0, Math.PI * 2, true);
-        this.context.fill();
-
-        this._electrons.forEach(function(electron) {
-            electron.animate(timeDelta);
-        });
-    },
-
-    complexity: function()
-    {
-        return this._electrons.length;
-    }
-});
-
-CanvasElectronsBenchmark = Utilities.createSubclass(Benchmark,
-    function(options)
-    {
-        Benchmark.call(this, new CanvasElectronsStage(), options);
-    }
-);
-
-window.benchmarkClass = CanvasElectronsBenchmark;
-
-})();
\ No newline at end of file
diff --git a/PerformanceTests/Animometer/tests/misc/resources/canvas-stars.js b/PerformanceTests/Animometer/tests/misc/resources/canvas-stars.js
deleted file mode 100644 (file)
index 27c9cc9..0000000
+++ /dev/null
@@ -1,109 +0,0 @@
-(function() {
-
-function CanvasStar(stage)
-{
-    this._context = stage.context;
-
-    this._size = Stage.randomSquareSize(5, 20);
-    this._center = Stage.randomPosition(stage.size.subtract(this._size)).add(this._size.center);
-    this._rotateX = 0;
-    this._rotateDeltaX = Stage.random(0.3, 0.7);
-}
-
-CanvasStar.prototype = {
-    _draw: function()
-    {
-        this._context.save();
-        this._context.translate(this._center.x, this._center.y);
-
-        this._context.fillStyle = 'yellow';
-        this._context.strokeStyle = 'white';
-
-        this._context.lineWidth = 1;
-
-        this._context.beginPath();
-        this._context.moveTo(                                     0, -this._size.y /  2);
-        this._context.lineTo(+this._size.x / 20 - this._rotateX / 5, -this._size.y / 10);
-        this._context.lineTo(+this._size.x / 4  - this._rotateX,                      0);
-        this._context.lineTo(+this._size.x / 20 - this._rotateX / 5, +this._size.y / 10);
-        this._context.lineTo(                                     0, +this._size.y /  2);
-        this._context.lineTo(-this._size.x / 20 + this._rotateX / 5, +this._size.y / 10);
-        this._context.lineTo(-this._size.x /  4 + this._rotateX,                      0);
-        this._context.lineTo(-this._size.x / 20 + this._rotateX / 5, -this._size.y / 10);
-        this._context.lineTo(                                     0, -this._size.y /  2);
-
-        this._context.fill();
-        this._context.stroke();
-        this._context.closePath();
-        this._context.restore();
-    },
-
-    animate: function(timeDelta)
-    {
-        this._rotateX += this._rotateDeltaX;
-
-        if (this._rotateX > this._size.x / 4 || this._rotateX < -this._size.x / 4) {
-            this._rotateDeltaX = -this._rotateDeltaX;
-            this._rotateX += this._rotateDeltaX;
-        }
-
-        this._draw();
-    }
-};
-
-CanvasStarsStage = Utilities.createSubclass(Stage,
-    function()
-    {
-        Stage.call(this);
-        this._objects = [];
-    }, {
-
-    initialize: function(benchmark, options)
-    {
-        Stage.prototype.initialize.call(this, benchmark, options);
-        this.context = this.element.getContext("2d");
-    },
-
-    tune: function(count)
-    {
-        if (count == 0)
-            return;
-
-        if (count > 0) {
-            for (var i = 0; i < count; ++i)
-                this._objects.push(new CanvasStar(this));
-            return;
-        }
-
-        count = Math.min(-count, this._objects.length);
-        this._objects.splice(-count, count);
-    },
-
-    animate: function(timeDelta)
-    {
-        this.context.beginPath();
-        this.context.fillStyle = 'black';
-        this.context.rect(0, 0, this.size.width, this.size.height);
-        this.context.fill();
-
-        this._objects.forEach(function(object) {
-            object.animate(timeDelta);
-        });
-    },
-
-    complexity: function()
-    {
-        return this._objects.length;
-    }
-});
-
-CanvasStarsBenchmark = Utilities.createSubclass(Benchmark,
-    function(options)
-    {
-        Benchmark.call(this, new CanvasStarsStage(), options);
-    }
-);
-
-window.benchmarkClass = CanvasStarsBenchmark;
-
-})();
\ No newline at end of file
index d4ddf4b546d521bba9fdf61ec624620940873cf7..0450d27b40941a230360ed64947633cf32a82a08 100644 (file)
@@ -720,6 +720,11 @@ Utilities.extendObject(Stage, {
         return filterList[this.randomInt(0, filterList.length)];
     },
 
+    randomElementInArray: function(array)
+    {
+        return array[Stage.randomInt(0, array.length - 1)];
+    },
+
     rotatingColor: function(cycleLengthMs, saturation, lightness)
     {
         return "hsl("
index 718f8bcdaec5f769a33e27f08a51c3f0e0c16e34..cda985b2215fab6b0d5a9ca8a6da68d34813496b 100644 (file)
@@ -209,6 +209,78 @@ CanvasRectFill = Utilities.createClass(
     }
 });
 
+CanvasEllipse = Utilities.createClass(
+    function(stage) {
+        this._radius = new Point(Stage.randomInt(20, 200), Stage.randomInt(20, 200));
+        var toCenter = Stage.randomPosition(stage.size).subtract(this._radius.multiply(.5));
+
+        this._center = Stage.randomPosition(this._radius).add(toCenter);
+        this._rotation = Stage.randomAngle();
+        this._startAngle = Stage.randomAngle();
+        this._endAngle = Stage.randomAngle();
+        this._anticlockwise = Stage.randomBool();
+        this._color = Stage.randomColor();
+        this._lineWidth = Stage.randomInt(1, 20);
+    }, {
+
+    draw: function(context) {
+        context.strokeStyle = this._color;
+        context.lineWidth = this._lineWidth;
+        context.beginPath();
+        context.ellipse(this._center.x, this._center.y, this._radius.width, this._radius.height, this._rotation, this._startAngle, this._endAngle, this._anticlockwise);
+        context.stroke();
+    }
+});
+
+CanvasEllipseFill = Utilities.createClass(
+    function(stage) {
+        CanvasEllipse.call(this, stage);
+    }, {
+
+    draw: function(context) {
+        context.fillStyle = this._color;
+        context.beginPath();
+        context.ellipse(this._center.x, this._center.y, this._radius.width, this._radius.height, this._rotation, this._startAngle, this._endAngle, this._anticlockwise);
+        context.fill();
+    }
+});
+
+CanvasStroke = Utilities.createClass(
+    function (stage) {
+        this._object = new (Stage.randomElementInArray(this.objectTypes))(stage);
+    }, {
+
+    objectTypes: [
+        CanvasQuadraticSegment,
+        CanvasBezierSegment,
+        CanvasArcToSegment,
+        CanvasArcSegment,
+        CanvasRect,
+        CanvasEllipse
+    ],
+
+    draw: function(context) {
+        this._object.draw(context);
+    }
+});
+
+CanvasFill = Utilities.createClass(
+    function (stage) {
+        this._object = new (Stage.randomElementInArray(this.objectTypes))(stage);
+    }, {
+
+    objectTypes: [
+        CanvasArcToSegmentFill,
+        CanvasArcSegmentFill,
+        CanvasRectFill,
+        CanvasEllipseFill
+    ],
+
+    draw: function(context) {
+        this._object.draw(context);
+    }
+});
+
 // === STAGES ===
 
 SimpleCanvasPathStrokeStage = Utilities.createSubclass(SimpleCanvasStage,
@@ -340,6 +412,9 @@ CanvasPathBenchmark = Utilities.createSubclass(Benchmark,
         case "rect":
             stage = new SimpleCanvasStage(CanvasRect);
             break;
+        case "ellipse":
+            stage = new SimpleCanvasStage(CanvasEllipse);
+            break;
         case "lineFill":
             stage = new SimpleCanvasPathFillStage(CanvasLinePoint);
             break;
@@ -358,6 +433,15 @@ CanvasPathBenchmark = Utilities.createSubclass(Benchmark,
         case "rectFill":
             stage = new SimpleCanvasStage(CanvasRectFill);
             break;
+        case "ellipseFill":
+            stage = new SimpleCanvasStage(CanvasEllipseFill);
+            break;
+        case "strokes":
+            stage = new SimpleCanvasStage(CanvasStroke);
+            break;
+        case "fills":
+            stage = new SimpleCanvasStage(CanvasFill);
+            break;
         }
 
         Benchmark.call(this, stage, options);
index 0fb80fb23f46c96395b19aa57d0fdc4b9d802820..5c43644569cc5fbc863926e54489d591eba0c451 100644 (file)
@@ -1,3 +1,79 @@
+2016-03-21  Jon Lee  <jonlee@apple.com>
+
+        Update benchmark tests
+        https://bugs.webkit.org/show_bug.cgi?id=155723
+
+        Reviewed by Darin Adler.
+        Provisionally reviewed by Said Abou-Hallawa.
+
+        Add quadratic and bezier segments to the canvas path test.
+
+        * Animometer/resources/runner/tests.js: Some of the query strings are unnecessary.
+        Rename the test.
+        * Animometer/tests/master/resources/canvas-stage.js:
+        (tune): Update to be able to take an array of possible constructors. Choose one randomly.
+        * Animometer/tests/master/resources/canvas-tests.js:
+        (CanvasLinePoint.Utilities.createClass): Move the point selection out to a separate
+        function called randomPoint() for reuse. Move X_LOOPS, Y_LOOPS, and offsets into the
+        class definition.
+        (randomPoint): Scale the grid down a little bit so that the lines along the edge of the
+        canvas are not cut off when the stroke size is thick.
+        (CanvasQuadraticSegment): Added.
+        (CanvasBezierSegment): Added.
+        (SimpleCanvasStage): Pass in an array of the different segment types. Since line segments
+        are short compared to the curved ones, make it twice as likely to render a line segment.
+        (SimpleCanvasStage.animate): Update the drawing code so that we render all line segments.
+
+        Add a helper method that selects a random element from an array.
+
+        * Animometer/tests/resources/main.js:
+        (Stage.randomElementInArray): Select a random element from the provided array.
+
+        * Animometer/tests/bouncing-particles/resources/bouncing-tagged-images.js: Refactor.
+        * Animometer/tests/dom/resources/leaves.js: Ditto.
+        * Animometer/tests/master/resources/dom-particles.js: Ditto.
+        * Animometer/tests/master/resources/image-data.js: Ditto.
+        * Animometer/tests/master/resources/leaves.js: Ditto.
+        * Animometer/tests/simple/resources/simple-canvas-paths.js: Ditto.
+
+        Add canvas tests that includes all stroke and fill paths. This makes it possible to avoid having to
+        include the full simple canvas suite for perf testing.
+
+        * Animometer/resources/debug-runner/tests.js: Add new tests. Move the canvas test into the Canvas
+        suite.
+        * Animometer/tests/simple/resources/simple-canvas-paths.js: Add a CanvasStroke and CanvasFill particle
+        that random selects an object to render.
+
+        * Animometer/resources/debug-runner/tests.js: Move 3D suite before basic canvas suite.
+        When updating the perf bot script, we will include the suites up to this one, but exclude
+        the basic canvas suite.
+
+        Move compositing transforms test to HTML suite and remove the empty Miscellaneous suite.
+
+        * Animometer/resources/debug-runner/tests.js:
+        * Animometer/tests/dom/compositing-transforms.html: Renamed from PerformanceTests/Animometer/tests/misc/compositing-transforms.html.
+        * Animometer/tests/dom/resources/compositing-transforms.js: Renamed from PerformanceTests/Animometer/tests/misc/resources/compositing-transforms.js.
+
+        Clean up miscellaneous test suite. Add a canvas ellipse test, and remove the other
+        canvas tests.
+
+        * Animometer/resources/debug-runner/tests.js: Add ellipse tests to the simple suite.
+        * Animometer/tests/misc/canvas-electrons.html: Removed.
+        * Animometer/tests/misc/canvas-stars.html: Removed.
+        * Animometer/tests/misc/resources/canvas-electrons.js: Removed.
+        * Animometer/tests/misc/resources/canvas-stars.js: Removed.
+        * Animometer/tests/simple/resources/simple-canvas-paths.js: Add ellipse primitives.
+
+        Merge text tests together into one.
+
+        * Animometer/resources/runner/tests.js: Remove international.html.
+        * Animometer/tests/master/international.html: Removed.
+        * Animometer/tests/master/resources/text.js:
+        (animate): Update styling. Manually calculate gradients for the shadow particles.
+        Reduce the step size for y direction to avoid cutting text off at the margins. Increase
+        step for x since there will be a little more room.
+        * Animometer/tests/master/text.html: Add more translations and lay it out in a table.
+
 2016-03-20  Jon Lee  <jonlee@apple.com>
 
         Add a link to show debug data