dom/canvas/test/test_canvas_path.html

   1 <!DOCTYPE HTML>
   2 <title>Canvas Tests</title>
   3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   4 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   5 <body>
   6 <script>
   7
   8 SimpleTest.waitForExplicitFinish();
   9 const Cc = SpecialPowers.Cc;
  10 const Cr = SpecialPowers.Cr;
  11
  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],
  17         pg = pixel.data[1],
  18         pb = pixel.data[2],
  19         pa = pixel.data[3];
  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);
  25 }
  26 </script>
  27
  28 <p>Canvas test: test_drawClipPath_canvas</p>
  29 <canvas id="c1" class="output" width="100" height="100">+
  30 </canvas>
  31 <script type="text/javascript">
  32 function test_drawClipPath_canvas() {
  33   var c = document.getElementById("c1");
  34   var ctx = c.getContext("2d");
  35
  36   var path = new Path2D();
  37   path.rect(0, 0, 100, 100);
  38   path.rect(25, 25, 50, 50);
  39
  40   ctx.fillStyle = 'rgb(255,0,0)';
  41   ctx.beginPath();
  42   ctx.fillRect(0, 0, 100, 100);
  43   ctx.fillStyle = 'rgb(0,255,0)';
  44   ctx.save();
  45   ctx.clip(path);
  46
  47   ctx.fillRect(0, 0, 100, 100);
  48   isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
  49   ctx.restore();
  50
  51   ctx.fillStyle = 'rgb(255,0,0)';
  52   ctx.beginPath();
  53   ctx.fillRect(0, 0, 100, 100);
  54   ctx.fillStyle = 'rgb(0,255,0)';
  55   ctx.save();
  56   ctx.clip(path, 'nonzero');
  57
  58   ctx.fillRect(0, 0, 100, 100);
  59   isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
  60   ctx.restore();
  61
  62   ctx.fillStyle = 'rgb(255,0,0)';
  63   ctx.beginPath();
  64   ctx.fillRect(0, 0, 100, 100);
  65   ctx.fillStyle = 'rgb(0,255,0)';
  66   ctx.save();
  67   ctx.clip(path, 'evenodd');
  68
  69   ctx.fillRect(0, 0, 100, 100);
  70   isPixel(ctx, 50, 50, [255, 0, 0, 255], 5);
  71   ctx.restore();
  72 }
  73 </script>
  74
  75 <p>Canvas test: test_drawFillPath_canvas</p>
  76 <canvas id="c2" class="output" width="100" height="100">+
  77 </canvas>
  78 <script type="text/javascript">
  79 function test_drawFillPath_canvas() {
  80   var c = document.getElementById("c2");
  81   var ctx = c.getContext("2d");
  82
  83   var path = new Path2D();
  84   path.rect(0, 0, 100, 100);
  85   path.rect(25, 25, 50, 50);
  86
  87   ctx.fillStyle = 'rgb(255,0,0)';
  88   ctx.fillRect(0, 0, 100, 100);
  89   ctx.fillStyle = 'rgb(0,255,0)';
  90   ctx.fill(path);
  91   isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
  92
  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);
  98
  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);
 104 }
 105 </script>
 106
 107 <p>Canvas test: test_drawStrokePath_canvas</p>
 108 <canvas id="c3" class="output" width="100" height="100">+
 109 </canvas>
 110 <script type="text/javascript">
 111 function test_drawStrokePath_canvas() {
 112   var c = document.getElementById("c3");
 113   var ctx = c.getContext("2d");
 114
 115   var path = new Path2D();
 116   path.rect(0, 0, 100, 100);
 117   path.rect(25, 25, 50, 50);
 118
 119   ctx.fillStyle = 'rgb(255,0,0)';
 120   ctx.fillRect(0, 0, 100, 100);
 121   ctx.strokeStyle = 'rgb(0,255,0)';
 122   ctx.lineWidth = 5;
 123   ctx.stroke(path);
 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);
 127 }
 128 </script>
 129
 130 <p>Canvas test: test_large_canvas</p>
 131 <canvas id="c4" class="output" width="10000" height="100">+
 132 </canvas>
 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");
 139
 140   var path = new Path2D();
 141   path.rect(0, 0, 100, 100);
 142   path.rect(25, 25, 50, 50);
 143
 144   ctx.fillStyle = 'rgb(255,0,0)';
 145   ctx.fillRect(0, 0, 100, 100);
 146   ctx.fillStyle = 'rgb(0,255,0)';
 147   ctx.fill(path);
 148   isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
 149
 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);
 155
 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);
 161 }
 162 </script>
 163
 164 <p>Canvas test: test_isPointInPath_canvas</p>
 165 <canvas id="c5" class="output" width="100" height="100">+
 166 </canvas>
 167 <script type="text/javascript">
 168
 169 function shouldThrow(ctx, s) {
 170   var _ok = false;
 171   try {
 172     eval(s);
 173   } catch(e) {
 174     _ok = true;
 175   }
 176   ok(_ok, s);
 177 }
 178
 179 function shouldBeTrue(ctx, path, s) {
 180   var _ok = eval(s);
 181   ok(_ok, s);
 182 }
 183 function shouldBeFalse(ctx, path, s) {
 184   var _ok = !eval(s);
 185   ok(_ok, s);
 186 }
 187
 188 function test_isPointInPath_canvas() {
 189   var c = document.getElementById("c5");
 190   var ctx = c.getContext("2d");
 191
 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)");
 198
 199   path = new Path2D();
 200   path.rect(0, 0, 100, 100);
 201   path.rect(25, 25, 50, 50);
 202   shouldBeTrue(ctx, path, "ctx.isPointInPath(path, 50, 50, 'nonzero')");
 203
 204   path = new Path2D();
 205   path.rect(0, 0, 100, 100);
 206   path.rect(25, 25, 50, 50);
 207   shouldBeFalse(ctx, path, "ctx.isPointInPath(path, 50, 50, 'evenodd')");
 208
 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')");
 215
 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')");
 222 }
 223 </script>
 224
 225 <p>Canvas test: test_isPointInStroke_canvas</p>
 226 <canvas id="c6" class="output" width="100" height="100">+
 227 </canvas>
 228 <script type="text/javascript">
 229
 230 function test_isPointInStroke_canvas() {
 231   var c = document.getElementById("c6");
 232   var ctx = c.getContext("2d");
 233
 234   ctx.strokeStyle = '#0ff';
 235
 236   var path = new Path2D();
 237   path.rect(20,20,100,100);
 238
 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)");
 257
 258   shouldThrow(ctx, "ctx.isPointInStroke(null,70,20)");
 259   shouldThrow(ctx, "ctx.isPointInStroke([],20,70)");
 260   shouldThrow(ctx, "ctx.isPointInStroke({},120,70)");
 261
 262   ctx.lineWidth = 10;
 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)");
 275
 276   path = new Path2D();
 277   path.moveTo(10,10);
 278   path.lineTo(110,20);
 279   path.lineTo(10,30);
 280   ctx.lineJoin = "bevel";
 281   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,113,20)");
 282
 283   ctx.miterLimit = 40.0;
 284   ctx.lineJoin = "miter";
 285   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,113,20)");
 286
 287   ctx.miterLimit = 2.0;
 288   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,113,20)");
 289
 290   path = new Path2D();
 291   path.moveTo(10,10);
 292   path.lineTo(110,10);
 293   ctx.lineCap = "butt";
 294   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,112,10)");
 295
 296   ctx.lineCap = "round";
 297   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,112,10)");
 298   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,117,10)");
 299
 300   ctx.lineCap = "square";
 301   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,112,10)");
 302   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,117,10)");
 303
 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)");
 309
 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)");
 314 }
 315 </script>
 316
 317 <p>Canvas test: test_pathconstructor_canvas</p>
 318 <canvas id="c7" class="output" width="200" height="100">+
 319 </canvas>
 320 <script type="text/javascript">
 321
 322 function test_pathconstructor_canvas() {
 323   var c = document.getElementById("c7");
 324   var ctx = c.getContext("2d");
 325
 326   var p = new Path2D("M100,0L200,0L200,100L100,100z");
 327   ctx.fillStyle = 'blue';
 328   ctx.fill(p);
 329   isPixel(ctx, 105, 5, [0, 0, 255, 255], 0);
 330   isPixel(ctx, 5, 5, [0, 0, 0, 0], 0);
 331
 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);
 336 }
 337 </script>
 338
 339 <p>Canvas test: test_addpath_canvas</p>
 340 <canvas id="c8" class="output" width="200" height="200">+
 341 </canvas>
 342 <script type="text/javascript">
 343
 344 function test_addpath_canvas() {
 345   var c = document.getElementById("c8");
 346   var ctx = c.getContext("2d");
 347   ctx.beginPath();
 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;
 353   p1.addPath(p2, m);
 354   ctx.fillStyle = 'yellow';
 355   ctx.fill(p1);
 356   isPixel(ctx, 0, 100, [255, 255, 0, 255], 0);
 357
 358   ctx.clearRect(0,0,200,200);
 359
 360   ctx.beginPath();
 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();
 366   m.a = 1; m.b = 0;
 367   m.c = 0; m.d = 1;
 368   m.e = 100; m.f = -100;
 369   p3.addPath(p4, m);
 370   ctx.fillStyle = 'yellow';
 371   ctx.fill(p3);
 372   isPixel(ctx, 50, 50, [255, 255, 0, 255], 0);
 373   isPixel(ctx, 150, 150, [0, 0, 0, 0], 0);
 374
 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)");
 380
 381   p5 = p5.addPath(p5);
 382 }
 383 </script>
 384
 385 <script>
 386
 387 function runTests() {
 388  try {
 389   test_drawClipPath_canvas();
 390  } catch(e) {
 391   ok(false, "unexpected exception thrown in: test_drawClipPath_canvas");
 392   throw e;
 393  }
 394  try {
 395   test_drawFillPath_canvas();
 396  } catch(e) {
 397   ok(false, "unexpected exception thrown in: test_drawFillPath_canvas");
 398   throw e;
 399  }
 400  try {
 401   test_drawStrokePath_canvas();
 402  } catch(e) {
 403   ok(false, "unexpected exception thrown in: test_drawStrokePath_canvas");
 404   throw e;
 405  }
 406  try {
 407   test_large_canvas();
 408  } catch(e) {
 409   ok(false, "unexpected exception thrown in: test_large_canvas");
 410   throw e;
 411  }
 412  try {
 413   test_isPointInPath_canvas();
 414  } catch(e) {
 415   ok(false, "unexpected exception thrown in: test_isPointInPath_canvas");
 416   throw e;
 417  }
 418  try {
 419   test_isPointInStroke_canvas();
 420  } catch(e) {
 421   ok(false, "unexpected exception thrown in: test_isPointInStroke_canvas");
 422   throw e;
 423  }
 424  try {
 425   test_pathconstructor_canvas();
 426  } catch(e) {
 427   ok(false, "unexpected exception thrown in: test_pathconstructor_canvas");
 428   throw e;
 429  }
 430  try {
 431   test_addpath_canvas();
 432  } catch(e) {
 433   ok(false, "unexpected exception thrown in: test_addpath_canvas");
 434   throw e;
 435  }
 436  SimpleTest.finish();
 437 }
 438
 439 addLoadEvent(function() {
 440   SpecialPowers.pushPrefEnv({"set":[["canvas.path.enabled", true]]}, runTests);
 441 });
 442
 443 // Don't leak the world via the Path2D reference to its window.
 444 document.all;
 445 window.p = new Path2D();
 446
 447 </script>