OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 | |
3 <script src="../../resources/testharness.js"></script> | |
4 <script src="../../resources/testharnessreport.js"></script> | |
5 <canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;" ></canvas> | |
6 | |
7 <script> | |
8 | |
9 test(function() { | |
10 var c = document.getElementById("myCanvas"); | |
11 var ctx = c.getContext("2d"); | |
12 | |
13 ctx.beginPath(); | |
14 ctx.moveTo(120, 20); | |
15 ctx.lineTo(220, 120); | |
16 ctx.lineTo(120, 220); | |
17 ctx.lineTo(20, 120); | |
18 ctx.lineTo(120, 20); | |
19 ctx.closePath(); | |
20 ctx.clip(); | |
21 | |
22 ctx.lineWidth = 1; | |
23 ctx.strokeStyle="#FF0000"; | |
24 ctx.stroke(); | |
25 | |
26 // Verifies that a stroke inside a clip of the same path displays correctly. | |
27 // Some sides of the shape may be clipped-out if stroking is anti-aliased | |
28 // but not clipping, or if clipping it is not properly aligned. | |
29 // We check pixels located on the vertices and in the middle of each edge. | |
30 var pixels = [ [120, 20], [170, 70], [220, 120], [170, 170], | |
31 [120, 220], [70, 170], [20, 120], [70, 70] ]; | |
32 | |
33 // There can be false alarms if we look at the exact points (specially the | |
34 // vertices) as the anti-aliasing algorithm may find it enough to draw some | |
35 // surrounding points. Therefore, we look at a 3x3 rectangle surrounding | |
36 // each point. | |
37 for(i = 0; i < 8; i++) { | |
38 var pixelDrawn = false; | |
39 for(j = -1; j <=1; j++) { | |
40 for(k = -1; k <=1; k++) { | |
41 var colorData = ctx.getImageData(pixels[i][0] + j, pixels[i][1] + k, 1, 1).data; | |
42 if(colorData[0] == 255 && colorData[3] > 0) { | |
43 pixelDrawn = true; | |
44 } | |
45 } | |
46 } | |
47 | |
48 assert_equals(pixelDrawn, true); | |
49 } | |
50 | |
51 }, 'canvas-2d-clip-anti-aliasing should not return any error'); | |
Justin Novosad
2016/09/22 19:56:48
This string needs to be more descriptive. What is
zakerinasab
2016/09/22 20:09:24
Done.
| |
52 | |
53 </script> | |
54 | |
55 | |
56 | |
OLD | NEW |