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 b019cab..c3bfbc7 100644 (file)
@@ -168,6 +168,10 @@ 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"
         }
     ]
 ));
@@ -175,10 +179,6 @@ Suites.push(new Suite("HTML suite",
 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",
     [
         {
@@ -281,6 +302,10 @@ Suites.push(new Suite("Basic canvas path suite",
             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 0881e32..b235249 100644 (file)
@@ -25,18 +25,14 @@ 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 ad33e2d..1ef6a09 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 7b0778e..9cef548 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 2ad63a3..22002ec 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 f9a0c66..79fc867 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 e5f613a..c6512bd 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 07d3dd8..7a028f2 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 9101b75..50bd2fd 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 d70b7aa..f5950b2 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 bc32834..02b516a 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 d4ddf4b..0450d27 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 718f8bc..cda985b 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 0fb80fb..5c43644 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