1 description("Ensure correct behavior of canvas with strokeRect using a gradient strokeStyle and a shadow");
3 function print(message, color)
5 var paragraph = document.createElement("div");
6 paragraph.appendChild(document.createTextNode(message));
7 paragraph.style.fontFamily = "monospace";
9 paragraph.style.color = color;
10 document.getElementById("console").appendChild(paragraph);
13 function shouldBeAround(a, b)
22 if (Math.abs(evalA - b) < 15)
23 print("PASS " + a + " is around " + b , "green")
25 print("FAIL " + a + " is not around " + b + " (actual: " + evalA + ")", "red");
28 var canvas = document.createElement('canvas');
29 document.body.appendChild(canvas);
30 canvas.setAttribute('width', '600');
31 canvas.setAttribute('height', '1100');
32 var ctx = canvas.getContext('2d');
34 var gradient = ctx.createLinearGradient(0, 0, 300, 0);
35 gradient.addColorStop(0, 'rgba(0, 0, 255, 0.5)');
36 gradient.addColorStop(1, 'rgba(0, 0, 255, 0.5)');
39 ctx.strokeStyle = gradient;
40 ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
41 ctx.shadowOffsetX = 250;
48 ctx.strokeRect(50, 50, side, side);
52 ctx.strokeRect(50, 300, side, side);
54 ctx.rotate(Math.PI / 2);
56 // Rotated alpha shadow.
58 ctx.strokeRect(550, -250, side, side);
60 // Rotated blurry shadow.
62 ctx.strokeRect(800, -250, side, side);
67 ctx.fillStyle = 'black';
69 function test(alphaTestFunction, x, y, r, g, b, a) {
71 imageData = ctx.getImageData(x, y, 1, 1);
72 data = imageData.data;
73 // Test pixel color components.
74 shouldBe('data[0]', r+'');
75 shouldBe('data[1]', g+'');
76 shouldBe('data[2]', b+'');
77 alphaTestFunction('data[3]', a+'');
79 ctx.fillRect(x, y, 3, 3);
82 print('Verifying alpha shadow...');
83 test(shouldBe, 400, 150, 0, 0, 0, 0);
85 test(shouldBe, 400, 75, 0, 0, 0, 0);
86 test(shouldBe, 400, 225, 0, 0, 0, 0);
87 test(shouldBe, 325, 150, 0, 0, 0, 0);
88 test(shouldBe, 475, 150, 0, 0, 0, 0);
90 test(shouldBeAround, 400, 50, 255, 0, 0, 64);
91 test(shouldBeAround, 500, 150, 255, 0, 0, 64);
92 test(shouldBeAround, 400, 250, 255, 0, 0, 64);
93 test(shouldBeAround, 300, 150, 255, 0, 0, 64);
95 test(shouldBe, 400, 25, 0, 0, 0, 0);
96 test(shouldBe, 525, 150, 0, 0, 0, 0);
97 test(shouldBe, 400, 275, 0, 0, 0, 0);
98 test(shouldBe, 275, 150, 0, 0, 0, 0);
101 print('Verifying blurry shadow...');
102 test(shouldBe, 400, 400, 0, 0, 0, 0);
104 test(shouldBe, 400, 325, 0, 0, 0, 0);
105 test(shouldBe, 475, 400, 0, 0, 0, 0);
106 test(shouldBe, 400, 475, 0, 0, 0, 0);
107 test(shouldBe, 325, 400, 0, 0, 0, 0);
109 test(shouldBeAround, 400, 300, 255, 0, 0, 64);
110 test(shouldBeAround, 400, 500, 255, 0, 0, 64);
111 test(shouldBeAround, 300, 400, 255, 0, 0, 64);
112 test(shouldBeAround, 500, 400, 255, 0, 0, 64);
114 test(shouldBe, 525, 400, 0, 0, 0, 0);
115 test(shouldBe, 275, 400, 0, 0, 0, 0);
118 print('Verifying rotated alpha shadow...');
119 test(shouldBe, 400, 650, 0, 0, 0, 0);
121 test(shouldBe, 400, 575, 0, 0, 0, 0);
122 test(shouldBe, 400, 725, 0, 0, 0, 0);
123 test(shouldBe, 325, 650, 0, 0, 0, 0);
124 test(shouldBe, 475, 650, 0, 0, 0, 0);
126 test(shouldBeAround, 400, 550, 255, 0, 0, 64);
127 test(shouldBeAround, 500, 650, 255, 0, 0, 64);
128 test(shouldBeAround, 400, 750, 255, 0, 0, 64);
129 test(shouldBeAround, 300, 650, 255, 0, 0, 64);
131 test(shouldBe, 400, 525, 0, 0, 0, 0);
132 test(shouldBe, 525, 650, 0, 0, 0, 0);
133 test(shouldBe, 400, 775, 0, 0, 0, 0);
134 test(shouldBe, 275, 650, 0, 0, 0, 0);
137 print('Verifying rotated blurry shadow...');
138 test(shouldBe, 400, 900, 0, 0, 0, 0);
140 test(shouldBe, 400, 825, 0, 0, 0, 0);
141 test(shouldBe, 475, 900, 0, 0, 0, 0);
142 test(shouldBe, 400, 975, 0, 0, 0, 0);
143 test(shouldBe, 325, 900, 0, 0, 0, 0);
145 test(shouldBeAround, 400, 800, 255, 0, 0, 64);
146 test(shouldBeAround, 400, 1000, 255, 0, 0, 64);
147 test(shouldBeAround, 300, 900, 255, 0, 0, 64);
148 test(shouldBeAround, 500, 900, 255, 0, 0, 64);
150 test(shouldBe, 525, 900, 0, 0, 0, 0);
151 test(shouldBe, 275, 900, 0, 0, 0, 0);
152 test(shouldBe, 400, 1025, 0, 0, 0, 0);