The Tor Browser: content/canvas/test/test_canvas_path.html@6474c204b198 (annotated)

content/canvas/test/test_canvas_path.html@6474c204b198 (annotated)

content/canvas/test/test_canvas_path.html

Wed, 31 Dec 2014 06:09:35 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:09:35 +0100
changeset 0: 6474c204b198
permissions: -rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

 <!DOCTYPE HTML>
 <title>Canvas Tests</title>
 <script src="/tests/SimpleTest/SimpleTest.js"></script>
 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
 <body>
 <script>
 SimpleTest.waitForExplicitFinish();
 const Cc = SpecialPowers.Cc;
 const Cr = SpecialPowers.Cr;
 SpecialPowers.setBoolPref("canvas.path.enabled", true);
 function isPixel(ctx, x,y, c, d) {
   var pos = x + "," + y;
   var color = c[0] + "," + c[1] + "," + c[2] + "," + c[3];
     var pixel = ctx.getImageData(x, y, 1, 1);
     var pr = pixel.data[0],
         pg = pixel.data[1],
         pb = pixel.data[2],
         pa = pixel.data[3];
     ok(c[0]-d <= pr && pr <= c[0]+d &&
        c[1]-d <= pg && pg <= c[1]+d &&
        c[2]-d <= pb && pb <= c[2]+d &&
        c[3]-d <= pa && pa <= c[3]+d,
        "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+"; expected "+color+" +/- "+d);
 }
 </script>
 <p>Canvas test: test_drawClipPath_canvas</p>
 <canvas id="c1" class="output" width="100" height="100">+
 </canvas>
 <script type="text/javascript">
 function test_drawClipPath_canvas() {
   var c = document.getElementById("c1");
   var ctx = c.getContext("2d");
   var path = new Path2D();
   path.rect(0, 0, 100, 100);
   path.rect(25, 25, 50, 50);
   ctx.fillStyle = 'rgb(255,0,0)';
   ctx.beginPath();
   ctx.fillRect(0, 0, 100, 100);
   ctx.fillStyle = 'rgb(0,255,0)';
   ctx.save();
   ctx.clip(path);
   ctx.fillRect(0, 0, 100, 100);
   isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
   ctx.restore();
   ctx.fillStyle = 'rgb(255,0,0)';
   ctx.beginPath();
   ctx.fillRect(0, 0, 100, 100);
   ctx.fillStyle = 'rgb(0,255,0)';
   ctx.save();
   ctx.clip(path, 'nonzero');
   ctx.fillRect(0, 0, 100, 100);
   isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
   ctx.restore();
   ctx.fillStyle = 'rgb(255,0,0)';
   ctx.beginPath();
   ctx.fillRect(0, 0, 100, 100);
   ctx.fillStyle = 'rgb(0,255,0)';
   ctx.save();
   ctx.clip(path, 'evenodd');
   ctx.fillRect(0, 0, 100, 100);
   isPixel(ctx, 50, 50, [255, 0, 0, 255], 5);
   ctx.restore();
 }
 </script>
 <p>Canvas test: test_drawFillPath_canvas</p>
 <canvas id="c2" class="output" width="100" height="100">+
 </canvas>
 <script type="text/javascript">
 function test_drawFillPath_canvas() {
   var c = document.getElementById("c2");
   var ctx = c.getContext("2d");
   var path = new Path2D();
   path.rect(0, 0, 100, 100);
   path.rect(25, 25, 50, 50);
   ctx.fillStyle = 'rgb(255,0,0)';
   ctx.fillRect(0, 0, 100, 100);
   ctx.fillStyle = 'rgb(0,255,0)';
   ctx.fill(path);
   isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
   ctx.fillStyle = 'rgb(255,0,0)';
   ctx.fillRect(0, 0, 100, 100);
   ctx.fillStyle = 'rgb(0,255,0)';
   ctx.fill(path, 'nonzero');
   isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
   ctx.fillStyle = 'rgb(255,0,0)';
   ctx.fillRect(0, 0, 100, 100);
   ctx.fillStyle = 'rgb(0,255,0)';
   ctx.fill(path, 'evenodd');
   isPixel(ctx, 50, 50, [255, 0, 0, 255], 5);
 }
 </script>
 <p>Canvas test: test_drawStrokePath_canvas</p>
 <canvas id="c3" class="output" width="100" height="100">+
 </canvas>
 <script type="text/javascript">
 function test_drawStrokePath_canvas() {
   var c = document.getElementById("c3");
   var ctx = c.getContext("2d");
   var path = new Path2D();
   path.rect(0, 0, 100, 100);
   path.rect(25, 25, 50, 50);
   ctx.fillStyle = 'rgb(255,0,0)';
   ctx.fillRect(0, 0, 100, 100);
   ctx.strokeStyle = 'rgb(0,255,0)';
   ctx.lineWidth = 5;
   ctx.stroke(path);
   isPixel(ctx, 0, 0, [0, 255, 0, 255], 5);
   isPixel(ctx, 25, 25, [0, 255, 0, 255], 5);
   isPixel(ctx, 10, 10, [255, 0, 0, 255], 5);
 }
 </script>
 <p>Canvas test: test_large_canvas</p>
 <canvas id="c4" class="output" width="10000" height="100">+
 </canvas>
 <script type="text/javascript">
 function test_large_canvas() {
   // test paths on large canvases. On certain platforms this will
   // trigger retargeting of the backend
   var c = document.getElementById("c4");
   var ctx = c.getContext("2d");
   var path = new Path2D();
   path.rect(0, 0, 100, 100);
   path.rect(25, 25, 50, 50);
   ctx.fillStyle = 'rgb(255,0,0)';
   ctx.fillRect(0, 0, 100, 100);
   ctx.fillStyle = 'rgb(0,255,0)';
   ctx.fill(path);
   isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
   ctx.fillStyle = 'rgb(255,0,0)';
   ctx.fillRect(0, 0, 100, 100);
   ctx.fillStyle = 'rgb(0,255,0)';
   ctx.fill(path, 'nonzero');
   isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
   ctx.fillStyle = 'rgb(255,0,0)';
   ctx.fillRect(0, 0, 100, 100);
   ctx.fillStyle = 'rgb(0,255,0)';
   ctx.fill(path, 'evenodd');
   isPixel(ctx, 50, 50, [255, 0, 0, 255], 5);
 }
 </script>
 <p>Canvas test: test_isPointInPath_canvas</p>
 <canvas id="c5" class="output" width="100" height="100">+
 </canvas>
 <script type="text/javascript">
 function shouldThrow(ctx, s) {
   var _ok = false;
   try {
     eval(s);
   } catch(e) {
     _ok = true;
   }
   ok(_ok, s);
 }
 function shouldBeTrue(ctx, path, s) {
   var _ok = eval(s);
   ok(_ok, s);
 }
 function shouldBeFalse(ctx, path, s) {
   var _ok = !eval(s);
   ok(_ok, s);
 }
 function test_isPointInPath_canvas() {
   var c = document.getElementById("c5");
   var ctx = c.getContext("2d");
   var path = new Path2D();
   path.rect(0, 0, 100, 100);
   path.rect(25, 25, 50, 50);
   shouldBeTrue(ctx, path, "ctx.isPointInPath(path, 50, 50)");
   shouldBeFalse(ctx, path, "ctx.isPointInPath(path, NaN, 50)");
   shouldBeFalse(ctx, path, "ctx.isPointInPath(path, 50, NaN)");
   path = new Path2D();
   path.rect(0, 0, 100, 100);
   path.rect(25, 25, 50, 50);
   shouldBeTrue(ctx, path, "ctx.isPointInPath(path, 50, 50, 'nonzero')");
   path = new Path2D();
   path.rect(0, 0, 100, 100);
   path.rect(25, 25, 50, 50);
   shouldBeFalse(ctx, path, "ctx.isPointInPath(path, 50, 50, 'evenodd')");
   shouldThrow(ctx, "ctx.isPointInPath(null, 50, 50)");
   shouldThrow(ctx, "ctx.isPointInPath(null, 50, 50, 'nonzero')");
   shouldThrow(ctx, "ctx.isPointInPath(null, 50, 50, 'evenodd')");
   shouldThrow(ctx, "ctx.isPointInPath(path, 50, 50)");
   shouldThrow(ctx, "ctx.isPointInPath(path, 50, 50, 'nonzero')");
   shouldThrow(ctx, "ctx.isPointInPath(path, 50, 50, 'evenodd')");
   shouldThrow(ctx, "ctx.isPointInPath([], 50, 50)");
   shouldThrow(ctx, "ctx.isPointInPath([], 50, 50, 'nonzero')");
   shouldThrow(ctx, "ctx.isPointInPath([], 50, 50, 'evenodd')");
   shouldThrow(ctx, "ctx.isPointInPath({}, 50, 50)");
   shouldThrow(ctx, "ctx.isPointInPath({}, 50, 50, 'nonzero')");
   shouldThrow(ctx, "ctx.isPointInPath({}, 50, 50, 'evenodd')");
 }
 </script>
 <p>Canvas test: test_isPointInStroke_canvas</p>
 <canvas id="c6" class="output" width="100" height="100">+
 </canvas>
 <script type="text/javascript">
 function test_isPointInStroke_canvas() {
   var c = document.getElementById("c6");
   var ctx = c.getContext("2d");
   ctx.strokeStyle = '#0ff';
   var path = new Path2D();
   path.rect(20,20,100,100);
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,20,20)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,120,20)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,20,120)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,120,120)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,20)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,20,70)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,120,70)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,120)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,22,22)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,118,22)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,22,118)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,118,118)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,18)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,122,70)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,122)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,18,70)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,NaN,122)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,18,NaN)");
   shouldThrow(ctx, "ctx.isPointInStroke(null,70,20)");
   shouldThrow(ctx, "ctx.isPointInStroke([],20,70)");
   shouldThrow(ctx, "ctx.isPointInStroke({},120,70)");
   ctx.lineWidth = 10;
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,22,22)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,118,22)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,22,118)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,118,118)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,18)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,122,70)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,122)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,18,70)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,26,70)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,26)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,114)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,114,70)");
   path = new Path2D();
   path.moveTo(10,10);
   path.lineTo(110,20);
   path.lineTo(10,30);
   ctx.lineJoin = "bevel";
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,113,20)");
   ctx.miterLimit = 40.0;
   ctx.lineJoin = "miter";
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,113,20)");
   ctx.miterLimit = 2.0;
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,113,20)");
   path = new Path2D();
   path.moveTo(10,10);
   path.lineTo(110,10);
   ctx.lineCap = "butt";
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,112,10)");
   ctx.lineCap = "round";
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,112,10)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,117,10)");
   ctx.lineCap = "square";
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,112,10)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,117,10)");
   ctx.lineCap = "butt";
   ctx.setLineDash([10,10]);
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,15,10)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,25,10)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,35,10)");
   ctx.lineDashOffset = 10;
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,15,10)");
   shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,25,10)");
   shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,35,10)");
 }
 </script>
 <p>Canvas test: test_pathconstructor_canvas</p>
 <canvas id="c7" class="output" width="200" height="100">+
 </canvas>
 <script type="text/javascript">
 function test_pathconstructor_canvas() {
   var c = document.getElementById("c7");
   var ctx = c.getContext("2d");
   var p = new Path2D("M100,0L200,0L200,100L100,100z");
   ctx.fillStyle = 'blue';
   ctx.fill(p);
   isPixel(ctx, 105, 5, [0, 0, 255, 255], 0);
   isPixel(ctx, 5, 5, [0, 0, 0, 0], 0);
 }
 </script>
 <script>
 function runTests() {
  try {
   test_drawClipPath_canvas();
  } catch(e) {
   throw e;
   ok(false, "unexpected exception thrown in: test_drawClipPath_canvas");
  }
  try {
   test_drawFillPath_canvas();
  } catch(e) {
   throw e;
   ok(false, "unexpected exception thrown in: test_drawFillPath_canvas");
  }
  try {
   test_drawStrokePath_canvas();
  } catch(e) {
   throw e;
   ok(false, "unexpected exception thrown in: test_drawStrokePath_canvas");
  }
  try {
   test_large_canvas();
  } catch(e) {
   throw e;
   ok(false, "unexpected exception thrown in: test_large_canvas");
  }
  try {
   test_isPointInPath_canvas();
  } catch(e) {
   throw e;
   ok(false, "unexpected exception thrown in: test_isPointInPath_canvas");
  }
  try {
   test_isPointInStroke_canvas();
  } catch(e) {
   throw e;
   ok(false, "unexpected exception thrown in: test_isPointInStroke_canvas");
  }
  try {
   test_pathconstructor_canvas();
  } catch(e) {
   throw e;
   ok(false, "unexpected exception thrown in: test_pathconstructor_canvas");
  }
  SpecialPowers.setBoolPref("canvas.path.enabled", false);
  SimpleTest.finish();
 }
 addLoadEvent(runTests);
 // Don't leak the world via the Path2D reference to its window.
 document.all;
 window.p = new Path2D();
 </script>

The Tor Browser / annotate

content/canvas/test/test_canvas_path.html@6474c204b198 (annotated)

content/canvas/test/test_canvas_path.html