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 }, 'This test verifies that stroke inside a clip of the same path displays corre
ctly.'); |
| 52 |
| 53 </script> |
| 54 |
| 55 |
| 56 |
OLD | NEW |