Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(318)

Side by Side Diff: LayoutTests/fast/canvas/canvas-arc-circumference.html

Issue 18286007: Fix edge case bugs of canvas arc. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@ellipse
Patch Set: Update layout tests Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 <canvas id="mycanvas" width="400" height="200"></canvas>
6 <script src="../js/resources/js-test-pre.js"></script>
7 <script>
8 description("This tests checks that arc can draw correct circumferences with lin eTo.");
9 var canvas = document.getElementById('mycanvas');
10 var ctx = canvas.getContext('2d');
11
12 ctx.lineWidth = 7;
13 ctx.fillStyle = 'rgb(255, 255, 255)';
14 ctx.strokeStyle = 'rgb(0, 0, 0)';
15 ctx.fillRect(0, 0, canvas.width, canvas.height);
16
17 var imageData = ctx.getImageData(1, 1, 1, 1);
18 shouldBe("imageData.data[1]", "255");
19
20 debug("Check clockwise circumference.");
21 debug(" 1. sweepAngle == 2PI");
22 ctx.save();
23 ctx.beginPath();
24 ctx.moveTo(0, 10);
25 ctx.arc(60, 50, 30, -Math.PI, Math.PI, false);
alph 2013/07/10 13:06:29 How about drawing e.g. 100 arcs in a loop to form
dshwang 2013/07/10 13:36:42 good idea! I'll do it. I hope that making bitmaps
26 ctx.lineTo(0, 90);
27 ctx.stroke();
28 ctx.restore();
29
30 imageData = ctx.getImageData(14, 29, 1, 1);
31 shouldBe("imageData.data[1]", "0");
32 imageData = ctx.getImageData(16, 68, 1, 1);
33 shouldBe("imageData.data[1]", "0");
34 imageData = ctx.getImageData(40, 26, 1, 1);
35 shouldBe("imageData.data[1]", "0");
36 imageData = ctx.getImageData(80, 28, 1, 1);
37 shouldBe("imageData.data[1]", "0");
38 imageData = ctx.getImageData(80, 72, 1, 1);
39 shouldBe("imageData.data[1]", "0");
40 imageData = ctx.getImageData(40, 74, 1, 1);
41 shouldBe("imageData.data[1]", "0");
42
43 debug(" 2. sweepAngle == PI");
44 ctx.translate(100, 0);
45 ctx.save();
46 ctx.beginPath();
47 ctx.moveTo(0, 10);
48 ctx.arc(60, 50, 30, -Math.PI, 0, false);
49 ctx.lineTo(0, 90);
50 ctx.stroke();
51 ctx.restore();
52
53 imageData = ctx.getImageData(114, 29, 1, 1);
54 shouldBe("imageData.data[1]", "0");
55 imageData = ctx.getImageData(174, 56, 1, 1);
56 shouldBe("imageData.data[1]", "0");
57 imageData = ctx.getImageData(140, 26, 1, 1);
58 shouldBe("imageData.data[1]", "0");
59 imageData = ctx.getImageData(180, 28, 1, 1);
60 shouldBe("imageData.data[1]", "0");
61 imageData = ctx.getImageData(180, 72, 1, 1);
62 shouldBe("imageData.data[1]", "255");
63 imageData = ctx.getImageData(152, 79, 1, 1);
64 shouldBe("imageData.data[1]", "255");
65
66 debug(" 3. sweepAngle > 2PI");
67 ctx.translate(100, 0);
68 ctx.save();
69 ctx.beginPath();
70 ctx.moveTo(0, 10);
71 ctx.arc(60, 50, 30, -Math.PI, Math.PI * 2.5, false);
72 ctx.lineTo(0, 90);
73 ctx.stroke();
74 ctx.restore();
75
76 imageData = ctx.getImageData(214, 29, 1, 1);
77 shouldBe("imageData.data[1]", "0");
78 imageData = ctx.getImageData(240, 83, 1, 1);
79 shouldBe("imageData.data[1]", "0");
80 imageData = ctx.getImageData(240, 26, 1, 1);
81 shouldBe("imageData.data[1]", "0");
82 imageData = ctx.getImageData(280, 28, 1, 1);
83 shouldBe("imageData.data[1]", "0");
84 imageData = ctx.getImageData(280, 72, 1, 1);
85 shouldBe("imageData.data[1]", "0");
86 imageData = ctx.getImageData(240, 74, 1, 1);
87 shouldBe("imageData.data[1]", "0");
88
89 debug(" 4. sweepAngle < 0");
90 ctx.translate(100, 0);
91 ctx.save();
92 ctx.beginPath();
93 ctx.moveTo(0, 10);
94 ctx.arc(60, 50, 30, Math.PI * 1.5, -Math.PI, false);
95 ctx.lineTo(0, 90);
96 ctx.stroke();
97 ctx.restore();
98
99 imageData = ctx.getImageData(336, 16, 1, 1);
100 shouldBe("imageData.data[1]", "0");
101 imageData = ctx.getImageData(316, 68, 1, 1);
102 shouldBe("imageData.data[1]", "0");
103 imageData = ctx.getImageData(340, 26, 1, 1);
104 shouldBe("imageData.data[1]", "255");
105 imageData = ctx.getImageData(380, 28, 1, 1);
106 shouldBe("imageData.data[1]", "0");
107 imageData = ctx.getImageData(380, 72, 1, 1);
108 shouldBe("imageData.data[1]", "0");
109 imageData = ctx.getImageData(340, 74, 1, 1);
110 shouldBe("imageData.data[1]", "0");
111
112 debug("Check anticlockwise circumference.");
113 debug(" 1. sweepAngle == 2PI");
114 ctx.translate(-300, 100);
115 ctx.save();
116 ctx.beginPath();
117 ctx.moveTo(0, 10);
118 ctx.arc(60, 50, 30, Math.PI, -Math.PI, true);
119 ctx.lineTo(0, 90);
120 ctx.stroke();
121 ctx.restore();
122
123 imageData = ctx.getImageData(14, 129, 1, 1);
124 shouldBe("imageData.data[1]", "0");
125 imageData = ctx.getImageData(16, 168, 1, 1);
126 shouldBe("imageData.data[1]", "0");
127 imageData = ctx.getImageData(40, 126, 1, 1);
128 shouldBe("imageData.data[1]", "0");
129 imageData = ctx.getImageData(80, 128, 1, 1);
130 shouldBe("imageData.data[1]", "0");
131 imageData = ctx.getImageData(80, 172, 1, 1);
132 shouldBe("imageData.data[1]", "0");
133 imageData = ctx.getImageData(40, 174, 1, 1);
134 shouldBe("imageData.data[1]", "0");
135
136 debug(" 2. sweepAngle == PI");
137 ctx.translate(100, 0);
138 ctx.save();
139 ctx.beginPath();
140 ctx.moveTo(0, 10);
141 ctx.arc(60, 50, 30, Math.PI, 0, true);
142 ctx.lineTo(0, 90);
143 ctx.stroke();
144 ctx.restore();
145
146 imageData = ctx.getImageData(14, 129, 1, 1);
147 shouldBe("imageData.data[1]", "0");
148 imageData = ctx.getImageData(158, 164, 1, 1);
149 shouldBe("imageData.data[1]", "0");
150 imageData = ctx.getImageData(140, 126, 1, 1);
151 shouldBe("imageData.data[1]", "255");
152 imageData = ctx.getImageData(180, 128, 1, 1);
153 shouldBe("imageData.data[1]", "255");
154 imageData = ctx.getImageData(180, 172, 1, 1);
155 shouldBe("imageData.data[1]", "0");
156 imageData = ctx.getImageData(140, 174, 1, 1);
157 shouldBe("imageData.data[1]", "0");
158
159 debug(" 3. sweepAngle > 2PI");
160 ctx.translate(100, 0);
161 ctx.save();
162 ctx.beginPath();
163 ctx.moveTo(0, 10);
164 ctx.arc(60, 50, 30, Math.PI, Math.PI * -1.5, true);
165 ctx.lineTo(0, 90);
166 ctx.stroke();
167 ctx.restore();
168
169 imageData = ctx.getImageData(214, 129, 1, 1);
170 shouldBe("imageData.data[1]", "0");
171 imageData = ctx.getImageData(240, 183, 1, 1);
172 shouldBe("imageData.data[1]", "0");
173 imageData = ctx.getImageData(240, 126, 1, 1);
174 shouldBe("imageData.data[1]", "0");
175 imageData = ctx.getImageData(280, 128, 1, 1);
176 shouldBe("imageData.data[1]", "0");
177 imageData = ctx.getImageData(280, 172, 1, 1);
178 shouldBe("imageData.data[1]", "0");
179 imageData = ctx.getImageData(240, 174, 1, 1);
180 shouldBe("imageData.data[1]", "0");
181
182 debug(" 4. sweepAngle < 0");
183 ctx.translate(100, 0);
184 ctx.save();
185 ctx.beginPath();
186 ctx.moveTo(0, 10);
187 ctx.arc(60, 50, 30, Math.PI * -1.5, Math.PI, true);
188 ctx.lineTo(0, 90);
189 ctx.stroke();
190 ctx.restore();
191
192 imageData = ctx.getImageData(314, 129, 1, 1);
193 shouldBe("imageData.data[1]", "0");
194 imageData = ctx.getImageData(316, 168, 1, 1);
195 shouldBe("imageData.data[1]", "0");
196 imageData = ctx.getImageData(340, 126, 1, 1);
197 shouldBe("imageData.data[1]", "0");
198 imageData = ctx.getImageData(380, 128, 1, 1);
199 shouldBe("imageData.data[1]", "0");
200 imageData = ctx.getImageData(380, 172, 1, 1);
201 shouldBe("imageData.data[1]", "0");
202 imageData = ctx.getImageData(340, 174, 1, 1);
203 shouldBe("imageData.data[1]", "255");
204
205 </script>
206 <script src="../js/resources/js-test-post.js"></script>
207 </body>
208 </html>
209
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698