| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head></head> |
| 4 <body> |
| 5 <canvas id="mycanvas" width="400" height="400"></canvas> |
| 6 <script src="../js/resources/js-test-pre.js"></script> |
| 7 <script> |
| 8 description("This tests checks that ellipse can draw lines correctly in edge cas
es."); |
| 9 var canvas = document.getElementById('mycanvas'); |
| 10 var ctx = canvas.getContext('2d'); |
| 11 |
| 12 var zero = 0; |
| 13 ctx.lineWidth = 5; |
| 14 ctx.fillStyle = 'rgb(255, 255, 255)'; |
| 15 ctx.strokeStyle = 'rgb(0, 0, 0)'; |
| 16 ctx.fillRect(0, 0, canvas.width, canvas.height); |
| 17 |
| 18 var imageData = ctx.getImageData(1, 1, 1, 1); |
| 19 var data = imageData.data; |
| 20 shouldBe("imageData.data[1]", "255"); |
| 21 |
| 22 ctx.save(); |
| 23 debug("moveTo + empty ellipse (swing == 0)"); |
| 24 ctx.translate(0, 30); |
| 25 ctx.save(); |
| 26 ctx.beginPath(); |
| 27 ctx.moveTo(20, 0); |
| 28 ctx.ellipse(80, 0, 10, 20, Math.PI / 6, -Math.PI / 2, -Math.PI / 2 + zero, false
); |
| 29 ctx.stroke(); |
| 30 ctx.restore(); |
| 31 |
| 32 imageData = ctx.getImageData(23, 29, 1, 1); |
| 33 shouldBe("imageData.data[1]", "0"); |
| 34 imageData = ctx.getImageData(85, 14, 1, 1); |
| 35 shouldBe("imageData.data[1]", "0"); |
| 36 |
| 37 debug("moveTo + empty ellipse (radiusX == 0)"); |
| 38 ctx.translate(0, 30); |
| 39 ctx.save(); |
| 40 ctx.beginPath(); |
| 41 ctx.moveTo(20, 0); |
| 42 ctx.ellipse(80, 0, zero, 20, Math.PI / 6, -Math.PI / 2, Math.PI / 2, false); |
| 43 ctx.stroke(); |
| 44 ctx.restore(); |
| 45 |
| 46 imageData = ctx.getImageData(22, 60, 1, 1); |
| 47 shouldBe("imageData.data[1]", "0"); |
| 48 imageData = ctx.getImageData(86, 43, 1, 1); |
| 49 shouldBe("imageData.data[1]", "0"); |
| 50 imageData = ctx.getImageData(71, 73, 1, 1); |
| 51 shouldBe("imageData.data[1]", "0"); |
| 52 |
| 53 debug("moveTo + empty ellipse (radiusY == 0)"); |
| 54 ctx.translate(0, 30); |
| 55 ctx.save(); |
| 56 ctx.beginPath(); |
| 57 ctx.moveTo(20, 0); |
| 58 ctx.ellipse(80, 0, 10, zero, Math.PI / 6, -Math.PI / 2, Math.PI / 2, false); |
| 59 ctx.stroke(); |
| 60 ctx.restore(); |
| 61 |
| 62 imageData = ctx.getImageData(22, 90, 1, 1); |
| 63 shouldBe("imageData.data[1]", "0"); |
| 64 imageData = ctx.getImageData(79, 90, 1, 1); |
| 65 shouldBe("imageData.data[1]", "0"); |
| 66 imageData = ctx.getImageData(87, 94, 1, 1); |
| 67 shouldBe("imageData.data[1]", "0"); |
| 68 |
| 69 debug("empty ellipse (swing == 0) + lineTo"); |
| 70 ctx.translate(0, 30); |
| 71 ctx.save(); |
| 72 ctx.beginPath(); |
| 73 ctx.ellipse(20, 0, 10, 20, Math.PI / 6, -Math.PI / 2, -Math.PI / 2 + zero, false
); |
| 74 ctx.lineTo(80, 0); |
| 75 ctx.stroke(); |
| 76 ctx.restore(); |
| 77 |
| 78 imageData = ctx.getImageData(26, 101, 1, 1); |
| 79 shouldBe("imageData.data[1]", "255"); |
| 80 imageData = ctx.getImageData(32, 103, 1, 1); |
| 81 shouldBe("imageData.data[1]", "0"); |
| 82 imageData = ctx.getImageData(77, 119, 1, 1); |
| 83 shouldBe("imageData.data[1]", "0"); |
| 84 |
| 85 debug("empty ellipse (radiusX == 0) + lineTo"); |
| 86 ctx.translate(0, 30); |
| 87 ctx.save(); |
| 88 ctx.beginPath(); |
| 89 ctx.ellipse(20, 0, zero, 20, Math.PI / 6, -Math.PI / 2, Math.PI / 2, false); |
| 90 ctx.lineTo(80, 0); |
| 91 ctx.stroke(); |
| 92 ctx.restore(); |
| 93 |
| 94 imageData = ctx.getImageData(28, 135, 1, 1); |
| 95 shouldBe("imageData.data[1]", "0"); |
| 96 imageData = ctx.getImageData(11, 166, 1, 1); |
| 97 shouldBe("imageData.data[1]", "0"); |
| 98 imageData = ctx.getImageData(76, 151, 1, 1); |
| 99 shouldBe("imageData.data[1]", "0"); |
| 100 |
| 101 debug("empty ellipse (radiusY == 0) + lineTo"); |
| 102 ctx.translate(0, 30); |
| 103 ctx.save(); |
| 104 ctx.beginPath(); |
| 105 ctx.ellipse(20, 0, 10, zero, Math.PI / 6, -Math.PI / 2, Math.PI / 2, false); |
| 106 ctx.lineTo(80, 0); |
| 107 ctx.stroke(); |
| 108 ctx.restore(); |
| 109 |
| 110 imageData = ctx.getImageData(27, 183, 1, 1); |
| 111 shouldBe("imageData.data[1]", "0"); |
| 112 imageData = ctx.getImageData(21, 179, 1, 1); |
| 113 shouldBe("imageData.data[1]", "0"); |
| 114 imageData = ctx.getImageData(77, 180, 1, 1); |
| 115 shouldBe("imageData.data[1]", "0"); |
| 116 |
| 117 ctx.restore(); |
| 118 |
| 119 ctx.translate(100, 0); |
| 120 ctx.save(); |
| 121 debug("lineTo + empty ellipse (radiusX == 0) + lineTo"); |
| 122 debug(" 1. sweepAngle < PI / 2"); |
| 123 ctx.translate(0, 30); |
| 124 ctx.save(); |
| 125 ctx.beginPath(); |
| 126 ctx.lineTo(10, 0); |
| 127 ctx.ellipse(20, 0, zero, 20, Math.PI / 6, -Math.PI / 4, Math.PI / 4, false); |
| 128 ctx.lineTo(80, 0); |
| 129 ctx.stroke(); |
| 130 ctx.restore(); |
| 131 |
| 132 imageData = ctx.getImageData(110, 29, 1, 1); |
| 133 shouldBe("imageData.data[1]", "0"); |
| 134 imageData = ctx.getImageData(122, 22, 1, 1); |
| 135 shouldBe("imageData.data[1]", "0"); |
| 136 imageData = ctx.getImageData(113, 42, 1, 1); |
| 137 shouldBe("imageData.data[1]", "0"); |
| 138 imageData = ctx.getImageData(144, 38, 1, 1); |
| 139 shouldBe("imageData.data[1]", "0"); |
| 140 |
| 141 debug(" 2. sweepAngle < PI"); |
| 142 ctx.translate(0, 30); |
| 143 ctx.save(); |
| 144 ctx.beginPath(); |
| 145 ctx.lineTo(10, 0); |
| 146 ctx.ellipse(20, 0, zero, 20, Math.PI / 6, -Math.PI / 4, Math.PI / 2, false); |
| 147 ctx.lineTo(80, 0); |
| 148 ctx.stroke(); |
| 149 ctx.restore(); |
| 150 |
| 151 imageData = ctx.getImageData(122, 54, 1, 1); |
| 152 shouldBe("imageData.data[1]", "0"); |
| 153 imageData = ctx.getImageData(112, 76, 1, 1); |
| 154 shouldBe("imageData.data[1]", "0"); |
| 155 imageData = ctx.getImageData(142, 70, 1, 1); |
| 156 shouldBe("imageData.data[1]", "0"); |
| 157 |
| 158 debug(" 3. sweepAngle < 2PI"); |
| 159 ctx.translate(0, 30); |
| 160 ctx.save(); |
| 161 ctx.beginPath(); |
| 162 ctx.lineTo(10, 0); |
| 163 ctx.ellipse(20, 0, zero, 20, Math.PI / 6, -Math.PI / 4, Math.PI * 3 / 2, false); |
| 164 ctx.lineTo(80, 0); |
| 165 ctx.stroke(); |
| 166 ctx.restore(); |
| 167 |
| 168 imageData = ctx.getImageData(115, 86, 1, 1); |
| 169 shouldBe("imageData.data[1]", "0"); |
| 170 imageData = ctx.getImageData(110, 104, 1, 1); |
| 171 shouldBe("imageData.data[1]", "0"); |
| 172 imageData = ctx.getImageData(138, 77, 1, 1); |
| 173 shouldBe("imageData.data[1]", "0"); |
| 174 |
| 175 debug(" 4. sweepAngle < 4PI"); |
| 176 ctx.translate(0, 30); |
| 177 ctx.save(); |
| 178 ctx.beginPath(); |
| 179 ctx.lineTo(10, 0); |
| 180 ctx.ellipse(20, 0, zero, 20, Math.PI / 6, -Math.PI / 4, Math.PI * 2, false); |
| 181 ctx.lineTo(80, 0); |
| 182 ctx.stroke(); |
| 183 ctx.restore(); |
| 184 |
| 185 imageData = ctx.getImageData(115, 116, 1, 1); |
| 186 shouldBe("imageData.data[1]", "0"); |
| 187 imageData = ctx.getImageData(111, 136, 1, 1); |
| 188 shouldBe("imageData.data[1]", "0"); |
| 189 imageData = ctx.getImageData(127, 106, 1, 1); |
| 190 shouldBe("imageData.data[1]", "0"); |
| 191 imageData = ctx.getImageData(127, 121, 1, 1); |
| 192 shouldBe("imageData.data[1]", "0"); |
| 193 |
| 194 debug(" 5. sweepAngle > 4PI"); |
| 195 ctx.translate(0, 30); |
| 196 ctx.save(); |
| 197 ctx.beginPath(); |
| 198 ctx.lineTo(10, 0); |
| 199 ctx.ellipse(20, 0, zero, 20, Math.PI / 6, -Math.PI / 4, Math.PI * 16, false); |
| 200 ctx.lineTo(80, 0); |
| 201 ctx.stroke(); |
| 202 ctx.restore(); |
| 203 |
| 204 imageData = ctx.getImageData(115, 146, 1, 1); |
| 205 shouldBe("imageData.data[1]", "0"); |
| 206 imageData = ctx.getImageData(111, 166, 1, 1); |
| 207 shouldBe("imageData.data[1]", "0"); |
| 208 imageData = ctx.getImageData(127, 136, 1, 1); |
| 209 shouldBe("imageData.data[1]", "0"); |
| 210 imageData = ctx.getImageData(127, 151, 1, 1); |
| 211 shouldBe("imageData.data[1]", "0"); |
| 212 |
| 213 ctx.restore(); |
| 214 |
| 215 ctx.translate(100, 0); |
| 216 ctx.save(); |
| 217 debug("lineTo + empty ellipse (radiusY == 0) + lineTo"); |
| 218 debug(" 1. sweepAngle < PI / 2"); |
| 219 ctx.translate(0, 30); |
| 220 ctx.save(); |
| 221 ctx.beginPath(); |
| 222 ctx.lineTo(10, 0); |
| 223 ctx.ellipse(20, 0, 20, zero, Math.PI / 6, -Math.PI / 4, Math.PI / 4, false); |
| 224 ctx.lineTo(80, 0); |
| 225 ctx.stroke(); |
| 226 ctx.restore(); |
| 227 |
| 228 imageData = ctx.getImageData(213, 32, 1, 1); |
| 229 shouldBe("imageData.data[1]", "0"); |
| 230 imageData = ctx.getImageData(234, 39, 1, 1); |
| 231 shouldBe("imageData.data[1]", "0"); |
| 232 imageData = ctx.getImageData(240, 36, 1, 1); |
| 233 shouldBe("imageData.data[1]", "0"); |
| 234 |
| 235 debug(" 2. sweepAngle < PI"); |
| 236 ctx.translate(0, 30); |
| 237 ctx.save(); |
| 238 ctx.beginPath(); |
| 239 ctx.lineTo(10, 0); |
| 240 ctx.ellipse(20, 0, 20, zero, Math.PI / 6, -Math.PI / 4, Math.PI / 2, false); |
| 241 ctx.lineTo(80, 0); |
| 242 ctx.stroke(); |
| 243 ctx.restore(); |
| 244 |
| 245 imageData = ctx.getImageData(232, 69, 1, 1); |
| 246 shouldBe("imageData.data[1]", "0"); |
| 247 imageData = ctx.getImageData(238, 72, 1, 1); |
| 248 shouldBe("imageData.data[1]", "255"); |
| 249 imageData = ctx.getImageData(228, 65, 1, 1); |
| 250 shouldBe("imageData.data[1]", "0"); |
| 251 imageData = ctx.getImageData(242, 61, 1, 1); |
| 252 shouldBe("imageData.data[1]", "0"); |
| 253 |
| 254 debug(" 3. sweepAngle < 2PI"); |
| 255 ctx.translate(0, 30); |
| 256 ctx.save(); |
| 257 ctx.beginPath(); |
| 258 ctx.lineTo(10, 0); |
| 259 ctx.ellipse(20, 0, 20, zero, Math.PI / 6, -Math.PI / 4, Math.PI * 3 / 2, false); |
| 260 ctx.lineTo(80, 0); |
| 261 ctx.stroke(); |
| 262 ctx.restore(); |
| 263 |
| 264 imageData = ctx.getImageData(204, 82, 1, 1); |
| 265 shouldBe("imageData.data[1]", "0"); |
| 266 imageData = ctx.getImageData(234, 100, 1, 1); |
| 267 shouldBe("imageData.data[1]", "0"); |
| 268 imageData = ctx.getImageData(212, 92, 1, 1); |
| 269 shouldBe("imageData.data[1]", "0"); |
| 270 imageData = ctx.getImageData(240, 90, 1, 1); |
| 271 shouldBe("imageData.data[1]", "0"); |
| 272 |
| 273 debug(" 4. sweepAngle < 4PI"); |
| 274 ctx.translate(0, 30); |
| 275 ctx.save(); |
| 276 ctx.beginPath(); |
| 277 ctx.lineTo(10, 0); |
| 278 ctx.ellipse(20, 0, 20, zero, Math.PI / 6, -Math.PI / 4, Math.PI * 2, false); |
| 279 ctx.lineTo(80, 0); |
| 280 ctx.stroke(); |
| 281 ctx.restore(); |
| 282 |
| 283 imageData = ctx.getImageData(208, 114, 1, 1); |
| 284 shouldBe("imageData.data[1]", "0"); |
| 285 imageData = ctx.getImageData(235, 130, 1, 1); |
| 286 shouldBe("imageData.data[1]", "0"); |
| 287 imageData = ctx.getImageData(210, 120, 1, 1); |
| 288 shouldBe("imageData.data[1]", "0"); |
| 289 imageData = ctx.getImageData(252, 126, 1, 1); |
| 290 shouldBe("imageData.data[1]", "0"); |
| 291 |
| 292 debug(" 5. sweepAngle > 4PI"); |
| 293 ctx.translate(0, 30); |
| 294 ctx.save(); |
| 295 ctx.beginPath(); |
| 296 ctx.lineTo(10, 0); |
| 297 ctx.ellipse(20, 0, 20, zero, Math.PI / 6, -Math.PI / 4, Math.PI * 16, false); |
| 298 ctx.lineTo(80, 0); |
| 299 ctx.stroke(); |
| 300 ctx.restore(); |
| 301 |
| 302 imageData = ctx.getImageData(208, 144, 1, 1); |
| 303 shouldBe("imageData.data[1]", "0"); |
| 304 imageData = ctx.getImageData(235, 160, 1, 1); |
| 305 shouldBe("imageData.data[1]", "0"); |
| 306 imageData = ctx.getImageData(210, 150, 1, 1); |
| 307 shouldBe("imageData.data[1]", "0"); |
| 308 imageData = ctx.getImageData(252, 156, 1, 1); |
| 309 shouldBe("imageData.data[1]", "0"); |
| 310 |
| 311 </script> |
| 312 <script src="../js/resources/js-test-post.js"></script> |
| 313 </body> |
| 314 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 14298022:
Add support for new canvas ellipse method. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master