Add canvas path tests
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 13 Oct 2015 01:18:03 +0000 (01:18 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 13 Oct 2015 01:18:03 +0000 (01:18 +0000)
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

PerformanceTests/Animometer/runner/resources/tests.js
PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js
PerformanceTests/Animometer/tests/simple/resources/simple-canvas.js
PerformanceTests/ChangeLog

index 64305d7..6328ea7 100644 (file)
@@ -143,10 +143,18 @@ Suites.push(new Suite("Basic canvas path suite",
             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"
         },
index 79c85d1..9253c3d 100644 (file)
@@ -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":
index 9260a4f..d332815 100644 (file)
@@ -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;
     }
index 442a386..e79c336 100644 (file)
@@ -1,5 +1,30 @@
 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
         https://bugs.webkit.org/show_bug.cgi?id=150066
         rdar://problem/23081143