Add canvas path tests

https://bugs.webkit.org/show_bug.cgi?id=150067
rdar://problem/23081463

Reviewed by Dean Jackson.

* Animometer/runner/resources/tests.js: Add a quadratic and bezier path test.

* Animometer/tests/simple/resources/simple-canvas.js:
(SimpleCanvasStage.prototype.tune): This kind of test joins all of the segments
into one long path, and tries to render that one path. Random points make it
difficult to tell what is going on, so add a parameter to the constructor to
confine the area where the random coordinates can land. The more complicated the
case is, the larger an area the path will cover. Add an artificial minimum so
that the first 200 points aren't confined to a space that is too small.

* Animometer/tests/simple/resources/simple-canvas-paths.js:
(SimpleCanvasPathStrokeStage): Add a new kind of stage that inherits from
SimpleCanvasStage. Each time the frame animates a random line width and stroke
color are chosen. The path setup is done outside of each paint object.
(CanvasQuadraticPoint): This point just calls quadraticCurveTo.
(CanvasPathBenchmark.prototype.createStage): Add the tests.

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

diff --git a/PerformanceTests/Animometer/runner/resources/tests.js b/PerformanceTests/Animometer/runner/resources/tests.js
index 64305d7b3dc76197e10beb680ecabbdc3dba745d..6328ea74a8f6b84946638200070d82161d0f4b48 100644 (file)
--- a/PerformanceTests/Animometer/runner/resources/tests.js
+++ b/PerformanceTests/Animometer/runner/resources/tests.js
@@ -142,10 +142,18 @@ Suites.push(new Suite("Basic canvas path suite",
             url: "simple/simple-canvas-paths.html?pathType=quadratic",
             name: "Canvas quadratic segments"
         },
+        {
+            url: "simple/simple-canvas-paths.html?pathType=quadraticPath",
+            name: "Canvas quadratic path"
+        },
         {
             url: "simple/simple-canvas-paths.html?pathType=bezier",
             name: "Canvas bezier segments"
         },
+        {
+            url: "simple/simple-canvas-paths.html?pathType=bezierPath",
+            name: "Canvas bezier path"
+        },
         {
             url: "simple/simple-canvas-paths.html?&pathType=arcTo",
             name: "Canvas arcTo segments"

diff --git a/PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js b/PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js
index 79c85d1d015586b123a23970ea3829c411964b08..9253c3d8d436d55431bf421053b6b24196e0a515 100644 (file)
--- a/PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js
+++ b/PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js
@@ -19,6 +19,15 @@ CanvasQuadraticSegment.prototype.draw = function(context) {
     context.stroke();
 };
 
+function CanvasQuadraticPoint(stage, coordinateMaximum) {
+    var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum));
+    this._point1 = stage.randomPosition(pointMaximum);
+    this._point2 = stage.randomPosition(pointMaximum);
+};
+CanvasQuadraticPoint.prototype.draw = function(context) {
+    context.quadraticCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y);
+};
+
 function CanvasBezierSegment(stage) {
     var maxSize = stage.randomInt(20, 200);
     var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
@@ -39,6 +48,16 @@ CanvasBezierSegment.prototype.draw = function(context) {
     context.stroke();
 };
 
+function CanvasBezierPoint(stage, coordinateMaximum) {
+    var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum));
+    this._point1 = stage.randomPosition(pointMaximum);
+    this._point2 = stage.randomPosition(pointMaximum);
+    this._point3 = stage.randomPosition(pointMaximum);
+};
+CanvasBezierPoint.prototype.draw = function(context) {
+    context.bezierCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y, this._point3.x, this._point3.y);
+};
+
 function CanvasArcToSegment(stage) {
     var maxSize = stage.randomInt(20, 200);
     var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
@@ -104,6 +123,25 @@ CanvasRectFill.prototype.draw = function(context) {
     context.fill();
 };
 
+// === STAGES ===
+
+function SimpleCanvasPathStrokeStage(element, options, canvasObject) {
+    SimpleCanvasStage.call(this, element, options, canvasObject);
+}
+SimpleCanvasPathStrokeStage.prototype = Object.create(SimpleCanvasStage.prototype);
+SimpleCanvasPathStrokeStage.prototype.constructor = SimpleCanvasPathStrokeStage;
+SimpleCanvasPathStrokeStage.prototype.animate = function() {
+    var context = this.context;
+    context.lineWidth = this.randomInt(1, 20);
+    context.strokeStyle = this.randomColor();
+    context.beginPath();
+    context.moveTo(0,0);
+    this._objects.forEach(function(object) {
+        object.draw(context);
+    });
+    context.stroke();
+}
+
 // === BENCHMARK ===
 
 function CanvasPathBenchmark(suite, test, options, recordTable, progressBar) {
@@ -116,8 +154,12 @@ CanvasPathBenchmark.prototype.createStage = function(element)
     switch (this._options["pathType"]) {
     case "quadratic":
         return new SimpleCanvasStage(element, this._options, CanvasQuadraticSegment);
+    case "quadraticPath":
+        return new SimpleCanvasPathStrokeStage(element, this._options, CanvasQuadraticPoint);
     case "bezier":
         return new SimpleCanvasStage(element, this._options, CanvasBezierSegment);
+    case "bezierPath":
+        return new SimpleCanvasPathStrokeStage(element, this._options, CanvasBezierPoint);
     case "arcTo":
         return new SimpleCanvasStage(element, this._options, CanvasArcToSegment);
     case "arc":

diff --git a/PerformanceTests/Animometer/tests/simple/resources/simple-canvas.js b/PerformanceTests/Animometer/tests/simple/resources/simple-canvas.js
index 9260a4f764a6ca7f970996ab55a81d27b775049e..d3328153c667d5a969a100011bd834558bf6b49e 100644 (file)
--- a/PerformanceTests/Animometer/tests/simple/resources/simple-canvas.js
+++ b/PerformanceTests/Animometer/tests/simple/resources/simple-canvas.js
@@ -14,8 +14,11 @@ SimpleCanvasStage.prototype.tune = function(count)
         return this._objects.length;
 
     if (count > 0) {
+        // For path-based tests, use the object length as a maximum coordinate value
+        // to make it easier to see what the test is doing
+        var coordinateMaximum = Math.max(this._objects.length, 200);
         for (var i = 0; i < count; ++i) {
-            this._objects.push(new this.canvasObject(this));
+            this._objects.push(new this.canvasObject(this, coordinateMaximum));
         }
         return this._objects.length;
     }

diff --git a/PerformanceTests/ChangeLog b/PerformanceTests/ChangeLog
index 442a3864e9afaaf61d5b88d6a68f7e4babd40bca..e79c336c4d806c80d40fa347f3d2805e4dfa83df 100644 (file)
--- a/PerformanceTests/ChangeLog
+++ b/PerformanceTests/ChangeLog
@@ -1,3 +1,28 @@
+2015-10-12  Jon Lee  <jonlee@apple.com>
+
+        Add canvas path tests
+        https://bugs.webkit.org/show_bug.cgi?id=150067
+        rdar://problem/23081463
+
+        Reviewed by Dean Jackson.
+
+        * Animometer/runner/resources/tests.js: Add a quadratic and bezier path test.
+
+        * Animometer/tests/simple/resources/simple-canvas.js:
+        (SimpleCanvasStage.prototype.tune): This kind of test joins all of the segments
+        into one long path, and tries to render that one path. Random points make it
+        difficult to tell what is going on, so add a parameter to the constructor to
+        confine the area where the random coordinates can land. The more complicated the
+        case is, the larger an area the path will cover. Add an artificial minimum so
+        that the first 200 points aren't confined to a space that is too small.
+
+        * Animometer/tests/simple/resources/simple-canvas-paths.js:
+        (SimpleCanvasPathStrokeStage): Add a new kind of stage that inherits from
+        SimpleCanvasStage. Each time the frame animates a random line width and stroke
+        color are chosen. The path setup is done outside of each paint object.
+        (CanvasQuadraticPoint): This point just calls quadraticCurveTo.
+        (CanvasPathBenchmark.prototype.createStage): Add the tests.
+
 2015-10-12  Jon Lee  <jonlee@apple.com>
 
         Add basic canvas tests