167 lines
5.9 KiB
HTML
167 lines
5.9 KiB
HTML
<!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>
|