| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <script> |
| description("Test of various canvas graphics context calls for setting colors."); |
| |
| var canvas = document.createElement("canvas"); |
| var context = canvas.getContext('2d'); |
| |
| function clear() |
| { |
| context.clearRect(0, 0, canvas.width, canvas.height); |
| } |
| |
| function hex(number) |
| { |
| var hexDigits = "0123456789abcdef"; |
| return hexDigits[number >> 4] + hexDigits[number & 0xF]; |
| } |
| |
| function pixel() |
| { |
| var imageData = context.getImageData(0, 0, 1, 1); |
| if (imageData.data[3] == 255) |
| return "#" + hex(imageData.data[0]) + hex(imageData.data[1]) + hex(imageData.data[2]); |
| if (imageData.data[3] == 0) |
| return "rgba(" + imageData.data[0] + ", " + imageData.data[1] + ", " + imageData.data[2] + ", 0.0)"; |
| return "rgba(" + imageData.data[0] + ", " + imageData.data[1] + ", " + imageData.data[2] + ", " + (imageData.data[3] / 255) + ")"; |
| } |
| |
| function testFillStyle(string) |
| { |
| clear(); |
| context.fillStyle = "black"; |
| context.fillStyle = string; |
| context.fillRect(0, 0, 1, 1); |
| return pixel(); |
| } |
| |
| function testFillGradient(string) |
| { |
| clear(); |
| context.fillStyle = "black"; |
| var gradient = context.createLinearGradient(0, 0, 1, 1); |
| gradient.addColorStop(0, string); |
| gradient.addColorStop(1, string); |
| context.fillStyle = gradient; |
| context.fillRect(0, 0, 1, 1); |
| return pixel(); |
| } |
| |
| function testSetFillColor(arguments) |
| { |
| clear(); |
| context.fillStyle = "black"; |
| eval("context.setFillColor(" + arguments + ")"); |
| context.fillRect(0, 0, 1, 1); |
| return pixel(); |
| } |
| |
| function testStrokeStyle(string) |
| { |
| clear(); |
| context.lineWidth = 5; |
| context.strokeStyle = "black"; |
| context.strokeStyle = string; |
| context.strokeRect(2, 2, 10, 10); |
| return pixel(); |
| } |
| |
| function testStrokeGradient(string) |
| { |
| clear(); |
| context.lineWidth = 5; |
| context.strokeStyle = "black"; |
| var gradient = context.createLinearGradient(0, 0, 1, 1); |
| gradient.addColorStop(0, string); |
| gradient.addColorStop(1, string); |
| context.strokeStyle = gradient; |
| context.strokeRect(2, 2, 10, 10); |
| return pixel(); |
| } |
| |
| function testSetStrokeColor(arguments) |
| { |
| clear(); |
| context.lineWidth = 5; |
| context.strokeStyle = "black"; |
| eval("context.setStrokeColor(" + arguments + ")"); |
| context.strokeRect(2, 2, 10, 10); |
| return pixel(); |
| } |
| |
| var transparent = "rgba(0, 0, 0, 0.0)"; |
| var red = "#ff0000"; |
| var green = "#00ff00"; |
| var blue = "#0000ff"; |
| var white = "#ffffff"; |
| var translucentRed = "rgba(255, 0, 0, 0.8)"; |
| var translucentGreen = "rgba(0, 255, 0, 0.8)"; |
| var translucentBlue = "rgba(0, 0, 255, 0.8)"; |
| var translucentWhite = "rgba(255, 255, 255, 0.8)"; |
| |
| shouldBe("testFillStyle('transparent')", "transparent"); |
| shouldBe("testFillStyle('blue')", "blue"); |
| shouldBe("testFillStyle('#FF0000')", "red"); |
| shouldBe("testFillStyle('#f00')", "red"); |
| shouldBe("testFillStyle('rgb(255, 0, 0)')", "red"); |
| shouldBe("testFillStyle('rgba(255, 0, 0, 1)')", "red"); |
| shouldBe("testFillStyle('rgba(255, 0, 0, 0.8)')", "translucentRed"); |
| shouldBe("testFillStyle('rgba(255, 0, 0, 0)')", "transparent"); |
| shouldBe("testFillGradient('transparent')", "transparent"); |
| shouldBe("testFillGradient('blue')", "blue"); |
| shouldBe("testFillGradient('#FF0000')", "red"); |
| shouldBe("testFillGradient('#f00')", "red"); |
| shouldBe("testFillGradient('rgb(255, 0, 0)')", "red"); |
| shouldBe("testFillGradient('rgba(255, 0, 0, 1)')", "red"); |
| shouldBe("testFillGradient('rgba(255, 0, 0, 0.8)')", "translucentRed"); |
| shouldBe("testFillGradient('rgba(255, 0, 0, 0)')", "transparent"); |
| shouldBe("testSetFillColor('\"blue\"')", "blue"); |
| shouldBe("testSetFillColor('\"#FF0000\"')", "red"); |
| shouldBe("testSetFillColor('\"#f00\"')", "red"); |
| shouldBe("testSetFillColor('\"rgb(255, 0, 0)\"')", "red"); |
| shouldBe("testSetFillColor('\"rgba(255, 0, 0, 1)\"')", "red"); |
| shouldBe("testSetFillColor('\"rgba(255, 0, 0, 0.8)\"')", "translucentRed"); |
| shouldBe("testSetFillColor('\"rgba(255, 0, 0, 0)\"')", "transparent"); |
| shouldBe("testSetFillColor('\"blue\", 0.8')", "translucentBlue"); |
| shouldBe("testSetFillColor('1')", "white"); |
| shouldBe("testSetFillColor('1, 0.8')", "translucentWhite"); |
| shouldBe("testSetFillColor('0, 1, 0, 1')", "green"); |
| shouldBe("testSetFillColor('0, 1, 0, 0.8')", "translucentGreen"); |
| shouldBe("testStrokeStyle('transparent')", "transparent"); |
| shouldBe("testStrokeStyle('blue')", "blue"); |
| shouldBe("testStrokeStyle('#FF0000')", "red"); |
| shouldBe("testStrokeStyle('#f00')", "red"); |
| shouldBe("testStrokeStyle('rgb(255, 0, 0)')", "red"); |
| shouldBe("testStrokeStyle('rgba(255, 0, 0, 1)')", "red"); |
| shouldBe("testStrokeStyle('rgba(255, 0, 0, 0.8)')", "translucentRed"); |
| shouldBe("testStrokeStyle('rgba(255, 0, 0, 0)')", "transparent"); |
| shouldBe("testStrokeGradient('transparent')", "transparent"); |
| shouldBe("testStrokeGradient('blue')", "blue"); |
| shouldBe("testStrokeGradient('#FF0000')", "red"); |
| shouldBe("testStrokeGradient('#f00')", "red"); |
| shouldBe("testStrokeGradient('rgb(255, 0, 0)')", "red"); |
| shouldBe("testStrokeGradient('rgba(255, 0, 0, 1)')", "red"); |
| shouldBe("testStrokeGradient('rgba(255, 0, 0, 0.8)')", "translucentRed"); |
| shouldBe("testStrokeGradient('rgba(255, 0, 0, 0)')", "transparent"); |
| shouldBe("testSetStrokeColor('\"blue\"')", "blue"); |
| shouldBe("testSetStrokeColor('\"#FF0000\"')", "red"); |
| shouldBe("testSetStrokeColor('\"#f00\"')", "red"); |
| shouldBe("testSetStrokeColor('\"rgb(255, 0, 0)\"')", "red"); |
| shouldBe("testSetStrokeColor('\"rgba(255, 0, 0, 1)\"')", "red"); |
| shouldBe("testSetStrokeColor('\"rgba(255, 0, 0, 0.8)\"')", "translucentRed"); |
| shouldBe("testSetStrokeColor('\"rgba(255, 0, 0, 0)\"')", "transparent"); |
| shouldBe("testSetStrokeColor('\"blue\", 0.8')", "translucentBlue"); |
| shouldBe("testSetStrokeColor('1')", "white"); |
| shouldBe("testSetStrokeColor('1, 0.8')", "translucentWhite"); |
| shouldBe("testSetStrokeColor('0, 1, 0, 1')", "green"); |
| shouldBe("testSetStrokeColor('0, 1, 0, 0.8')", "translucentGreen"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
