234 lines
7.9 KiB
HTML
234 lines
7.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 that getting color properties from a CanvasRenderingContext2D returns properly formatted values.");
|
|
|
|
ctx = document.createElement('canvas').getContext('2d');
|
|
|
|
function trySettingStrokeStyle(value) {
|
|
ctx.strokeStyle = '#666';
|
|
ctx.strokeStyle = value;
|
|
return ctx.strokeStyle;
|
|
}
|
|
|
|
function trySettingFillStyle(value) {
|
|
ctx.fillStyle = '#666';
|
|
ctx.fillStyle = value;
|
|
return ctx.fillStyle;
|
|
}
|
|
|
|
function trySettingShadowColor(value) {
|
|
ctx.shadowColor = '#666';
|
|
ctx.shadowColor = value;
|
|
return ctx.shadowColor;
|
|
}
|
|
|
|
function trySettingColor(value, expected) {
|
|
shouldBe("trySettingStrokeStyle(" + value + ")", expected);
|
|
shouldBe("trySettingFillStyle(" + value + ")", expected);
|
|
shouldBe("trySettingShadowColor(" + value + ")", expected);
|
|
}
|
|
|
|
function trySettingStrokeColorWithSetter(value) {
|
|
ctx.strokeStyle = '#666';
|
|
ctx.setStrokeColor(value);
|
|
return ctx.strokeStyle;
|
|
}
|
|
|
|
function trySettingFillColorWithSetter(value) {
|
|
ctx.fillStyle = '#666';
|
|
ctx.setFillColor(value);
|
|
return ctx.fillStyle;
|
|
}
|
|
|
|
function trySettingShadowWithSetter(value) {
|
|
ctx.shadowColor = '#666';
|
|
ctx.setShadow(0, 0, 0, value);
|
|
return ctx.shadowColor;
|
|
}
|
|
|
|
function trySettingColorWithSetter(value, expected) {
|
|
shouldBe("trySettingStrokeColorWithSetter(" + value + ")", expected);
|
|
shouldBe("trySettingFillColorWithSetter(" + value + ")", expected);
|
|
shouldBe("trySettingShadowWithSetter(" + value + ")", expected);
|
|
}
|
|
|
|
function trySettingFillColorRGBA(r, g, b, a) {
|
|
ctx.fillStyle = '#666';
|
|
ctx.setFillColor(r, g, b, a);
|
|
return ctx.fillStyle;
|
|
}
|
|
|
|
function trySettingStrokeColorRGBA(r, g, b, a) {
|
|
ctx.strokeStyle = '#666';
|
|
ctx.setStrokeColor(r, g, b, a);
|
|
return ctx.strokeStyle;
|
|
}
|
|
|
|
function trySettingShadowRGBA(r, g, b, a) {
|
|
ctx.strokeStyle = '#666';
|
|
ctx.setStrokeColor(r, g, b, a);
|
|
return ctx.strokeStyle;
|
|
}
|
|
|
|
function trySettingRGBA(r, g, b, a, expected) {
|
|
shouldBe("trySettingFillColorRGBA(" + r + ", " + g + ", " + b + ", " + a + ")", expected);
|
|
shouldBe("trySettingStrokeColorRGBA(" + r + ", " + g + ", " + b + ", " + a + ")", expected);
|
|
shouldBe("trySettingShadowRGBA(" + r + ", " + g + ", " + b + ", " + a + ")", expected);
|
|
}
|
|
|
|
function trySettingFillColorWithOverrideAlpha(color, alpha) {
|
|
ctx.fillStyle = '#666';
|
|
ctx.setFillColor(color, alpha);
|
|
return ctx.fillStyle;
|
|
}
|
|
|
|
function trySettingStrokeColorWithOverrideAlpha(color, alpha) {
|
|
ctx.strokeStyle = '#666';
|
|
ctx.setStrokeColor(color, alpha);
|
|
return ctx.strokeStyle;
|
|
}
|
|
|
|
function trySettingShadowWithOverrideAlpha(color, alpha) {
|
|
ctx.shadowColor = '#666';
|
|
ctx.setShadow(0, 0, 0, color, alpha);
|
|
return ctx.shadowColor;
|
|
}
|
|
|
|
function trySettingColorWithOverrideAlpha(color, alpha, expected) {
|
|
shouldBe("trySettingFillColorWithOverrideAlpha(" + color + ", " + alpha + ")", expected);
|
|
shouldBe("trySettingStrokeColorWithOverrideAlpha(" + color + ", " + alpha + ")", expected);
|
|
shouldBe("trySettingShadowWithOverrideAlpha(" + color + ", " + alpha + ")", expected);
|
|
}
|
|
|
|
function trySettingFillColorGrayLevel(grayLevel) {
|
|
ctx.fillStyle = '#666';
|
|
ctx.setFillColor(grayLevel);
|
|
return ctx.fillStyle;
|
|
}
|
|
|
|
function trySettingStrokeColorGrayLevel(grayLevel) {
|
|
ctx.strokeStyle = '#666';
|
|
ctx.setStrokeColor(grayLevel);
|
|
return ctx.strokeStyle;
|
|
}
|
|
|
|
function trySettingShadowGrayLevel(grayLevel) {
|
|
ctx.shadowColor = '#666';
|
|
ctx.setShadow(0, 0, 0, grayLevel);
|
|
return ctx.shadowColor;
|
|
}
|
|
|
|
function trySettingGrayLevel(grayLevel, expected) {
|
|
shouldBe("trySettingFillColorGrayLevel(" + grayLevel + ")", expected);
|
|
shouldBe("trySettingStrokeColorGrayLevel(" + grayLevel + ")", expected);
|
|
shouldBe("trySettingShadowGrayLevel(" + grayLevel + ")", expected);
|
|
}
|
|
|
|
function trySettingFillColorGrayLevelWithAlpha(grayLevel, alpha) {
|
|
ctx.fillStyle = '#666';
|
|
ctx.setFillColor(grayLevel, alpha);
|
|
return ctx.fillStyle;
|
|
}
|
|
|
|
function trySettingStrokeColorGrayLevelWithAlpha(grayLevel, alpha) {
|
|
ctx.strokeStyle = '#666';
|
|
ctx.setStrokeColor(grayLevel, alpha);
|
|
return ctx.strokeStyle;
|
|
}
|
|
|
|
function trySettingShadowGrayLevelWithAlpha(grayLevel, alpha) {
|
|
ctx.shadowColor = '#666';
|
|
ctx.setShadow(0, 0, 0, grayLevel, alpha);
|
|
return ctx.shadowColor;
|
|
}
|
|
|
|
function trySettingGrayLevelWithAlpha(grayLevel, alpha, expected) {
|
|
shouldBe("trySettingFillColorGrayLevelWithAlpha(" + grayLevel + ", " + alpha + ")", expected);
|
|
shouldBe("trySettingStrokeColorGrayLevelWithAlpha(" + grayLevel + ", " + alpha + ")", expected);
|
|
shouldBe("trySettingShadowGrayLevelWithAlpha(" + grayLevel + ", " + alpha + ")", expected);
|
|
}
|
|
|
|
function tryClearShadowAfterSettingColor(value) {
|
|
ctx.shadowColor = value;
|
|
ctx.clearShadow();
|
|
return ctx.shadowColor;
|
|
}
|
|
|
|
function checkDefaultValue(value) {
|
|
return value;
|
|
}
|
|
|
|
shouldBe("checkDefaultValue(ctx.strokeStyle)", "'#000000'");
|
|
shouldBe("checkDefaultValue(ctx.fillStyle)", "'#000000'");
|
|
shouldBe("checkDefaultValue(ctx.shadowColor)", "'rgba(0, 0, 0, 0)'");
|
|
|
|
trySettingColorWithOverrideAlpha("'red'", 0, "'rgba(255, 0, 0, 0)'");
|
|
trySettingColorWithOverrideAlpha("'black'", 1, "'#000000'");
|
|
|
|
trySettingRGBA(0, 0, 0, 0.0, "'rgba(0, 0, 0, 0)'");
|
|
trySettingRGBA(255, 255, 255, 1.0, "'#ffffff'");
|
|
trySettingRGBA(255, 0, 0, 0.0, "'rgba(255, 0, 0, 0)'");
|
|
trySettingRGBA(255, 0, 0, 0.4, "'rgba(255, 0, 0, 0.4)'");
|
|
|
|
trySettingGrayLevel(0.0, "'#000000'");
|
|
trySettingGrayLevel(0.5, "'#808080'");
|
|
trySettingGrayLevel(1.0, "'#ffffff'");
|
|
|
|
trySettingGrayLevelWithAlpha(0.0, 0.0, "'rgba(0, 0, 0, 0)'");
|
|
trySettingGrayLevelWithAlpha(0.0, 0.4, "'rgba(0, 0, 0, 0.4)'");
|
|
trySettingGrayLevelWithAlpha(0.0, 1.0, "'#000000'");
|
|
trySettingGrayLevelWithAlpha(0.5, 0.0, "'rgba(128, 128, 128, 0)'");
|
|
trySettingGrayLevelWithAlpha(0.5, 0.4, "'rgba(128, 128, 128, 0.4)'");
|
|
trySettingGrayLevelWithAlpha(0.5, 1.0, "'#808080'");
|
|
trySettingGrayLevelWithAlpha(1.0, 0.0, "'rgba(255, 255, 255, 0)'");
|
|
trySettingGrayLevelWithAlpha(1.0, 0.4, "'rgba(255, 255, 255, 0.4)'");
|
|
trySettingGrayLevelWithAlpha(1.0, 1.0, "'#ffffff'");
|
|
|
|
trySettingColor("'transparent'", "'rgba(0, 0, 0, 0)'");
|
|
trySettingColor("'red'", "'#ff0000'");
|
|
trySettingColor("'white'", "'#ffffff'");
|
|
trySettingColor("''", "'#666666'");
|
|
trySettingColor("'RGBA(0, 0, 0, 0)'", "'rgba(0, 0, 0, 0)'");
|
|
trySettingColor("'rgba(0,255,0,1.0)'", "'#00ff00'");
|
|
trySettingColor("'rgba(1,2,3,0.4)'", "'rgba(1, 2, 3, 0.4)'");
|
|
trySettingColor("'RgB(1,2,3)'", "'#010203'");
|
|
trySettingColor("'rGbA(1,2,3,0)'", "'rgba(1, 2, 3, 0)'");
|
|
trySettingColor("true", "'#666666'");
|
|
trySettingColor("false", "'#666666'");
|
|
trySettingColor("0", "'#666666'");
|
|
trySettingColor("1", "'#666666'");
|
|
trySettingColor("-1", "'#666666'");
|
|
trySettingColor("NaN", "'#666666'");
|
|
trySettingColor("Infinity", "'#666666'");
|
|
trySettingColor("null", "'#666666'");
|
|
trySettingColor("'left'", "'#666666'");
|
|
trySettingColor("'right'", "'#666666'");
|
|
trySettingColor("'center'", "'#666666'");
|
|
trySettingColor("'border'", "'#666666'");
|
|
trySettingColor("'border-box'", "'#666666'");
|
|
trySettingColor("'content'", "'#666666'");
|
|
trySettingColor("'logical'", "'#666666'");
|
|
trySettingColor("'visual'", "'#666666'");
|
|
|
|
trySettingColorWithSetter("'transparent'", "'rgba(0, 0, 0, 0)'");
|
|
trySettingColorWithSetter("'red'", "'#ff0000'");
|
|
trySettingColorWithSetter("'white'", "'#ffffff'");
|
|
trySettingColorWithSetter("''", "'#666666'");
|
|
trySettingColorWithSetter("'RGBA(0, 0, 0, 0)'", "'rgba(0, 0, 0, 0)'");
|
|
trySettingColorWithSetter("'rgba(0,255,0,1.0)'", "'#00ff00'");
|
|
trySettingColorWithSetter("'rgba(1,2,3,0.4)'", "'rgba(1, 2, 3, 0.4)'");
|
|
trySettingColorWithSetter("'RgB(1,2,3)'", "'#010203'");
|
|
trySettingColorWithSetter("'rGbA(1,2,3,0)'", "'rgba(1, 2, 3, 0)'");
|
|
|
|
shouldBe("tryClearShadowAfterSettingColor('red')", "'rgba(0, 0, 0, 0)'");
|
|
shouldBe("tryClearShadowAfterSettingColor('rgba(0, 5, 10, 0.4)')", "'rgba(0, 0, 0, 0)'");
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|