1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/content/canvas/test/test_canvas_path.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,390 @@
1.4 +<!DOCTYPE HTML>
1.5 +<title>Canvas Tests</title>
1.6 +<script src="/tests/SimpleTest/SimpleTest.js"></script>
1.7 +<link rel="stylesheet" href="/tests/SimpleTest/test.css">
1.8 +<body>
1.9 +<script>
1.10 +
1.11 +SimpleTest.waitForExplicitFinish();
1.12 +const Cc = SpecialPowers.Cc;
1.13 +const Cr = SpecialPowers.Cr;
1.14 +SpecialPowers.setBoolPref("canvas.path.enabled", true);
1.15 +
1.16 +function isPixel(ctx, x,y, c, d) {
1.17 + var pos = x + "," + y;
1.18 + var color = c[0] + "," + c[1] + "," + c[2] + "," + c[3];
1.19 + var pixel = ctx.getImageData(x, y, 1, 1);
1.20 + var pr = pixel.data[0],
1.21 + pg = pixel.data[1],
1.22 + pb = pixel.data[2],
1.23 + pa = pixel.data[3];
1.24 + ok(c[0]-d <= pr && pr <= c[0]+d &&
1.25 + c[1]-d <= pg && pg <= c[1]+d &&
1.26 + c[2]-d <= pb && pb <= c[2]+d &&
1.27 + c[3]-d <= pa && pa <= c[3]+d,
1.28 + "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+"; expected "+color+" +/- "+d);
1.29 +}
1.30 +</script>
1.31 +
1.32 +<p>Canvas test: test_drawClipPath_canvas</p>
1.33 +<canvas id="c1" class="output" width="100" height="100">+
1.34 +</canvas>
1.35 +<script type="text/javascript">
1.36 +function test_drawClipPath_canvas() {
1.37 + var c = document.getElementById("c1");
1.38 + var ctx = c.getContext("2d");
1.39 +
1.40 + var path = new Path2D();
1.41 + path.rect(0, 0, 100, 100);
1.42 + path.rect(25, 25, 50, 50);
1.43 +
1.44 + ctx.fillStyle = 'rgb(255,0,0)';
1.45 + ctx.beginPath();
1.46 + ctx.fillRect(0, 0, 100, 100);
1.47 + ctx.fillStyle = 'rgb(0,255,0)';
1.48 + ctx.save();
1.49 + ctx.clip(path);
1.50 +
1.51 + ctx.fillRect(0, 0, 100, 100);
1.52 + isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
1.53 + ctx.restore();
1.54 +
1.55 + ctx.fillStyle = 'rgb(255,0,0)';
1.56 + ctx.beginPath();
1.57 + ctx.fillRect(0, 0, 100, 100);
1.58 + ctx.fillStyle = 'rgb(0,255,0)';
1.59 + ctx.save();
1.60 + ctx.clip(path, 'nonzero');
1.61 +
1.62 + ctx.fillRect(0, 0, 100, 100);
1.63 + isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
1.64 + ctx.restore();
1.65 +
1.66 + ctx.fillStyle = 'rgb(255,0,0)';
1.67 + ctx.beginPath();
1.68 + ctx.fillRect(0, 0, 100, 100);
1.69 + ctx.fillStyle = 'rgb(0,255,0)';
1.70 + ctx.save();
1.71 + ctx.clip(path, 'evenodd');
1.72 +
1.73 + ctx.fillRect(0, 0, 100, 100);
1.74 + isPixel(ctx, 50, 50, [255, 0, 0, 255], 5);
1.75 + ctx.restore();
1.76 +}
1.77 +</script>
1.78 +
1.79 +<p>Canvas test: test_drawFillPath_canvas</p>
1.80 +<canvas id="c2" class="output" width="100" height="100">+
1.81 +</canvas>
1.82 +<script type="text/javascript">
1.83 +function test_drawFillPath_canvas() {
1.84 + var c = document.getElementById("c2");
1.85 + var ctx = c.getContext("2d");
1.86 +
1.87 + var path = new Path2D();
1.88 + path.rect(0, 0, 100, 100);
1.89 + path.rect(25, 25, 50, 50);
1.90 +
1.91 + ctx.fillStyle = 'rgb(255,0,0)';
1.92 + ctx.fillRect(0, 0, 100, 100);
1.93 + ctx.fillStyle = 'rgb(0,255,0)';
1.94 + ctx.fill(path);
1.95 + isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
1.96 +
1.97 + ctx.fillStyle = 'rgb(255,0,0)';
1.98 + ctx.fillRect(0, 0, 100, 100);
1.99 + ctx.fillStyle = 'rgb(0,255,0)';
1.100 + ctx.fill(path, 'nonzero');
1.101 + isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
1.102 +
1.103 + ctx.fillStyle = 'rgb(255,0,0)';
1.104 + ctx.fillRect(0, 0, 100, 100);
1.105 + ctx.fillStyle = 'rgb(0,255,0)';
1.106 + ctx.fill(path, 'evenodd');
1.107 + isPixel(ctx, 50, 50, [255, 0, 0, 255], 5);
1.108 +}
1.109 +</script>
1.110 +
1.111 +<p>Canvas test: test_drawStrokePath_canvas</p>
1.112 +<canvas id="c3" class="output" width="100" height="100">+
1.113 +</canvas>
1.114 +<script type="text/javascript">
1.115 +function test_drawStrokePath_canvas() {
1.116 + var c = document.getElementById("c3");
1.117 + var ctx = c.getContext("2d");
1.118 +
1.119 + var path = new Path2D();
1.120 + path.rect(0, 0, 100, 100);
1.121 + path.rect(25, 25, 50, 50);
1.122 +
1.123 + ctx.fillStyle = 'rgb(255,0,0)';
1.124 + ctx.fillRect(0, 0, 100, 100);
1.125 + ctx.strokeStyle = 'rgb(0,255,0)';
1.126 + ctx.lineWidth = 5;
1.127 + ctx.stroke(path);
1.128 + isPixel(ctx, 0, 0, [0, 255, 0, 255], 5);
1.129 + isPixel(ctx, 25, 25, [0, 255, 0, 255], 5);
1.130 + isPixel(ctx, 10, 10, [255, 0, 0, 255], 5);
1.131 +}
1.132 +</script>
1.133 +
1.134 +<p>Canvas test: test_large_canvas</p>
1.135 +<canvas id="c4" class="output" width="10000" height="100">+
1.136 +</canvas>
1.137 +<script type="text/javascript">
1.138 +function test_large_canvas() {
1.139 + // test paths on large canvases. On certain platforms this will
1.140 + // trigger retargeting of the backend
1.141 + var c = document.getElementById("c4");
1.142 + var ctx = c.getContext("2d");
1.143 +
1.144 + var path = new Path2D();
1.145 + path.rect(0, 0, 100, 100);
1.146 + path.rect(25, 25, 50, 50);
1.147 +
1.148 + ctx.fillStyle = 'rgb(255,0,0)';
1.149 + ctx.fillRect(0, 0, 100, 100);
1.150 + ctx.fillStyle = 'rgb(0,255,0)';
1.151 + ctx.fill(path);
1.152 + isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
1.153 +
1.154 + ctx.fillStyle = 'rgb(255,0,0)';
1.155 + ctx.fillRect(0, 0, 100, 100);
1.156 + ctx.fillStyle = 'rgb(0,255,0)';
1.157 + ctx.fill(path, 'nonzero');
1.158 + isPixel(ctx, 50, 50, [0, 255, 0, 255], 5);
1.159 +
1.160 + ctx.fillStyle = 'rgb(255,0,0)';
1.161 + ctx.fillRect(0, 0, 100, 100);
1.162 + ctx.fillStyle = 'rgb(0,255,0)';
1.163 + ctx.fill(path, 'evenodd');
1.164 + isPixel(ctx, 50, 50, [255, 0, 0, 255], 5);
1.165 +}
1.166 +</script>
1.167 +
1.168 +<p>Canvas test: test_isPointInPath_canvas</p>
1.169 +<canvas id="c5" class="output" width="100" height="100">+
1.170 +</canvas>
1.171 +<script type="text/javascript">
1.172 +
1.173 +function shouldThrow(ctx, s) {
1.174 + var _ok = false;
1.175 + try {
1.176 + eval(s);
1.177 + } catch(e) {
1.178 + _ok = true;
1.179 + }
1.180 + ok(_ok, s);
1.181 +}
1.182 +
1.183 +function shouldBeTrue(ctx, path, s) {
1.184 + var _ok = eval(s);
1.185 + ok(_ok, s);
1.186 +}
1.187 +function shouldBeFalse(ctx, path, s) {
1.188 + var _ok = !eval(s);
1.189 + ok(_ok, s);
1.190 +}
1.191 +
1.192 +function test_isPointInPath_canvas() {
1.193 + var c = document.getElementById("c5");
1.194 + var ctx = c.getContext("2d");
1.195 +
1.196 + var path = new Path2D();
1.197 + path.rect(0, 0, 100, 100);
1.198 + path.rect(25, 25, 50, 50);
1.199 + shouldBeTrue(ctx, path, "ctx.isPointInPath(path, 50, 50)");
1.200 + shouldBeFalse(ctx, path, "ctx.isPointInPath(path, NaN, 50)");
1.201 + shouldBeFalse(ctx, path, "ctx.isPointInPath(path, 50, NaN)");
1.202 +
1.203 + path = new Path2D();
1.204 + path.rect(0, 0, 100, 100);
1.205 + path.rect(25, 25, 50, 50);
1.206 + shouldBeTrue(ctx, path, "ctx.isPointInPath(path, 50, 50, 'nonzero')");
1.207 +
1.208 + path = new Path2D();
1.209 + path.rect(0, 0, 100, 100);
1.210 + path.rect(25, 25, 50, 50);
1.211 + shouldBeFalse(ctx, path, "ctx.isPointInPath(path, 50, 50, 'evenodd')");
1.212 +
1.213 + shouldThrow(ctx, "ctx.isPointInPath(null, 50, 50)");
1.214 + shouldThrow(ctx, "ctx.isPointInPath(null, 50, 50, 'nonzero')");
1.215 + shouldThrow(ctx, "ctx.isPointInPath(null, 50, 50, 'evenodd')");
1.216 + shouldThrow(ctx, "ctx.isPointInPath(path, 50, 50)");
1.217 + shouldThrow(ctx, "ctx.isPointInPath(path, 50, 50, 'nonzero')");
1.218 + shouldThrow(ctx, "ctx.isPointInPath(path, 50, 50, 'evenodd')");
1.219 +
1.220 + shouldThrow(ctx, "ctx.isPointInPath([], 50, 50)");
1.221 + shouldThrow(ctx, "ctx.isPointInPath([], 50, 50, 'nonzero')");
1.222 + shouldThrow(ctx, "ctx.isPointInPath([], 50, 50, 'evenodd')");
1.223 + shouldThrow(ctx, "ctx.isPointInPath({}, 50, 50)");
1.224 + shouldThrow(ctx, "ctx.isPointInPath({}, 50, 50, 'nonzero')");
1.225 + shouldThrow(ctx, "ctx.isPointInPath({}, 50, 50, 'evenodd')");
1.226 +}
1.227 +</script>
1.228 +
1.229 +<p>Canvas test: test_isPointInStroke_canvas</p>
1.230 +<canvas id="c6" class="output" width="100" height="100">+
1.231 +</canvas>
1.232 +<script type="text/javascript">
1.233 +
1.234 +function test_isPointInStroke_canvas() {
1.235 + var c = document.getElementById("c6");
1.236 + var ctx = c.getContext("2d");
1.237 +
1.238 + ctx.strokeStyle = '#0ff';
1.239 +
1.240 + var path = new Path2D();
1.241 + path.rect(20,20,100,100);
1.242 +
1.243 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,20,20)");
1.244 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,120,20)");
1.245 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,20,120)");
1.246 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,120,120)");
1.247 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,20)");
1.248 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,20,70)");
1.249 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,120,70)");
1.250 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,120)");
1.251 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,22,22)");
1.252 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,118,22)");
1.253 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,22,118)");
1.254 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,118,118)");
1.255 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,18)");
1.256 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,122,70)");
1.257 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,122)");
1.258 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,18,70)");
1.259 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,NaN,122)");
1.260 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,18,NaN)");
1.261 +
1.262 + shouldThrow(ctx, "ctx.isPointInStroke(null,70,20)");
1.263 + shouldThrow(ctx, "ctx.isPointInStroke([],20,70)");
1.264 + shouldThrow(ctx, "ctx.isPointInStroke({},120,70)");
1.265 +
1.266 + ctx.lineWidth = 10;
1.267 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,22,22)");
1.268 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,118,22)");
1.269 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,22,118)");
1.270 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,118,118)");
1.271 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,18)");
1.272 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,122,70)");
1.273 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,70,122)");
1.274 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,18,70)");
1.275 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,26,70)");
1.276 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,26)");
1.277 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,70,114)");
1.278 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,114,70)");
1.279 +
1.280 + path = new Path2D();
1.281 + path.moveTo(10,10);
1.282 + path.lineTo(110,20);
1.283 + path.lineTo(10,30);
1.284 + ctx.lineJoin = "bevel";
1.285 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,113,20)");
1.286 +
1.287 + ctx.miterLimit = 40.0;
1.288 + ctx.lineJoin = "miter";
1.289 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,113,20)");
1.290 +
1.291 + ctx.miterLimit = 2.0;
1.292 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,113,20)");
1.293 +
1.294 + path = new Path2D();
1.295 + path.moveTo(10,10);
1.296 + path.lineTo(110,10);
1.297 + ctx.lineCap = "butt";
1.298 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,112,10)");
1.299 +
1.300 + ctx.lineCap = "round";
1.301 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,112,10)");
1.302 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,117,10)");
1.303 +
1.304 + ctx.lineCap = "square";
1.305 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,112,10)");
1.306 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,117,10)");
1.307 +
1.308 + ctx.lineCap = "butt";
1.309 + ctx.setLineDash([10,10]);
1.310 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,15,10)");
1.311 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,25,10)");
1.312 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,35,10)");
1.313 +
1.314 + ctx.lineDashOffset = 10;
1.315 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,15,10)");
1.316 + shouldBeTrue(ctx, path, "ctx.isPointInStroke(path,25,10)");
1.317 + shouldBeFalse(ctx, path, "ctx.isPointInStroke(path,35,10)");
1.318 +}
1.319 +</script>
1.320 +
1.321 +<p>Canvas test: test_pathconstructor_canvas</p>
1.322 +<canvas id="c7" class="output" width="200" height="100">+
1.323 +</canvas>
1.324 +<script type="text/javascript">
1.325 +
1.326 +function test_pathconstructor_canvas() {
1.327 + var c = document.getElementById("c7");
1.328 + var ctx = c.getContext("2d");
1.329 +
1.330 + var p = new Path2D("M100,0L200,0L200,100L100,100z");
1.331 + ctx.fillStyle = 'blue';
1.332 + ctx.fill(p);
1.333 + isPixel(ctx, 105, 5, [0, 0, 255, 255], 0);
1.334 + isPixel(ctx, 5, 5, [0, 0, 0, 0], 0);
1.335 +}
1.336 +</script>
1.337 +
1.338 +<script>
1.339 +
1.340 +function runTests() {
1.341 + try {
1.342 + test_drawClipPath_canvas();
1.343 + } catch(e) {
1.344 + throw e;
1.345 + ok(false, "unexpected exception thrown in: test_drawClipPath_canvas");
1.346 + }
1.347 + try {
1.348 + test_drawFillPath_canvas();
1.349 + } catch(e) {
1.350 + throw e;
1.351 + ok(false, "unexpected exception thrown in: test_drawFillPath_canvas");
1.352 + }
1.353 + try {
1.354 + test_drawStrokePath_canvas();
1.355 + } catch(e) {
1.356 + throw e;
1.357 + ok(false, "unexpected exception thrown in: test_drawStrokePath_canvas");
1.358 + }
1.359 + try {
1.360 + test_large_canvas();
1.361 + } catch(e) {
1.362 + throw e;
1.363 + ok(false, "unexpected exception thrown in: test_large_canvas");
1.364 + }
1.365 + try {
1.366 + test_isPointInPath_canvas();
1.367 + } catch(e) {
1.368 + throw e;
1.369 + ok(false, "unexpected exception thrown in: test_isPointInPath_canvas");
1.370 + }
1.371 + try {
1.372 + test_isPointInStroke_canvas();
1.373 + } catch(e) {
1.374 + throw e;
1.375 + ok(false, "unexpected exception thrown in: test_isPointInStroke_canvas");
1.376 + }
1.377 + try {
1.378 + test_pathconstructor_canvas();
1.379 + } catch(e) {
1.380 + throw e;
1.381 + ok(false, "unexpected exception thrown in: test_pathconstructor_canvas");
1.382 + }
1.383 + SpecialPowers.setBoolPref("canvas.path.enabled", false);
1.384 + SimpleTest.finish();
1.385 +}
1.386 +
1.387 +addLoadEvent(runTests);
1.388 +
1.389 +// Don't leak the world via the Path2D reference to its window.
1.390 +document.all;
1.391 +window.p = new Path2D();
1.392 +
1.393 +</script>
