OLD | NEW |
| (Empty) |
1 description("This test checks resetTransform in canvas v5"); | |
2 | |
3 var canvas = document.createElement('canvas'); | |
4 document.body.appendChild(canvas); | |
5 canvas.setAttribute('width', '100'); | |
6 canvas.setAttribute('height', '100'); | |
7 var ctx = canvas.getContext('2d'); | |
8 | |
9 debug("resetTransform should reset other transforms."); | |
10 ctx.save(); | |
11 ctx.scale(0.5, 0.5); | |
12 ctx.resetTransform(); | |
13 ctx.fillStyle = 'green'; | |
14 ctx.fillRect(0, 0, 100, 100); | |
15 ctx.restore(); | |
16 | |
17 var imageData = ctx.getImageData(98, 98, 1, 1); | |
18 var imgdata = imageData.data; | |
19 shouldBe("imgdata[0]", "0"); | |
20 shouldBe("imgdata[1]", "128"); | |
21 shouldBe("imgdata[2]", "0"); | |
22 | |
23 debug("resetTransform should not affect CTM outside of save() and restore()."); | |
24 ctx.save(); | |
25 ctx.scale(0.5, 0.5); | |
26 ctx.save(); | |
27 ctx.resetTransform(); | |
28 ctx.fillStyle = 'green'; | |
29 ctx.fillRect(0, 0, 100, 100); | |
30 ctx.restore(); | |
31 ctx.fillStyle = 'red'; | |
32 ctx.fillRect(0, 0, 100, 100); | |
33 ctx.restore(); | |
34 | |
35 imageData = ctx.getImageData(98, 98, 1, 1); | |
36 imgdata = imageData.data; | |
37 shouldBe("imgdata[0]", "0"); | |
38 shouldBe("imgdata[1]", "128"); | |
39 shouldBe("imgdata[2]", "0"); | |
40 | |
41 imageData = ctx.getImageData(48, 48, 1, 1); | |
42 imgdata = imageData.data; | |
43 shouldBe("imgdata[0]", "255"); | |
44 shouldBe("imgdata[1]", "0"); | |
45 shouldBe("imgdata[2]", "0"); | |
46 | |
47 debug("resetTransform should restore the path transform to identity."); | |
48 /* This should draw a green rectangle on on top of a red one. The red should not
be visible. */ | |
49 ctx.save(); | |
50 ctx.beginPath(); | |
51 ctx.moveTo(0, 0); | |
52 ctx.lineTo(100, 0); | |
53 ctx.lineTo(100, 100); | |
54 ctx.lineTo(0, 100); | |
55 ctx.fillStyle = 'red'; | |
56 ctx.fill(); | |
57 ctx.translate(200, 0); | |
58 ctx.resetTransform(); | |
59 ctx.fillStyle = 'green'; | |
60 ctx.fill(); | |
61 ctx.restore(); | |
62 | |
63 imageData = ctx.getImageData(50, 50, 1, 1); | |
64 imgdata = imageData.data; | |
65 shouldBe("imgdata[0]", "0"); | |
66 shouldBe("imgdata[1]", "128"); | |
67 shouldBe("imgdata[2]", "0"); | |
68 | |
69 debug("resetTransform should resolve the non-invertible CTM state."); | |
70 ctx.save(); | |
71 ctx.fillStyle = 'red'; | |
72 ctx.fillRect(0, 0, 100, 100); | |
73 ctx.beginPath(); | |
74 ctx.moveTo(0, 0); | |
75 ctx.lineTo(100, 0); | |
76 ctx.lineTo(100, 100); | |
77 ctx.lineTo(0, 100); | |
78 ctx.scale(0, 0); | |
79 ctx.resetTransform(); | |
80 ctx.fillStyle = 'green'; | |
81 ctx.fill(); | |
82 ctx.restore(); | |
83 | |
84 imageData = ctx.getImageData(98, 98, 1, 1); | |
85 imgdata = imageData.data; | |
86 shouldBe("imgdata[0]", "0"); | |
87 shouldBe("imgdata[1]", "128"); | |
88 shouldBe("imgdata[2]", "0"); | |
89 | |
90 debug("The path object should not be updated on the non-invertible CTM state."); | |
91 debug("resetTransform should restore the path object just before CTM became non-
invertible."); | |
92 ctx.save(); | |
93 ctx.fillStyle = 'red'; | |
94 ctx.fillRect(0, 0, 100, 100); | |
95 ctx.beginPath(); | |
96 ctx.moveTo(0, 0); | |
97 ctx.lineTo(100, 0); | |
98 ctx.lineTo(100, 50); | |
99 ctx.scale(0, 0); | |
100 ctx.lineTo(100, 100); | |
101 ctx.resetTransform(); | |
102 ctx.lineTo(0, 100); | |
103 ctx.fillStyle = 'green'; | |
104 ctx.fill(); | |
105 ctx.restore(); | |
106 | |
107 imageData = ctx.getImageData(98, 98, 1, 1); | |
108 imgdata = imageData.data; | |
109 shouldBe("imgdata[0]", "255"); | |
110 shouldBe("imgdata[1]", "0"); | |
111 shouldBe("imgdata[2]", "0"); | |
112 | |
113 imageData = ctx.getImageData(98, 48, 1, 1); | |
114 imgdata = imageData.data; | |
115 shouldBe("imgdata[0]", "0"); | |
116 shouldBe("imgdata[1]", "128"); | |
117 shouldBe("imgdata[2]", "0"); | |
OLD | NEW |