Add canvas line dash test
[WebKit-https.git] / PerformanceTests / Animometer / tests / simple / resources / simple-canvas-paths.js
1 // === PAINT OBJECTS ===
2
3 function CanvasLineSegment(stage) {
4     var radius = stage.randomInt(10, 100);
5     var center = stage.randomPosition(stage.size);
6     var delta = Point.pointOnCircle(stage.randomAngle(), radius/2);
7
8     this._point1 = center.add(delta);
9     this._point2 = center.subtract(delta);
10     this._color = stage.randomColor();
11     this._lineWidth = stage.randomInt(1, 100);
12 }
13 CanvasLineSegment.prototype.draw = function(context) {
14     context.strokeStyle = this._color;
15     context.lineWidth = this._lineWidth;
16     context.beginPath();
17     context.moveTo(this._point1.x, this._point1.y);
18     context.lineTo(this._point2.x, this._point2.y);
19     context.stroke();
20 };
21
22 function CanvasLinePoint(stage, coordinateMaximum) {
23     this._point = stage.randomPosition(new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum)));
24 }
25 CanvasLinePoint.prototype.draw = function(context) {
26     context.lineTo(this._point.x, this._point.y);
27 };
28
29 function CanvasQuadraticSegment(stage) {
30     var maxSize = stage.randomInt(20, 200);
31     var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
32
33     this._point1 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
34     this._point2 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
35     this._point3 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
36     this._color = stage.randomColor();
37     this._lineWidth = stage.randomInt(1, 50);
38 };
39 CanvasQuadraticSegment.prototype.draw = function(context) {
40     context.strokeStyle = this._color;
41     context.lineWidth = this._lineWidth;
42     context.beginPath();
43     context.moveTo(this._point1.x, this._point1.y);
44     context.quadraticCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y);
45     context.stroke();
46 };
47
48 function CanvasQuadraticPoint(stage, coordinateMaximum) {
49     var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum));
50     this._point1 = stage.randomPosition(pointMaximum);
51     this._point2 = stage.randomPosition(pointMaximum);
52 };
53 CanvasQuadraticPoint.prototype.draw = function(context) {
54     context.quadraticCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y);
55 };
56
57 function CanvasBezierSegment(stage) {
58     var maxSize = stage.randomInt(20, 200);
59     var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
60
61     this._point1 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
62     this._point2 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
63     this._point3 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
64     this._point4 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
65     this._color = stage.randomColor();
66     this._lineWidth = stage.randomInt(1, 50);
67 };
68 CanvasBezierSegment.prototype.draw = function(context) {
69     context.strokeStyle = this._color;
70     context.lineWidth = this._lineWidth;
71     context.beginPath();
72     context.moveTo(this._point1.x, this._point1.y);
73     context.bezierCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._point4.x, this._point4.y);
74     context.stroke();
75 };
76
77 function CanvasBezierPoint(stage, coordinateMaximum) {
78     var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum));
79     this._point1 = stage.randomPosition(pointMaximum);
80     this._point2 = stage.randomPosition(pointMaximum);
81     this._point3 = stage.randomPosition(pointMaximum);
82 };
83 CanvasBezierPoint.prototype.draw = function(context) {
84     context.bezierCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y, this._point3.x, this._point3.y);
85 };
86
87 function CanvasArcToSegment(stage) {
88     var maxSize = stage.randomInt(20, 200);
89     var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
90
91     this._point1 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
92     this._point2 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
93     this._point3 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
94     this._radius = stage.randomInt(20, 200);
95     this._color = stage.randomColor();
96     this._lineWidth = stage.randomInt(1, 50);
97 };
98 CanvasArcToSegment.prototype.draw = function(context) {
99     context.strokeStyle = this._color;
100     context.lineWidth = this._lineWidth;
101     context.beginPath();
102     context.moveTo(this._point1.x, this._point1.y);
103     context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
104     context.stroke();
105 };
106
107 function CanvasArcToSegmentFill(stage) {
108     CanvasArcToSegment.call(this, stage);
109 };
110 CanvasArcToSegmentFill.prototype.draw = function(context) {
111     context.fillStyle = this._color;
112     context.beginPath();
113     context.moveTo(this._point1.x, this._point1.y);
114     context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
115     context.fill();
116 };
117
118 function CanvasArcSegment(stage) {
119     var maxSize = stage.randomInt(20, 200);
120     var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
121
122     this._point = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
123     this._radius = stage.randomInt(20, 200);
124     this._startAngle = stage.randomAngle();
125     this._endAngle = stage.randomAngle();
126     this._counterclockwise = stage.randomBool();
127     this._color = stage.randomColor();
128     this._lineWidth = stage.randomInt(1, 50);
129 };
130 CanvasArcSegment.prototype.draw = function(context) {
131     context.strokeStyle = this._color;
132     context.lineWidth = this._lineWidth;
133     context.beginPath();
134     context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
135     context.stroke();
136 };
137
138 function CanvasArcSegmentFill(stage) {
139     CanvasArcSegment.call(this, stage);
140 };
141 CanvasArcSegmentFill.prototype.draw = function(context) {
142     context.fillStyle = this._color;
143     context.beginPath();
144     context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
145     context.fill();
146 };
147
148 function CanvasRect(stage) {
149     this._width = stage.randomInt(20, 200);
150     this._height = stage.randomInt(20, 200);
151     this._point = stage.randomPosition(stage.size).subtract(new Point(this._width/2, this._height/2));
152     this._color = stage.randomColor();
153     this._lineWidth = stage.randomInt(1, 20);
154 }
155 CanvasRect.prototype.draw = function(context) {
156     context.strokeStyle = this._color;
157     context.lineWidth = this._lineWidth;
158     context.beginPath();
159     context.rect(this._point.x, this._point.y, this._width, this._height);
160     context.stroke();
161 };
162
163 function CanvasRectFill(stage) {
164     CanvasRect.call(this, stage);
165 }
166 CanvasRectFill.prototype.draw = function(context) {
167     context.fillStyle = this._color;
168     context.beginPath();
169     context.rect(this._point.x, this._point.y, this._width, this._height);
170     context.fill();
171 };
172
173 // === STAGES ===
174
175 function SimpleCanvasPathStrokeStage(element, options, canvasObject) {
176     SimpleCanvasStage.call(this, element, options, canvasObject);
177 }
178 SimpleCanvasPathStrokeStage.prototype = Object.create(SimpleCanvasStage.prototype);
179 SimpleCanvasPathStrokeStage.prototype.constructor = SimpleCanvasPathStrokeStage;
180 SimpleCanvasPathStrokeStage.prototype.animate = function() {
181     var context = this.context;
182     context.lineWidth = this.randomInt(1, 20);
183     context.strokeStyle = this.randomColor();
184     context.beginPath();
185     context.moveTo(0,0);
186     this._objects.forEach(function(object) {
187         object.draw(context);
188     });
189     context.stroke();
190 }
191
192 function SimpleCanvasPathFillStage(element, options, canvasObject) {
193     SimpleCanvasStage.call(this, element, options, canvasObject);
194 }
195 SimpleCanvasPathFillStage.prototype = Object.create(SimpleCanvasStage.prototype);
196 SimpleCanvasPathFillStage.prototype.constructor = SimpleCanvasPathFillStage;
197 SimpleCanvasPathFillStage.prototype.animate = function() {
198     var context = this.context;
199     context.fillStyle = this.randomColor();
200     context.beginPath();
201     context.moveTo(0,0);
202     this._objects.forEach(function(object) {
203         object.draw(context);
204     });
205     context.fill();
206 }
207
208 function CanvasLineSegmentStage(element, options)
209 {
210     SimpleCanvasStage.call(this, element, options, CanvasLineSegment);
211     this.context.lineCap = options["lineCap"] || "butt";
212 }
213 CanvasLineSegmentStage.prototype = Object.create(SimpleCanvasStage.prototype);
214 CanvasLineSegmentStage.prototype.constructor = CanvasLineSegmentStage;
215
216 function CanvasLinePathStage(element, options)
217 {
218     SimpleCanvasPathStrokeStage.call(this, element, options, CanvasLinePoint);
219     this.context.lineJoin = options["lineJoin"] || "bevel";
220 }
221 CanvasLinePathStage.prototype = Object.create(SimpleCanvasPathStrokeStage.prototype);
222 CanvasLinePathStage.prototype.constructor = CanvasLinePathStage;
223
224 function CanvasLineDashStage(element, options)
225 {
226     SimpleCanvasStage.call(this, element, options, CanvasLinePoint);
227     this.context.setLineDash([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
228     this.context.lineWidth = 1;
229     this.context.strokeStyle = "#000";
230     this._step = 0;
231 }
232 CanvasLineDashStage.prototype = Object.create(SimpleCanvasStage.prototype);
233 CanvasLineDashStage.prototype.constructor = CanvasLineDashStage;
234 CanvasLineDashStage.prototype.animate = function() {
235     var context = this.context;
236     context.lineDashOffset = this._step++;
237     context.beginPath();
238     context.moveTo(0,0);
239     this._objects.forEach(function(object) {
240         object.draw(context);
241     });
242     context.stroke();
243 };
244
245 // === BENCHMARK ===
246
247 function CanvasPathBenchmark(suite, test, options, recordTable, progressBar) {
248     SimpleCanvasBenchmark.call(this, suite, test, options, recordTable, progressBar);
249 }
250 CanvasPathBenchmark.prototype = Object.create(SimpleCanvasBenchmark.prototype);
251 CanvasPathBenchmark.prototype.constructor = CanvasPathBenchmark;
252 CanvasPathBenchmark.prototype.createStage = function(element)
253 {
254     switch (this._options["pathType"]) {
255     case "line":
256         return new CanvasLineSegmentStage(element, this._options);
257     case "linePath": {
258         if ("lineJoin" in this._options)
259             return new CanvasLinePathStage(element, this._options);
260         if ("lineDash" in this._options)
261             return new CanvasLineDashStage(element, this._options);
262         break;
263     }
264     case "quadratic":
265         return new SimpleCanvasStage(element, this._options, CanvasQuadraticSegment);
266     case "quadraticPath":
267         return new SimpleCanvasPathStrokeStage(element, this._options, CanvasQuadraticPoint);
268     case "bezier":
269         return new SimpleCanvasStage(element, this._options, CanvasBezierSegment);
270     case "bezierPath":
271         return new SimpleCanvasPathStrokeStage(element, this._options, CanvasBezierPoint);
272     case "arcTo":
273         return new SimpleCanvasStage(element, this._options, CanvasArcToSegment);
274     case "arc":
275         return new SimpleCanvasStage(element, this._options, CanvasArcSegment);
276     case "rect":
277         return new SimpleCanvasStage(element, this._options, CanvasRect);
278     case "lineFill":
279         return new SimpleCanvasPathFillStage(element, this._options, CanvasLinePoint);
280     case "quadraticFill":
281         return new SimpleCanvasPathFillStage(element, this._options, CanvasQuadraticPoint);
282     case "bezierFill":
283         return new SimpleCanvasPathFillStage(element, this._options, CanvasBezierPoint);
284     case "arcToFill":
285         return new SimpleCanvasStage(element, this._options, CanvasArcToSegmentFill);
286     case "arcFill":
287         return new SimpleCanvasStage(element, this._options, CanvasArcSegmentFill);
288     case "rectFill":
289         return new SimpleCanvasStage(element, this._options, CanvasRectFill);
290     }
291 }
292
293 window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar) {
294     return new CanvasPathBenchmark(suite, test, options, recordTable, progressBar);
295 }