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