Split benchmark into two different pages
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Dec 2015 01:36:43 +0000 (01:36 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Dec 2015 01:36:43 +0000 (01:36 +0000)
https://bugs.webkit.org/show_bug.cgi?id=152458

Reviewed by Simon Fraser.

Add tests to 'animometer' suite.

* Animometer/resources/runner/tests.js:
* Animometer/tests/master/canvas-stage.html: Added.
* Animometer/tests/master/resources/canvas-stage.js: Added.
* Animometer/tests/master/resources/canvas-tests.js: Added.
* Animometer/tests/master/resources/stage.css: Added.

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

PerformanceTests/Animometer/resources/runner/tests.js
PerformanceTests/Animometer/tests/master/canvas-stage.html [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/canvas-stage.js [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/canvas-tests.js [new file with mode: 0644]
PerformanceTests/Animometer/tests/master/resources/stage.css [new file with mode: 0644]
PerformanceTests/ChangeLog

index 149067a..f984181 100644 (file)
@@ -22,6 +22,18 @@ var Suites = [];
 
 Suites.push(new Suite("Animometer",
     [
+        {
+            url: "master/canvas-stage.html?pathType=arcs",
+            name: "Canvas arcs"
+        },
+        {
+            url: "master/canvas-stage.html?pathType=linePath&lineJoin=round&lineCap=round",
+            name: "Canvas line path, round join"
+        },
+        {
+            url: "master/canvas-stage.html?pathType=line&lineCap=square",
+            name: "Canvas line segments"
+        },
     ]
 ));
 
diff --git a/PerformanceTests/Animometer/tests/master/canvas-stage.html b/PerformanceTests/Animometer/tests/master/canvas-stage.html
new file mode 100644 (file)
index 0000000..3f46ae9
--- /dev/null
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="resources/stage.css">
+    <script src="../../resources/algorithm.js"></script>
+    <script src="../../resources/strings.js"></script>
+    <script src="../../resources/sampler.js"></script>
+    <script src="../../resources/extensions.js"></script>
+    <script src="../resources/math.js"></script>
+    <script src="../resources/main.js"></script>
+    <script src="../resources/stage.js"></script>
+    <script src="resources/canvas-stage.js"></script>
+    <script src="resources/canvas-tests.js"></script>
+</head>
+<body>
+    <canvas id="stage"></canvas>
+</body>
+</html>
diff --git a/PerformanceTests/Animometer/tests/master/resources/canvas-stage.js b/PerformanceTests/Animometer/tests/master/resources/canvas-stage.js
new file mode 100644 (file)
index 0000000..cee8fca
--- /dev/null
@@ -0,0 +1,61 @@
+function SimpleCanvasStage(element, options, canvasObject)
+{
+    Stage.call(this, element, options);
+    this.options = options;
+    this.context = this.element.getContext("2d");
+    this.canvasObject = canvasObject;
+    this._objects = [];
+}
+SimpleCanvasStage.prototype = Object.create(Stage.prototype);
+SimpleCanvasStage.prototype.constructor = SimpleCanvasStage;
+SimpleCanvasStage.prototype.tune = function(count)
+{
+    if (count == 0)
+        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, coordinateMaximum));
+        }
+        return this._objects.length;
+    }
+
+    count = Math.min(-count, this._objects.length);
+    this._objects.splice(0, count);
+    return this._objects.length;
+}
+SimpleCanvasStage.prototype.animate = function()
+{
+    var context = this.context;
+    this._objects.forEach(function(object) {
+        object.draw(context);
+    });
+}
+
+function SimpleCanvasAnimator(benchmark, options)
+{
+    StageAnimator.call(this, benchmark, options);
+    this._context = benchmark._stage.context;
+}
+
+SimpleCanvasAnimator.prototype = Object.create(StageAnimator.prototype);
+SimpleCanvasAnimator.prototype.constructor = SimpleCanvasAnimator;
+SimpleCanvasAnimator.prototype.animate = function()
+{
+    this._context.clearRect(0, 0, this._benchmark._stage.size.x, this._benchmark._stage.size.y);
+    return StageAnimator.prototype.animate.call(this, this._options);
+}
+
+
+function SimpleCanvasBenchmark(suite, test, options, progressBar) {
+    StageBenchmark.call(this, suite, test, options, progressBar);
+}
+SimpleCanvasBenchmark.prototype = Object.create(StageBenchmark.prototype);
+SimpleCanvasBenchmark.prototype.constructor = SimpleCanvasBenchmark;
+SimpleCanvasBenchmark.prototype.createAnimator = function() {
+    return new SimpleCanvasAnimator(this, this._options);
+}
+
diff --git a/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js b/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js
new file mode 100644 (file)
index 0000000..564b58a
--- /dev/null
@@ -0,0 +1,221 @@
+(function() {
+
+// === PAINT OBJECTS ===
+
+function CanvasLineSegment(stage)
+{
+    var circle = stage.randomInt(0, 2);
+    this._color = ["#e01040", "#10c030", "#e05010"][circle];
+    this._lineWidth = Math.pow(Math.random(), 12) * 20 + 3;
+    this._omega = Math.random() * 3 + 0.2;
+    var theta = stage.randomAngle();
+    this._cosTheta = Math.cos(theta);
+    this._sinTheta = Math.sin(theta);
+    this._startX = stage.circleRadius * this._cosTheta + (0.5 + circle) / 3 * stage.size.x;
+    this._startY = stage.circleRadius * this._sinTheta + stage.size.y / 2;
+    this._length = Math.pow(Math.random(), 8) * 40 + 20;
+    this._segmentDirection = Math.random() > 0.5 ? -1 : 1;
+}
+
+CanvasLineSegment.prototype.draw = function(context)
+{
+    context.strokeStyle = this._color;
+    context.lineWidth = this._lineWidth;
+
+    this._length+=Math.sin(Date.now()/100*this._omega);
+
+    context.beginPath();
+    context.moveTo(this._startX, this._startY);
+    context.lineTo(this._startX + this._segmentDirection * this._length * this._cosTheta,
+                   this._startY + this._segmentDirection * this._length * this._sinTheta);
+    context.stroke();
+};
+
+function CanvasArc(stage)
+{
+    var maxX = 6, maxY = 3;
+    var distanceX = stage.size.x / maxX;
+    var distanceY = stage.size.y / (maxY + 1);
+    var randY = stage.randomInt(0, maxY);
+    var randX = stage.randomInt(0, maxX - 1 * (randY % 2));
+
+    this._point = new Point(distanceX * (randX + (randY % 2) / 2), distanceY * (randY + .5));
+
+    this._radius = 20 + Math.pow(Math.random(), 5) * (Math.min(distanceX, distanceY) / 1.6);
+    this._startAngle = stage.randomAngle();
+    this._endAngle = stage.randomAngle();
+    this._omega = (Math.random() - 0.5) * 0.3;
+    this._counterclockwise = stage.randomBool();
+    var colors = ["#101010", "#808080", "#c0c0c0"];
+    colors.push(["#e01040", "#10c030", "#e05010"][(randX + Math.ceil(randY / 2)) % 3]);
+    this._color = colors[Math.floor(Math.random() * colors.length)];
+    this._lineWidth = 1 + Math.pow(Math.random(), 5) * 30;
+    this._doStroke = stage.randomInt(0, 3) != 0;
+};
+
+CanvasArc.prototype.draw = function(context)
+{
+    this._startAngle += this._omega;
+    this._endAngle += this._omega / 2;
+
+    if (this._doStroke) {
+        context.strokeStyle = this._color;
+        context.lineWidth = this._lineWidth;
+        context.beginPath();
+        context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
+        context.stroke();
+    } else {
+        context.fillStyle = this._color;
+        context.beginPath();
+        context.lineTo(this._point.x, this._point.y);
+        context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
+        context.lineTo(this._point.x, this._point.y);
+        context.fill();
+    }
+};
+
+function CanvasLinePoint(stage, coordinateMaximum)
+{
+    var X_LOOPS = 40;
+    var Y_LOOPS = 20;
+
+    var offsets = [[-2, -1], [2, 1], [-1, 0], [1, 0], [-1, 2], [1, -2]];
+    var offset = offsets[Math.floor(Math.random() * offsets.length)];
+
+    this.coordinate = new Point(X_LOOPS/2, Y_LOOPS/2);
+    if (stage._objects.length) {
+        var head = stage._objects[stage._objects.length - 1].coordinate;
+        this.coordinate.x = head.x;
+        this.coordinate.y = head.y;
+    }
+
+    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 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", "#e01040"];
+    this._color = colors[Math.floor(Math.random() * colors.length)];
+
+    this._width = Math.pow(Math.random(), 5) * 20 + 1;
+    this._isSplit = Math.random() > 0.9;
+    this._point = new Point(randX, randY);
+
+}
+
+CanvasLinePoint.prototype.draw = function(context, stage)
+{
+    context.lineTo(this._point.x, this._point.y);
+};
+
+
+// === STAGES ===
+
+function SimpleCanvasPathStrokeStage(element, options, canvasObject)
+{
+    SimpleCanvasStage.call(this, element, options, canvasObject);
+    this.context.lineCap = options["lineCap"] || "butt";
+    this.context.lineJoin = options["lineJoin"] || "bevel";
+}
+SimpleCanvasPathStrokeStage.prototype = Object.create(SimpleCanvasStage.prototype);
+SimpleCanvasPathStrokeStage.prototype.constructor = SimpleCanvasPathStrokeStage;
+SimpleCanvasPathStrokeStage.prototype.animate = function() {
+    var context = this.context;
+    var stage = this;
+
+    context.beginPath();
+    this._objects.forEach(function(object, index) {
+        if (index == 0) {
+            context.lineWidth = object._width;
+            context.strokeStyle = object._color;
+            context.moveTo(object._point.x, object._point.y);
+        } else {
+            if (object._isSplit) {
+                context.stroke();
+
+                context.lineWidth = object._width;
+                context.strokeStyle = object._color;
+                context.beginPath();
+            }
+
+            if (Math.random() > 0.999)
+                object._isSplit = !object._isSplit;
+
+            object.draw(context);
+        }
+    });
+    context.stroke();
+}
+
+function CanvasLineSegmentStage(element, options)
+{
+    SimpleCanvasStage.call(this, element, options, CanvasLineSegment);
+    this.context.lineCap = options["lineCap"] || "butt";
+    this.circleRadius = this.size.x / 3 / 2 - 20;
+}
+CanvasLineSegmentStage.prototype = Object.create(SimpleCanvasStage.prototype);
+CanvasLineSegmentStage.prototype.constructor = CanvasLineSegmentStage;
+CanvasLineSegmentStage.prototype.animate = function()
+{
+    var context = this.context;
+    var stage = this;
+
+    context.lineWidth = 30;
+    for(var i = 0; i < 3; i++) {
+        context.strokeStyle = ["#e01040", "#10c030", "#e05010"][i];
+        context.fillStyle = ["#70051d", "#016112", "#702701"][i];
+        context.beginPath();
+            context.arc((0.5 + i) / 3 * stage.size.x, stage.size.y/2, stage.circleRadius, 0, Math.PI*2);
+        context.stroke();
+        context.fill();
+    }
+
+    this._objects.forEach(function(object) {
+        object.draw(context);
+    });
+}
+
+function CanvasLinePathStage(element, options)
+{
+    SimpleCanvasPathStrokeStage.call(this, element, options, CanvasLinePoint);
+    this.context.lineJoin = options["lineJoin"] || "bevel";
+    this.context.lineCap = options["lineCap"] || "butt";
+}
+CanvasLinePathStage.prototype = Object.create(SimpleCanvasPathStrokeStage.prototype);
+CanvasLinePathStage.prototype.constructor = CanvasLinePathStage;
+
+// === BENCHMARK ===
+
+function CanvasPathBenchmark(suite, test, options, progressBar)
+{
+    SimpleCanvasBenchmark.call(this, suite, test, options, progressBar);
+}
+CanvasPathBenchmark.prototype = Object.create(SimpleCanvasBenchmark.prototype);
+CanvasPathBenchmark.prototype.constructor = CanvasPathBenchmark;
+CanvasPathBenchmark.prototype.createStage = function(element)
+{
+    switch (this._options["pathType"]) {
+    case "line":
+        return new CanvasLineSegmentStage(element, this._options);
+    case "arcs":
+        return new SimpleCanvasStage(element, this._options, CanvasArc);
+    case "linePath":
+        return new CanvasLinePathStage(element, this._options);
+    }
+}
+
+window.benchmarkClient.create = function(suite, test, options, progressBar)
+{
+    return new CanvasPathBenchmark(suite, test, options, progressBar);
+}
+
+})();
\ No newline at end of file
diff --git a/PerformanceTests/Animometer/tests/master/resources/stage.css b/PerformanceTests/Animometer/tests/master/resources/stage.css
new file mode 100644 (file)
index 0000000..cb5f81c
--- /dev/null
@@ -0,0 +1,17 @@
+html {
+    height: 100%;
+}
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    background-color: rgb(241, 241, 241);
+}
+
+#stage {
+  width: 100%;
+  height: 100%;
+  background-color: rgb(241, 241, 241);
+}
index 30ba79a..7e27253 100644 (file)
@@ -5,6 +5,21 @@
 
         Reviewed by Simon Fraser.
 
+        Add tests to 'animometer' suite.
+
+        * Animometer/resources/runner/tests.js:
+        * Animometer/tests/master/canvas-stage.html: Added.
+        * Animometer/tests/master/resources/canvas-stage.js: Added.
+        * Animometer/tests/master/resources/canvas-tests.js: Added.
+        * Animometer/tests/master/resources/stage.css: Added.
+
+2015-12-23  Jon Lee  <jonlee@apple.com>
+
+        Split benchmark into two different pages
+        https://bugs.webkit.org/show_bug.cgi?id=152458
+
+        Reviewed by Simon Fraser.
+
         Address comments.
 
         * Animometer/resources/debug-runner/benchmark-runner.js: