OLD | NEW |
1 description("Test of various canvas graphics context calls for setting colors.")
; | 1 description("Test of various canvas graphics context calls for setting colors.")
; |
2 | 2 |
3 var canvas = document.createElement("canvas"); | 3 var canvas = document.createElement("canvas"); |
4 var context = canvas.getContext('2d'); | 4 var context = canvas.getContext('2d'); |
5 | 5 |
6 function clear() | 6 function clear() |
7 { | 7 { |
8 context.clearRect(0, 0, canvas.width, canvas.height); | 8 context.clearRect(0, 0, canvas.width, canvas.height); |
9 } | 9 } |
10 | 10 |
(...skipping 27 matching lines...) Expand all Loading... |
38 clear(); | 38 clear(); |
39 context.fillStyle = "black"; | 39 context.fillStyle = "black"; |
40 var gradient = context.createLinearGradient(0, 0, 1, 1); | 40 var gradient = context.createLinearGradient(0, 0, 1, 1); |
41 gradient.addColorStop(0, string); | 41 gradient.addColorStop(0, string); |
42 gradient.addColorStop(1, string); | 42 gradient.addColorStop(1, string); |
43 context.fillStyle = gradient; | 43 context.fillStyle = gradient; |
44 context.fillRect(0, 0, 1, 1); | 44 context.fillRect(0, 0, 1, 1); |
45 return pixel(); | 45 return pixel(); |
46 } | 46 } |
47 | 47 |
48 function testSetFillColor(arguments) | |
49 { | |
50 clear(); | |
51 context.fillStyle = "black"; | |
52 eval("context.setFillColor(" + arguments + ")"); | |
53 context.fillRect(0, 0, 1, 1); | |
54 return pixel(); | |
55 } | |
56 | |
57 function testStrokeStyle(string) | 48 function testStrokeStyle(string) |
58 { | 49 { |
59 clear(); | 50 clear(); |
60 context.lineWidth = 5; | 51 context.lineWidth = 5; |
61 context.strokeStyle = "black"; | 52 context.strokeStyle = "black"; |
62 context.strokeStyle = string; | 53 context.strokeStyle = string; |
63 context.strokeRect(2, 2, 10, 10); | 54 context.strokeRect(2, 2, 10, 10); |
64 return pixel(); | 55 return pixel(); |
65 } | 56 } |
66 | 57 |
67 function testStrokeGradient(string) | 58 function testStrokeGradient(string) |
68 { | 59 { |
69 clear(); | 60 clear(); |
70 context.lineWidth = 5; | 61 context.lineWidth = 5; |
71 context.strokeStyle = "black"; | 62 context.strokeStyle = "black"; |
72 var gradient = context.createLinearGradient(0, 0, 1, 1); | 63 var gradient = context.createLinearGradient(0, 0, 1, 1); |
73 gradient.addColorStop(0, string); | 64 gradient.addColorStop(0, string); |
74 gradient.addColorStop(1, string); | 65 gradient.addColorStop(1, string); |
75 context.strokeStyle = gradient; | 66 context.strokeStyle = gradient; |
76 context.strokeRect(2, 2, 10, 10); | 67 context.strokeRect(2, 2, 10, 10); |
77 return pixel(); | 68 return pixel(); |
78 } | 69 } |
79 | 70 |
80 function testSetStrokeColor(arguments) | |
81 { | |
82 clear(); | |
83 context.lineWidth = 5; | |
84 context.strokeStyle = "black"; | |
85 eval("context.setStrokeColor(" + arguments + ")"); | |
86 context.strokeRect(2, 2, 10, 10); | |
87 return pixel(); | |
88 } | |
89 | |
90 var transparent = "rgba(0, 0, 0, 0.0)"; | 71 var transparent = "rgba(0, 0, 0, 0.0)"; |
91 var red = "#ff0000"; | 72 var red = "#ff0000"; |
92 var green = "#00ff00"; | 73 var green = "#00ff00"; |
93 var blue = "#0000ff"; | 74 var blue = "#0000ff"; |
94 var white = "#ffffff"; | 75 var white = "#ffffff"; |
95 var translucentRed = "rgba(255, 0, 0, 0.8)"; | 76 var translucentRed = "rgba(255, 0, 0, 0.8)"; |
96 var translucentGreen = "rgba(0, 255, 0, 0.8)"; | 77 var translucentGreen = "rgba(0, 255, 0, 0.8)"; |
97 var translucentBlue = "rgba(0, 0, 255, 0.8)"; | 78 var translucentBlue = "rgba(0, 0, 255, 0.8)"; |
98 var translucentWhite = "rgba(255, 255, 255, 0.8)"; | 79 var translucentWhite = "rgba(255, 255, 255, 0.8)"; |
99 | 80 |
100 shouldBe("testFillStyle('transparent')", "transparent"); | 81 shouldBe("testFillStyle('transparent')", "transparent"); |
101 shouldBe("testFillStyle('blue')", "blue"); | 82 shouldBe("testFillStyle('blue')", "blue"); |
102 shouldBe("testFillStyle('#FF0000')", "red"); | 83 shouldBe("testFillStyle('#FF0000')", "red"); |
103 shouldBe("testFillStyle('#f00')", "red"); | 84 shouldBe("testFillStyle('#f00')", "red"); |
104 shouldBe("testFillStyle('rgb(255, 0, 0)')", "red"); | 85 shouldBe("testFillStyle('rgb(255, 0, 0)')", "red"); |
105 shouldBe("testFillStyle('rgba(255, 0, 0, 1)')", "red"); | 86 shouldBe("testFillStyle('rgba(255, 0, 0, 1)')", "red"); |
106 shouldBe("testFillStyle('rgba(255, 0, 0, 0.8)')", "translucentRed"); | 87 shouldBe("testFillStyle('rgba(255, 0, 0, 0.8)')", "translucentRed"); |
107 shouldBe("testFillStyle('rgba(255, 0, 0, 0)')", "transparent"); | 88 shouldBe("testFillStyle('rgba(255, 0, 0, 0)')", "transparent"); |
108 shouldBe("testFillGradient('transparent')", "transparent"); | 89 shouldBe("testFillGradient('transparent')", "transparent"); |
109 shouldBe("testFillGradient('blue')", "blue"); | 90 shouldBe("testFillGradient('blue')", "blue"); |
110 shouldBe("testFillGradient('#FF0000')", "red"); | 91 shouldBe("testFillGradient('#FF0000')", "red"); |
111 shouldBe("testFillGradient('#f00')", "red"); | 92 shouldBe("testFillGradient('#f00')", "red"); |
112 shouldBe("testFillGradient('rgb(255, 0, 0)')", "red"); | 93 shouldBe("testFillGradient('rgb(255, 0, 0)')", "red"); |
113 shouldBe("testFillGradient('rgba(255, 0, 0, 1)')", "red"); | 94 shouldBe("testFillGradient('rgba(255, 0, 0, 1)')", "red"); |
114 shouldBe("testFillGradient('rgba(255, 0, 0, 0.8)')", "translucentRed"); | 95 shouldBe("testFillGradient('rgba(255, 0, 0, 0.8)')", "translucentRed"); |
115 shouldBe("testFillGradient('rgba(255, 0, 0, 0)')", "transparent"); | 96 shouldBe("testFillGradient('rgba(255, 0, 0, 0)')", "transparent"); |
116 shouldBe("testSetFillColor('\"blue\"')", "blue"); | |
117 shouldBe("testSetFillColor('\"#FF0000\"')", "red"); | |
118 shouldBe("testSetFillColor('\"#f00\"')", "red"); | |
119 shouldBe("testSetFillColor('\"rgb(255, 0, 0)\"')", "red"); | |
120 shouldBe("testSetFillColor('\"rgba(255, 0, 0, 1)\"')", "red"); | |
121 shouldBe("testSetFillColor('\"rgba(255, 0, 0, 0.8)\"')", "translucentRed"); | |
122 shouldBe("testSetFillColor('\"rgba(255, 0, 0, 0)\"')", "transparent"); | |
123 shouldBe("testSetFillColor('\"blue\", 0.8')", "translucentBlue"); | |
124 shouldBe("testSetFillColor('1')", "white"); | |
125 shouldBe("testSetFillColor('1, 0.8')", "translucentWhite"); | |
126 shouldBe("testSetFillColor('0, 1, 0, 1')", "green"); | |
127 shouldBe("testSetFillColor('0, 1, 0, 0.8')", "translucentGreen"); | |
128 shouldBe("testSetFillColor('0, 0, 0, 1, 1')", "'#1a1a1a'"); //
This test is expected to fail on older versions of Mac OS X. | |
129 shouldBe("testSetFillColor('0, 0, 0, 1, 0.8')", "'rgba(25, 25, 25, 0.8)'"); //
Ditto. | |
130 shouldBe("testSetFillColor('0, 0, 0, 1, 0')", "transparent"); | |
131 shouldBe("testStrokeStyle('transparent')", "transparent"); | 97 shouldBe("testStrokeStyle('transparent')", "transparent"); |
132 shouldBe("testStrokeStyle('blue')", "blue"); | 98 shouldBe("testStrokeStyle('blue')", "blue"); |
133 shouldBe("testStrokeStyle('#FF0000')", "red"); | 99 shouldBe("testStrokeStyle('#FF0000')", "red"); |
134 shouldBe("testStrokeStyle('#f00')", "red"); | 100 shouldBe("testStrokeStyle('#f00')", "red"); |
135 shouldBe("testStrokeStyle('rgb(255, 0, 0)')", "red"); | 101 shouldBe("testStrokeStyle('rgb(255, 0, 0)')", "red"); |
136 shouldBe("testStrokeStyle('rgba(255, 0, 0, 1)')", "red"); | 102 shouldBe("testStrokeStyle('rgba(255, 0, 0, 1)')", "red"); |
137 shouldBe("testStrokeStyle('rgba(255, 0, 0, 0.8)')", "translucentRed"); | 103 shouldBe("testStrokeStyle('rgba(255, 0, 0, 0.8)')", "translucentRed"); |
138 shouldBe("testStrokeStyle('rgba(255, 0, 0, 0)')", "transparent"); | 104 shouldBe("testStrokeStyle('rgba(255, 0, 0, 0)')", "transparent"); |
139 shouldBe("testStrokeGradient('transparent')", "transparent"); | 105 shouldBe("testStrokeGradient('transparent')", "transparent"); |
140 shouldBe("testStrokeGradient('blue')", "blue"); | 106 shouldBe("testStrokeGradient('blue')", "blue"); |
141 shouldBe("testStrokeGradient('#FF0000')", "red"); | 107 shouldBe("testStrokeGradient('#FF0000')", "red"); |
142 shouldBe("testStrokeGradient('#f00')", "red"); | 108 shouldBe("testStrokeGradient('#f00')", "red"); |
143 shouldBe("testStrokeGradient('rgb(255, 0, 0)')", "red"); | 109 shouldBe("testStrokeGradient('rgb(255, 0, 0)')", "red"); |
144 shouldBe("testStrokeGradient('rgba(255, 0, 0, 1)')", "red"); | 110 shouldBe("testStrokeGradient('rgba(255, 0, 0, 1)')", "red"); |
145 shouldBe("testStrokeGradient('rgba(255, 0, 0, 0.8)')", "translucentRed"); | 111 shouldBe("testStrokeGradient('rgba(255, 0, 0, 0.8)')", "translucentRed"); |
146 shouldBe("testStrokeGradient('rgba(255, 0, 0, 0)')", "transparent"); | 112 shouldBe("testStrokeGradient('rgba(255, 0, 0, 0)')", "transparent"); |
147 shouldBe("testSetStrokeColor('\"blue\"')", "blue"); | |
148 shouldBe("testSetStrokeColor('\"#FF0000\"')", "red"); | |
149 shouldBe("testSetStrokeColor('\"#f00\"')", "red"); | |
150 shouldBe("testSetStrokeColor('\"rgb(255, 0, 0)\"')", "red"); | |
151 shouldBe("testSetStrokeColor('\"rgba(255, 0, 0, 1)\"')", "red"); | |
152 shouldBe("testSetStrokeColor('\"rgba(255, 0, 0, 0.8)\"')", "translucentRed"); | |
153 shouldBe("testSetStrokeColor('\"rgba(255, 0, 0, 0)\"')", "transparent"); | |
154 shouldBe("testSetStrokeColor('\"blue\", 0.8')", "translucentBlue"); | |
155 shouldBe("testSetStrokeColor('1')", "white"); | |
156 shouldBe("testSetStrokeColor('1, 0.8')", "translucentWhite"); | |
157 shouldBe("testSetStrokeColor('0, 1, 0, 1')", "green"); | |
158 shouldBe("testSetStrokeColor('0, 1, 0, 0.8')", "translucentGreen"); | |
159 shouldBe("testSetStrokeColor('0, 0, 0, 1, 1')", "'#1a1a1a'"); /
/ This test is expected to fail on older versions of Mac OS X. | |
160 shouldBe("testSetStrokeColor('0, 0, 0, 1, 0.8')", "'rgba(25, 25, 25, 0.8)'"); /
/ Ditto. | |
161 shouldBe("testSetStrokeColor('0, 0, 0, 1, 0')", "transparent"); | |
OLD | NEW |