Changeset 190913 in webkit


Ignore:
Timestamp:
Oct 12, 2015 6:18:03 PM (8 years ago)
Author:
jonlee@apple.com
Message:

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.

Location:
trunk/PerformanceTests
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/PerformanceTests/Animometer/runner/resources/tests.js

    r190912 r190913  
    144144        },
    145145        {
     146            url: "simple/simple-canvas-paths.html?pathType=quadraticPath",
     147            name: "Canvas quadratic path"
     148        },
     149        {
    146150            url: "simple/simple-canvas-paths.html?pathType=bezier",
    147151            name: "Canvas bezier segments"
     152        },
     153        {
     154            url: "simple/simple-canvas-paths.html?pathType=bezierPath",
     155            name: "Canvas bezier path"
    148156        },
    149157        {
  • trunk/PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js

    r190912 r190913  
    2020};
    2121
     22function CanvasQuadraticPoint(stage, coordinateMaximum) {
     23    var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum));
     24    this._point1 = stage.randomPosition(pointMaximum);
     25    this._point2 = stage.randomPosition(pointMaximum);
     26};
     27CanvasQuadraticPoint.prototype.draw = function(context) {
     28    context.quadraticCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y);
     29};
     30
    2231function CanvasBezierSegment(stage) {
    2332    var maxSize = stage.randomInt(20, 200);
     
    3847    context.bezierCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._point4.x, this._point4.y);
    3948    context.stroke();
     49};
     50
     51function CanvasBezierPoint(stage, coordinateMaximum) {
     52    var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum));
     53    this._point1 = stage.randomPosition(pointMaximum);
     54    this._point2 = stage.randomPosition(pointMaximum);
     55    this._point3 = stage.randomPosition(pointMaximum);
     56};
     57CanvasBezierPoint.prototype.draw = function(context) {
     58    context.bezierCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y, this._point3.x, this._point3.y);
    4059};
    4160
     
    105124};
    106125
     126// === STAGES ===
     127
     128function SimpleCanvasPathStrokeStage(element, options, canvasObject) {
     129    SimpleCanvasStage.call(this, element, options, canvasObject);
     130}
     131SimpleCanvasPathStrokeStage.prototype = Object.create(SimpleCanvasStage.prototype);
     132SimpleCanvasPathStrokeStage.prototype.constructor = SimpleCanvasPathStrokeStage;
     133SimpleCanvasPathStrokeStage.prototype.animate = function() {
     134    var context = this.context;
     135    context.lineWidth = this.randomInt(1, 20);
     136    context.strokeStyle = this.randomColor();
     137    context.beginPath();
     138    context.moveTo(0,0);
     139    this._objects.forEach(function(object) {
     140        object.draw(context);
     141    });
     142    context.stroke();
     143}
     144
    107145// === BENCHMARK ===
    108146
     
    117155    case "quadratic":
    118156        return new SimpleCanvasStage(element, this._options, CanvasQuadraticSegment);
     157    case "quadraticPath":
     158        return new SimpleCanvasPathStrokeStage(element, this._options, CanvasQuadraticPoint);
    119159    case "bezier":
    120160        return new SimpleCanvasStage(element, this._options, CanvasBezierSegment);
     161    case "bezierPath":
     162        return new SimpleCanvasPathStrokeStage(element, this._options, CanvasBezierPoint);
    121163    case "arcTo":
    122164        return new SimpleCanvasStage(element, this._options, CanvasArcToSegment);
  • trunk/PerformanceTests/Animometer/tests/simple/resources/simple-canvas.js

    r190912 r190913  
    1515
    1616    if (count > 0) {
     17        // For path-based tests, use the object length as a maximum coordinate value
     18        // to make it easier to see what the test is doing
     19        var coordinateMaximum = Math.max(this._objects.length, 200);
    1720        for (var i = 0; i < count; ++i) {
    18             this._objects.push(new this.canvasObject(this));
     21            this._objects.push(new this.canvasObject(this, coordinateMaximum));
    1922        }
    2023        return this._objects.length;
  • trunk/PerformanceTests/ChangeLog

    r190912 r190913  
     12015-10-12  Jon Lee  <jonlee@apple.com>
     2
     3        Add canvas path tests
     4        https://bugs.webkit.org/show_bug.cgi?id=150067
     5        rdar://problem/23081463
     6
     7        Reviewed by Dean Jackson.
     8
     9        * Animometer/runner/resources/tests.js: Add a quadratic and bezier path test.
     10
     11        * Animometer/tests/simple/resources/simple-canvas.js:
     12        (SimpleCanvasStage.prototype.tune): This kind of test joins all of the segments
     13        into one long path, and tries to render that one path. Random points make it
     14        difficult to tell what is going on, so add a parameter to the constructor to
     15        confine the area where the random coordinates can land. The more complicated the
     16        case is, the larger an area the path will cover. Add an artificial minimum so
     17        that the first 200 points aren't confined to a space that is too small.
     18
     19        * Animometer/tests/simple/resources/simple-canvas-paths.js:
     20        (SimpleCanvasPathStrokeStage): Add a new kind of stage that inherits from
     21        SimpleCanvasStage. Each time the frame animates a random line width and stroke
     22        color are chosen. The path setup is done outside of each paint object.
     23        (CanvasQuadraticPoint): This point just calls quadraticCurveTo.
     24        (CanvasPathBenchmark.prototype.createStage): Add the tests.
     25
    1262015-10-12  Jon Lee  <jonlee@apple.com>
    227
Note: See TracChangeset for help on using the changeset viewer.