third_party/WebKit/LayoutTests/fast/canvas/canvas-ellipse-zero-lineto.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head></head>
   4 <body>
   5 <canvas id="mycanvas" width="400" height="400"></canvas>
   6 <script src="../../resources/js-test.js"></script>
   7 <script>
   8 description("This tests checks that ellipse can draw lines correctly in edge cases.");
   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]", "255");
 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]", "255");
 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, 124, 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, 154, 1, 1);
 309 shouldBe("imageData.data[1]", "0");
 310
 311 </script>
 312 </body>
 313 </html>