| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <body> |
| <script> |
| // 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) + ")"; |
| } |
| |
| 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)"; |
| |
| function testFillStyle(fillStyleString, expectedColorString) |
| { |
| clear(); |
| context.fillStyle = "black"; |
| context.fillStyle = fillStyleString; |
| context.fillRect(0, 0, 1, 1); |
| assert_equals(pixel(), expectedColorString); |
| } |
| |
| function testFillGradient(fillStyleString, expectedColorString) |
| { |
| clear(); |
| context.fillStyle = "black"; |
| var gradient = context.createLinearGradient(0, 0, 1, 1); |
| gradient.addColorStop(0, fillStyleString); |
| gradient.addColorStop(1, fillStyleString); |
| context.fillStyle = gradient; |
| context.fillRect(0, 0, 1, 1); |
| assert_equals(pixel(), expectedColorString); |
| } |
| |
| function testStrokeStyle(fillStyleString, expectedColorString) |
| { |
| clear(); |
| context.lineWidth = 5; |
| context.strokeStyle = "black"; |
| context.strokeStyle = fillStyleString; |
| context.strokeRect(2, 2, 10, 10); |
| assert_equals(pixel(), expectedColorString); |
| } |
| |
| function testStrokeGradient(fillStyleString, expectedColorString) |
| { |
| clear(); |
| context.lineWidth = 5; |
| context.strokeStyle = "black"; |
| var gradient = context.createLinearGradient(0, 0, 1, 1); |
| gradient.addColorStop(0, fillStyleString); |
| gradient.addColorStop(1, fillStyleString); |
| context.strokeStyle = gradient; |
| context.strokeRect(2, 2, 10, 10); |
| assert_equals(pixel(), expectedColorString); |
| } |
| |
| var testFillStyleScenarios = [ |
| ['TestFillStyle 1', 'transparent', transparent], |
| ['TestFillStyle 2', 'blue', blue], |
| ['TestFillStyle 3', '#FF0000', red], |
| ['TestFillStyle 4', '#f00', red], |
| ['TestFillStyle 5', 'rgb(255, 0, 0)', red], |
| ['TestFillStyle 6', 'rgba(255, 0, 0, 1)', red], |
| ['TestFillStyle 7', 'rgba(255, 0, 0, 0.8)', translucentRed], |
| ['TestFillStyle 8', 'rgba(255, 0, 0, 0)', transparent], |
| ]; |
| |
| var testFillGradientScenarios = [ |
| ['TestFillGradient 1', 'transparent', transparent], |
| ['TestFillGradient 2', 'blue', blue], |
| ['TestFillGradient 3', '#FF0000', red], |
| ['TestFillGradient 4', '#f00', red], |
| ['TestFillGradient 5', 'rgb(255, 0, 0)', red], |
| ['TestFillGradient 6', 'rgba(255, 0, 0, 1)', red], |
| ['TestFillGradient 7', 'rgba(255, 0, 0, 0.8)', translucentRed], |
| ['TestFillGradient 8', 'rgba(255, 0, 0, 0)', transparent], |
| ]; |
| |
| var testStrokeStyleScenarios = [ |
| ['TestStrokeStyle 1', 'transparent', transparent], |
| ['TestStrokeStyle 2', 'blue', blue], |
| ['TestStrokeStyle 3', '#FF0000', red], |
| ['TestStrokeStyle 4', '#f00', red], |
| ['TestStrokeStyle 5', 'rgb(255, 0, 0)', red], |
| ['TestStrokeStyle 6', 'rgba(255, 0, 0, 1)', red], |
| ['TestStrokeStyle 7', 'rgba(255, 0, 0, 0.8)', translucentRed], |
| ['TestStrokeStyle 8', 'rgba(255, 0, 0, 0)', transparent], |
| ]; |
| |
| var testStrokeGradientScenarios = [ |
| ['TestStrokeGradient 1', 'transparent', transparent], |
| ['TestStrokeGradient 2', 'blue', blue], |
| ['TestStrokeGradient 3', '#FF0000', red], |
| ['TestStrokeGradient 4', '#f00', red], |
| ['TestStrokeGradient 5', 'rgb(255, 0, 0)', red], |
| ['TestStrokeGradient 6', 'rgba(255, 0, 0, 1)', red], |
| ['TestStrokeGradient 7', 'rgba(255, 0, 0, 0.8)', translucentRed], |
| ['TestStrokeGradient 8', 'rgba(255, 0, 0, 0)', transparent], |
| ]; |
| |
| generate_tests(testFillStyle, testFillStyleScenarios); |
| generate_tests(testFillGradient, testFillGradientScenarios); |
| generate_tests(testStrokeStyle, testStrokeStyleScenarios); |
| generate_tests(testStrokeGradient, testStrokeGradientScenarios); |
| |
| </script> |
| </body> |
| </html> |
