OLD | NEW |
| (Empty) |
1 description("Ensure correct behavior of canvas with path stroke shadow"); | |
2 | |
3 function print(message, color) | |
4 { | |
5 var paragraph = document.createElement("div"); | |
6 paragraph.appendChild(document.createTextNode(message)); | |
7 paragraph.style.fontFamily = "monospace"; | |
8 if (color) | |
9 paragraph.style.color = color; | |
10 document.getElementById("console").appendChild(paragraph); | |
11 } | |
12 | |
13 // Level of tolerance we expect of most pixel comparisons in this test. | |
14 function shouldBeAlmost(_a, _b) | |
15 { | |
16 shouldBeCloseTo(_a, _b, 2); | |
17 } | |
18 | |
19 var canvas = document.createElement('canvas'); | |
20 document.body.appendChild(canvas); | |
21 canvas.setAttribute('width', '700'); | |
22 canvas.setAttribute('height', '700'); | |
23 var ctx = canvas.getContext('2d'); | |
24 | |
25 ctx.beginPath(); | |
26 ctx.moveTo(300, 300); | |
27 ctx.lineTo(300, 50); | |
28 ctx.bezierCurveTo(200, 40, 75, 150, 30, 30); | |
29 ctx.quadraticCurveTo(250, 75, 50, 300); | |
30 ctx.shadowOffsetX = 350; | |
31 ctx.shadowColor = 'rgba(255, 20, 0, 0.5)'; | |
32 ctx.shadowBlur = 0; | |
33 ctx.strokeStyle = 'rgba(0, 0, 255, 1)'; | |
34 ctx.lineWidth = 30; | |
35 ctx.closePath(); | |
36 ctx.stroke(); | |
37 | |
38 ctx.beginPath(); | |
39 ctx.moveTo(300,650); | |
40 ctx.lineTo(300,400); | |
41 ctx.bezierCurveTo(200, 390, 75, 500, 30, 380); | |
42 ctx.quadraticCurveTo(250, 425, 50, 650); | |
43 ctx.shadowOffsetX = 350; | |
44 ctx.shadowColor = 'rgba(255, 0, 0, 0.5)'; | |
45 ctx.shadowBlur = 30; | |
46 ctx.strokeStyle = 'rgba(0, 0, 255, 1)'; | |
47 ctx.lineWidth = 30; | |
48 ctx.closePath(); | |
49 ctx.stroke(); | |
50 | |
51 var imageData, data; | |
52 | |
53 // Verify solid shadow. | |
54 imageData = ctx.getImageData(650, 300, 1, 1); | |
55 data = imageData.data; | |
56 shouldBeAlmost('data[0]', 255); | |
57 shouldBeAlmost('data[1]', 20); | |
58 shouldBeAlmost('data[2]', 0); | |
59 | |
60 imageData = ctx.getImageData(650, 50, 1, 1); | |
61 data = imageData.data; | |
62 shouldBeAlmost('data[0]', 255); | |
63 shouldBeAlmost('data[1]', 20); | |
64 shouldBeAlmost('data[2]', 0); | |
65 | |
66 imageData = ctx.getImageData(380, 30, 1, 1); | |
67 data = imageData.data; | |
68 shouldBeAlmost('data[0]', 255); | |
69 shouldBeAlmost('data[1]', 20); | |
70 shouldBeAlmost('data[2]', 0); | |
71 | |
72 imageData = ctx.getImageData(400, 40, 1, 1); | |
73 data = imageData.data; | |
74 shouldBeAlmost('data[0]', 255); | |
75 shouldBeAlmost('data[1]', 20); | |
76 shouldBeAlmost('data[2]', 0); | |
77 | |
78 // Verify blurry shadow. | |
79 imageData = ctx.getImageData(640, 640, 1, 1); | |
80 data = imageData.data; | |
81 shouldBeAlmost('data[0]', 255); | |
82 shouldBeAlmost('data[1]', 0); | |
83 shouldBeAlmost('data[2]', 0); | |
84 shouldNotBe('data[3]', '255'); | |
85 | |
86 imageData = ctx.getImageData(650, 400, 1, 1); | |
87 data = imageData.data; | |
88 shouldBeAlmost('data[0]', 255); | |
89 shouldBeAlmost('data[1]', 0); | |
90 shouldBeAlmost('data[2]', 0); | |
91 shouldNotBe('data[3]', '255'); | |
92 | |
93 imageData = ctx.getImageData(380, 380, 1, 1); | |
94 data = imageData.data; | |
95 shouldBeAlmost('data[0]', 255); | |
96 shouldBeAlmost('data[1]', 0); | |
97 shouldBeAlmost('data[2]', 0); | |
98 shouldNotBe('data[3]', '255'); | |
99 | |
100 imageData = ctx.getImageData(350, 380, 1, 1); | |
101 data = imageData.data; | |
102 shouldBeAlmost('data[0]', 255); | |
103 shouldBeAlmost('data[1]', 0); | |
104 shouldBeAlmost('data[2]', 0); | |
105 shouldNotBe('data[3]', '255'); | |
OLD | NEW |