2 <title>Canvas Tests
</title>
3 <script src=
"/tests/SimpleTest/SimpleTest.js"></script>
4 <link rel=
"stylesheet" href=
"/tests/SimpleTest/test.css">
8 SimpleTest
.waitForExplicitFinish();
9 const Cc
= SpecialPowers
.Cc
;
10 const Cr
= SpecialPowers
.Cr
;
12 function isPixel(ctx
, x
,y
, c
, d
) {
13 var pos
= x
+ "," + y
;
14 var color
= c
[0] + "," + c
[1] + "," + c
[2] + "," + c
[3];
15 var pixel
= ctx
.getImageData(x
, y
, 1, 1);
16 var pr
= pixel
.data
[0],
20 ok(c
[0]-d
<= pr
&& pr
<= c
[0]+d
&&
21 c
[1]-d
<= pg
&& pg
<= c
[1]+d
&&
22 c
[2]-d
<= pb
&& pb
<= c
[2]+d
&&
23 c
[3]-d
<= pa
&& pa
<= c
[3]+d
,
24 "pixel "+pos
+" of "+ctx
.canvas
.id
+" is "+pr
+","+pg
+","+pb
+","+pa
+"; expected "+color
+" +/- "+d
);
28 <p>Canvas test: test_drawClipPath_canvas
</p>
29 <canvas id=
"c1" class=
"output" width=
"100" height=
"100">+
31 <script type=
"text/javascript">
32 function test_drawClipPath_canvas() {
33 var c
= document
.getElementById("c1");
34 var ctx
= c
.getContext("2d");
36 var path
= new Path2D();
37 path
.rect(0, 0, 100, 100);
38 path
.rect(25, 25, 50, 50);
40 ctx
.fillStyle
= 'rgb(255,0,0)';
42 ctx
.fillRect(0, 0, 100, 100);
43 ctx
.fillStyle
= 'rgb(0,255,0)';
47 ctx
.fillRect(0, 0, 100, 100);
48 isPixel(ctx
, 50, 50, [0, 255, 0, 255], 5);
51 ctx
.fillStyle
= 'rgb(255,0,0)';
53 ctx
.fillRect(0, 0, 100, 100);
54 ctx
.fillStyle
= 'rgb(0,255,0)';
56 ctx
.clip(path
, 'nonzero');
58 ctx
.fillRect(0, 0, 100, 100);
59 isPixel(ctx
, 50, 50, [0, 255, 0, 255], 5);
62 ctx
.fillStyle
= 'rgb(255,0,0)';
64 ctx
.fillRect(0, 0, 100, 100);
65 ctx
.fillStyle
= 'rgb(0,255,0)';
67 ctx
.clip(path
, 'evenodd');
69 ctx
.fillRect(0, 0, 100, 100);
70 isPixel(ctx
, 50, 50, [255, 0, 0, 255], 5);
75 <p>Canvas test: test_drawFillPath_canvas
</p>
76 <canvas id=
"c2" class=
"output" width=
"100" height=
"100">+
78 <script type=
"text/javascript">
79 function test_drawFillPath_canvas() {
80 var c
= document
.getElementById("c2");
81 var ctx
= c
.getContext("2d");
83 var path
= new Path2D();
84 path
.rect(0, 0, 100, 100);
85 path
.rect(25, 25, 50, 50);
87 ctx
.fillStyle
= 'rgb(255,0,0)';
88 ctx
.fillRect(0, 0, 100, 100);
89 ctx
.fillStyle
= 'rgb(0,255,0)';
91 isPixel(ctx
, 50, 50, [0, 255, 0, 255], 5);
93 ctx
.fillStyle
= 'rgb(255,0,0)';
94 ctx
.fillRect(0, 0, 100, 100);
95 ctx
.fillStyle
= 'rgb(0,255,0)';
96 ctx
.fill(path
, 'nonzero');
97 isPixel(ctx
, 50, 50, [0, 255, 0, 255], 5);
99 ctx
.fillStyle
= 'rgb(255,0,0)';
100 ctx
.fillRect(0, 0, 100, 100);
101 ctx
.fillStyle
= 'rgb(0,255,0)';
102 ctx
.fill(path
, 'evenodd');
103 isPixel(ctx
, 50, 50, [255, 0, 0, 255], 5);
107 <p>Canvas test: test_drawStrokePath_canvas
</p>
108 <canvas id=
"c3" class=
"output" width=
"100" height=
"100">+
110 <script type=
"text/javascript">
111 function test_drawStrokePath_canvas() {
112 var c
= document
.getElementById("c3");
113 var ctx
= c
.getContext("2d");
115 var path
= new Path2D();
116 path
.rect(0, 0, 100, 100);
117 path
.rect(25, 25, 50, 50);
119 ctx
.fillStyle
= 'rgb(255,0,0)';
120 ctx
.fillRect(0, 0, 100, 100);
121 ctx
.strokeStyle
= 'rgb(0,255,0)';
124 isPixel(ctx
, 0, 0, [0, 255, 0, 255], 5);
125 isPixel(ctx
, 25, 25, [0, 255, 0, 255], 5);
126 isPixel(ctx
, 10, 10, [255, 0, 0, 255], 5);
130 <p>Canvas test: test_large_canvas
</p>
131 <canvas id=
"c4" class=
"output" width=
"10000" height=
"100">+
133 <script type=
"text/javascript">
134 function test_large_canvas() {
135 // test paths on large canvases. On certain platforms this will
136 // trigger retargeting of the backend
137 var c
= document
.getElementById("c4");
138 var ctx
= c
.getContext("2d");
140 var path
= new Path2D();
141 path
.rect(0, 0, 100, 100);
142 path
.rect(25, 25, 50, 50);
144 ctx
.fillStyle
= 'rgb(255,0,0)';
145 ctx
.fillRect(0, 0, 100, 100);
146 ctx
.fillStyle
= 'rgb(0,255,0)';
148 isPixel(ctx
, 50, 50, [0, 255, 0, 255], 5);
150 ctx
.fillStyle
= 'rgb(255,0,0)';
151 ctx
.fillRect(0, 0, 100, 100);
152 ctx
.fillStyle
= 'rgb(0,255,0)';
153 ctx
.fill(path
, 'nonzero');
154 isPixel(ctx
, 50, 50, [0, 255, 0, 255], 5);
156 ctx
.fillStyle
= 'rgb(255,0,0)';
157 ctx
.fillRect(0, 0, 100, 100);
158 ctx
.fillStyle
= 'rgb(0,255,0)';
159 ctx
.fill(path
, 'evenodd');
160 isPixel(ctx
, 50, 50, [255, 0, 0, 255], 5);
164 <p>Canvas test: test_isPointInPath_canvas
</p>
165 <canvas id=
"c5" class=
"output" width=
"100" height=
"100">+
167 <script type=
"text/javascript">
169 function shouldThrow(ctx
, s
) {
179 function shouldBeTrue(ctx
, path
, s
) {
183 function shouldBeFalse(ctx
, path
, s
) {
188 function test_isPointInPath_canvas() {
189 var c
= document
.getElementById("c5");
190 var ctx
= c
.getContext("2d");
192 var path
= new Path2D();
193 path
.rect(0, 0, 100, 100);
194 path
.rect(25, 25, 50, 50);
195 shouldBeTrue(ctx
, path
, "ctx.isPointInPath(path, 50, 50)");
196 shouldBeFalse(ctx
, path
, "ctx.isPointInPath(path, NaN, 50)");
197 shouldBeFalse(ctx
, path
, "ctx.isPointInPath(path, 50, NaN)");
200 path
.rect(0, 0, 100, 100);
201 path
.rect(25, 25, 50, 50);
202 shouldBeTrue(ctx
, path
, "ctx.isPointInPath(path, 50, 50, 'nonzero')");
205 path
.rect(0, 0, 100, 100);
206 path
.rect(25, 25, 50, 50);
207 shouldBeFalse(ctx
, path
, "ctx.isPointInPath(path, 50, 50, 'evenodd')");
209 shouldThrow(ctx
, "ctx.isPointInPath(null, 50, 50)");
210 shouldThrow(ctx
, "ctx.isPointInPath(null, 50, 50, 'nonzero')");
211 shouldThrow(ctx
, "ctx.isPointInPath(null, 50, 50, 'evenodd')");
212 shouldThrow(ctx
, "ctx.isPointInPath(path, 50, 50)");
213 shouldThrow(ctx
, "ctx.isPointInPath(path, 50, 50, 'nonzero')");
214 shouldThrow(ctx
, "ctx.isPointInPath(path, 50, 50, 'evenodd')");
216 shouldThrow(ctx
, "ctx.isPointInPath([], 50, 50)");
217 shouldThrow(ctx
, "ctx.isPointInPath([], 50, 50, 'nonzero')");
218 shouldThrow(ctx
, "ctx.isPointInPath([], 50, 50, 'evenodd')");
219 shouldThrow(ctx
, "ctx.isPointInPath({}, 50, 50)");
220 shouldThrow(ctx
, "ctx.isPointInPath({}, 50, 50, 'nonzero')");
221 shouldThrow(ctx
, "ctx.isPointInPath({}, 50, 50, 'evenodd')");
225 <p>Canvas test: test_isPointInStroke_canvas
</p>
226 <canvas id=
"c6" class=
"output" width=
"100" height=
"100">+
228 <script type=
"text/javascript">
230 function test_isPointInStroke_canvas() {
231 var c
= document
.getElementById("c6");
232 var ctx
= c
.getContext("2d");
234 ctx
.strokeStyle
= '#0ff';
236 var path
= new Path2D();
237 path
.rect(20,20,100,100);
239 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,20,20)");
240 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,120,20)");
241 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,20,120)");
242 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,120,120)");
243 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,70,20)");
244 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,20,70)");
245 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,120,70)");
246 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,70,120)");
247 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,22,22)");
248 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,118,22)");
249 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,22,118)");
250 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,118,118)");
251 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,70,18)");
252 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,122,70)");
253 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,70,122)");
254 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,18,70)");
255 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,NaN,122)");
256 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,18,NaN)");
258 shouldThrow(ctx
, "ctx.isPointInStroke(null,70,20)");
259 shouldThrow(ctx
, "ctx.isPointInStroke([],20,70)");
260 shouldThrow(ctx
, "ctx.isPointInStroke({},120,70)");
263 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,22,22)");
264 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,118,22)");
265 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,22,118)");
266 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,118,118)");
267 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,70,18)");
268 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,122,70)");
269 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,70,122)");
270 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,18,70)");
271 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,26,70)");
272 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,70,26)");
273 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,70,114)");
274 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,114,70)");
280 ctx
.lineJoin
= "bevel";
281 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,113,20)");
283 ctx
.miterLimit
= 40.0;
284 ctx
.lineJoin
= "miter";
285 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,113,20)");
287 ctx
.miterLimit
= 2.0;
288 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,113,20)");
293 ctx
.lineCap
= "butt";
294 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,112,10)");
296 ctx
.lineCap
= "round";
297 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,112,10)");
298 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,117,10)");
300 ctx
.lineCap
= "square";
301 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,112,10)");
302 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,117,10)");
304 ctx
.lineCap
= "butt";
305 ctx
.setLineDash([10,10]);
306 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,15,10)");
307 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,25,10)");
308 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,35,10)");
310 ctx
.lineDashOffset
= 10;
311 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,15,10)");
312 shouldBeTrue(ctx
, path
, "ctx.isPointInStroke(path,25,10)");
313 shouldBeFalse(ctx
, path
, "ctx.isPointInStroke(path,35,10)");
317 <p>Canvas test: test_pathconstructor_canvas
</p>
318 <canvas id=
"c7" class=
"output" width=
"200" height=
"100">+
320 <script type=
"text/javascript">
322 function test_pathconstructor_canvas() {
323 var c
= document
.getElementById("c7");
324 var ctx
= c
.getContext("2d");
326 var p
= new Path2D("M100,0L200,0L200,100L100,100z");
327 ctx
.fillStyle
= 'blue';
329 isPixel(ctx
, 105, 5, [0, 0, 255, 255], 0);
330 isPixel(ctx
, 5, 5, [0, 0, 0, 0], 0);
332 // copy constructor. This should not crash.
333 var p1
= new Path2D();
334 var _p2
= new Path2D(p1
);
335 p1
.arcTo(0, 0, 1, 1, 2);
339 <p>Canvas test: test_addpath_canvas
</p>
340 <canvas id=
"c8" class=
"output" width=
"200" height=
"200">+
342 <script type=
"text/javascript">
344 function test_addpath_canvas() {
345 var c
= document
.getElementById("c8");
346 var ctx
= c
.getContext("2d");
348 var p1
= new Path2D();
349 p1
.rect(0,0,100,100);
350 var p2
= new Path2D();
351 p2
.rect(0,100,100,100);
352 var m
= ctx
.currentTransform
;
354 ctx
.fillStyle
= 'yellow';
356 isPixel(ctx
, 0, 100, [255, 255, 0, 255], 0);
358 ctx
.clearRect(0,0,200,200);
361 var p3
= new Path2D();
362 p3
.rect(0,0,100,100);
363 var p4
= new Path2D();
364 p4
.rect(0,100,100,100);
365 var m
= document
.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix();
368 m
.e
= 100; m
.f
= -100;
370 ctx
.fillStyle
= 'yellow';
372 isPixel(ctx
, 50, 50, [255, 255, 0, 255], 0);
373 isPixel(ctx
, 150, 150, [0, 0, 0, 0], 0);
375 var p5
= new Path2D();
376 p5
.rect(0,0,100,100);
377 shouldThrow(ctx
, "p5.addPath(null, m)");
378 shouldThrow(ctx
, "p5.addPath([], m)");
379 shouldThrow(ctx
, "p5.addPath({}, m)");
387 function runTests() {
389 test_drawClipPath_canvas();
391 ok(false, "unexpected exception thrown in: test_drawClipPath_canvas");
395 test_drawFillPath_canvas();
397 ok(false, "unexpected exception thrown in: test_drawFillPath_canvas");
401 test_drawStrokePath_canvas();
403 ok(false, "unexpected exception thrown in: test_drawStrokePath_canvas");
409 ok(false, "unexpected exception thrown in: test_large_canvas");
413 test_isPointInPath_canvas();
415 ok(false, "unexpected exception thrown in: test_isPointInPath_canvas");
419 test_isPointInStroke_canvas();
421 ok(false, "unexpected exception thrown in: test_isPointInStroke_canvas");
425 test_pathconstructor_canvas();
427 ok(false, "unexpected exception thrown in: test_pathconstructor_canvas");
431 test_addpath_canvas();
433 ok(false, "unexpected exception thrown in: test_addpath_canvas");
439 addLoadEvent(function() {
440 SpecialPowers
.pushPrefEnv({"set":[["canvas.path.enabled", true]]}, runTests
);
443 // Don't leak the world via the Path2D reference to its window.
445 window
.p
= new Path2D();