set-colors.html | Explore in Territory

<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>
chromium/third_party/blink/web_tests/fast/canvas/set-colors.html
