| Index: third_party/WebKit/LayoutTests/fast/canvas/set-colors.html
|
| diff --git a/third_party/WebKit/LayoutTests/fast/canvas/set-colors.html b/third_party/WebKit/LayoutTests/fast/canvas/set-colors.html
|
| index 3e9b36c8991753ad4d0c21f100a468902cdd8e31..ad74c879944feb8b939e66ba8c8c70e90e9fb067 100644
|
| --- a/third_party/WebKit/LayoutTests/fast/canvas/set-colors.html
|
| +++ b/third_party/WebKit/LayoutTests/fast/canvas/set-colors.html
|
| @@ -1,9 +1,136 @@
|
| -<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
| -<html>
|
| -<head>
|
| -<script src="../../resources/js-test.js"></script>
|
| -</head>
|
| +<script src="../../resources/testharness.js"></script>
|
| +<script src="../../resources/testharnessreport.js"></script>
|
| <body>
|
| -<script src="script-tests/set-colors.js"></script>
|
| +<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>
|
|
|