99 lines
5.0 KiB
HTML
99 lines
5.0 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
description("Test that CanvasRenderingContext2D supports the 'currentColor' value.");
|
|
|
|
canvas = document.createElement('canvas');
|
|
canvas.width = 100;
|
|
canvas.height = 100;
|
|
ctx = canvas.getContext('2d');
|
|
|
|
function attachCanvasToDocument() {
|
|
document.body.appendChild(canvas);
|
|
return document.body.parentNode != null;
|
|
}
|
|
|
|
function tryLinearGradientColor(color) {
|
|
var gradient = ctx.createLinearGradient(0, 0, 100, 100);
|
|
gradient.addColorStop(0, color);
|
|
gradient.addColorStop(1, color);
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, 100, 100);
|
|
var data = ctx.getImageData(0, 0, 1, 1).data;
|
|
return '' + data[0] + ',' + data[1] + ',' + data[2] + ',' + data[3];
|
|
}
|
|
|
|
function tryRadialGradientColor(color) {
|
|
var gradient = ctx.createRadialGradient(0, 0, 100, 100, 100, 100);
|
|
gradient.addColorStop(0, color);
|
|
gradient.addColorStop(1, color);
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, 100, 100);
|
|
var data = ctx.getImageData(0, 0, 1, 1).data;
|
|
return '' + data[0] + ',' + data[1] + ',' + data[2] + ',' + data[3];
|
|
}
|
|
|
|
// First we test with the canvas out-of-document, 'currentColor' should mean black
|
|
shouldBe("ctx.shadowColor = '#f00'; ctx.shadowColor", "'#ff0000'");
|
|
shouldBe("ctx.shadowColor = 'currentColor'; ctx.shadowColor", "'#000000'");
|
|
shouldBe("ctx.fillStyle = '#f00'; ctx.fillStyle", "'#ff0000'");
|
|
shouldBe("ctx.fillStyle = 'currentColor'; ctx.fillStyle", "'#000000'");
|
|
shouldBe("ctx.strokeStyle = '#f00'; ctx.strokeStyle", "'#ff0000'");
|
|
shouldBe("ctx.strokeStyle = 'currentColor'; ctx.strokeStyle", "'#000000'");
|
|
shouldBe("ctx.setShadow(0, 0, 0, '#f00'); ctx.shadowColor", "'#ff0000'");
|
|
shouldBe("ctx.setShadow(0, 0, 0, 'currentColor'); ctx.shadowColor", "'#000000'");
|
|
shouldBe("ctx.setShadow(0, 0, 0, '#f00', 0.0); ctx.shadowColor", "'rgba(255, 0, 0, 0)'");
|
|
shouldBe("ctx.setShadow(0, 0, 0, 'currentColor', 0.0); ctx.shadowColor", "'rgba(0, 0, 0, 0)'");
|
|
shouldBe("ctx.setStrokeColor('#f00'); ctx.strokeStyle", "'#ff0000'");
|
|
shouldBe("ctx.setStrokeColor('currentColor'); ctx.strokeStyle", "'#000000'");
|
|
shouldBe("ctx.setStrokeColor('#f00', 0.0); ctx.strokeStyle", "'rgba(255, 0, 0, 0)'");
|
|
shouldBe("ctx.setStrokeColor('currentColor', 0.0); ctx.strokeStyle", "'rgba(0, 0, 0, 0)'");
|
|
shouldBe("ctx.setFillColor('#f00'); ctx.fillStyle", "'#ff0000'");
|
|
shouldBe("ctx.setFillColor('currentColor'); ctx.fillStyle", "'#000000'");
|
|
shouldBe("ctx.setFillColor('#f00', 0.0); ctx.fillStyle", "'rgba(255, 0, 0, 0)'");
|
|
shouldBe("ctx.setFillColor('currentColor', 0.0); ctx.fillStyle", "'rgba(0, 0, 0, 0)'");
|
|
shouldBe("tryLinearGradientColor('#f00')", "'255,0,0,255'");
|
|
shouldBe("tryLinearGradientColor('currentColor')", "'0,0,0,255'");
|
|
shouldBe("tryRadialGradientColor('#f00')", "'255,0,0,255'");
|
|
shouldBe("tryRadialGradientColor('currentColor')", "'0,0,0,255'");
|
|
|
|
// Attach to the document and set the canvas's color to #123456
|
|
shouldBe("attachCanvasToDocument()", "true");
|
|
shouldBe("canvas.style.color = '#123456'; canvas.style.color", "'rgb(18, 52, 86)'");
|
|
|
|
// 'currentColor' should now mean #123456
|
|
shouldBe("ctx.shadowColor = '#f00'; ctx.shadowColor", "'#ff0000'");
|
|
shouldBe("ctx.shadowColor = 'currentColor'; ctx.shadowColor", "'#123456'");
|
|
shouldBe("ctx.fillStyle = '#f00'; ctx.fillStyle", "'#ff0000'");
|
|
shouldBe("ctx.fillStyle = 'currentColor'; ctx.fillStyle", "'#123456'");
|
|
shouldBe("ctx.strokeStyle = '#f00'; ctx.strokeStyle", "'#ff0000'");
|
|
shouldBe("ctx.strokeStyle = 'currentColor'; ctx.strokeStyle", "'#123456'");
|
|
shouldBe("ctx.setShadow(0, 0, 0, '#f00'); ctx.shadowColor", "'#ff0000'");
|
|
shouldBe("ctx.setShadow(0, 0, 0, 'currentColor'); ctx.shadowColor", "'#123456'");
|
|
shouldBe("ctx.setShadow(0, 0, 0, '#f00', 0.0); ctx.shadowColor", "'rgba(255, 0, 0, 0)'");
|
|
shouldBe("ctx.setShadow(0, 0, 0, 'currentColor', 0.0); ctx.shadowColor", "'rgba(18, 52, 86, 0)'");
|
|
shouldBe("ctx.setStrokeColor('#f00'); ctx.strokeStyle", "'#ff0000'");
|
|
shouldBe("ctx.setStrokeColor('currentColor'); ctx.strokeStyle", "'#123456'");
|
|
shouldBe("ctx.setStrokeColor('#f00', 0.0); ctx.strokeStyle", "'rgba(255, 0, 0, 0)'");
|
|
shouldBe("ctx.setStrokeColor('currentColor', 0.0); ctx.strokeStyle", "'rgba(18, 52, 86, 0)'");
|
|
shouldBe("ctx.setFillColor('#f00'); ctx.fillStyle", "'#ff0000'");
|
|
shouldBe("ctx.setFillColor('currentColor'); ctx.fillStyle", "'#123456'");
|
|
shouldBe("ctx.setFillColor('#f00', 0.0); ctx.fillStyle", "'rgba(255, 0, 0, 0)'");
|
|
shouldBe("ctx.setFillColor('currentColor', 0.0); ctx.fillStyle", "'rgba(18, 52, 86, 0)'");
|
|
shouldBe("tryLinearGradientColor('#f00')", "'255,0,0,255'");
|
|
shouldBe("tryLinearGradientColor('currentColor')", "'0,0,0,255'");
|
|
shouldBe("tryRadialGradientColor('#f00')", "'255,0,0,255'");
|
|
shouldBe("tryRadialGradientColor('currentColor')", "'0,0,0,255'");
|
|
|
|
// Last but not least, verify that we're case insensitive
|
|
shouldBe("ctx.shadowColor = '#f00'; ctx.shadowColor", "'#ff0000'");
|
|
shouldBe("ctx.shadowColor = 'CURRENTCOLOR'; ctx.shadowColor", "'#123456'");
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|