blob: 6434cc8a159cd2b07b327d96f269c83ed15b1067 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<canvas id="canvas">
<script>
description("Test case for bug 39168. This tests the CSS color parsing code using &lt;canvas&gt;.");
function log(message) {
var console = document.getElementById("console");
console.appendChild(document.createTextNode(message));
console.appendChild(document.createElement("BR"));
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function shouldSuccessfullyParse(color) {
ctx.fillStyle = "#f00";
ctx.fillStyle = color;
// Check that there is no red.
if (ctx.fillStyle.match(/^#(?!(FF0000|ff0000|f00)$)/) || ctx.fillStyle !== "rgb(255, 0, 0)")
testPassed("Setting color to " + color + " was successfully set.");
else
testFailed("Setting color to " + color + " was not set but should!");
}
function shouldNotSuccessfullyParse(color) {
ctx.fillStyle = "#0f0";
ctx.fillStyle = color;
// Check that the color is still green.
if (ctx.fillStyle.match(/^#(00FF00|00ff00|0f0)$/) || ctx.fillStyle === "rgb(0, 255, 0)")
testPassed("Setting color to " + color + " was not set (as expected).");
else
testFailed("Setting color to " + color + " was successfully set but should not!");
}
// Taken from CSS 3 color.
var deprecatedSystemColors = [
"ActiveBorder",
"ActiveCaption",
"AppWorkspace",
"Background",
"ButtonFace",
"ButtonHighlight",
"ButtonShadow",
"ButtonText",
"CaptionText",
"GrayText",
"Highlight",
"HighlightText",
"InactiveBorder",
"InactiveCaption",
"InactiveCaptionText",
"InfoBackground",
"InfoText",
"Menu",
"MenuText",
"Scrollbar",
"ThreeDDarkShadow",
"ThreeDFace",
"ThreeDHighlight",
"ThreeDLightShadow",
"ThreeDShadow",
"Window",
"WindowFrame",
"WindowText"
];
// Valid values passed in color matching.
for (var i = 0; i < deprecatedSystemColors.length; ++i) {
shouldSuccessfullyParse(deprecatedSystemColors[i]);
shouldSuccessfullyParse(deprecatedSystemColors[i].toLowerCase());
}
// Taken from CSS 3 color.
var svgColors = [
"aliceblue",
"antiquewhite",
"aqua",
"aquamarine",
"azure",
"beige",
"bisque",
"black",
"blanchedalmond",
"blue",
"blueviolet",
"brown",
"burlywood",
"cadetblue",
"chartreuse",
"chocolate",
"coral",
"cornflowerblue",
"cornsilk",
"crimson",
"cyan",
"darkblue",
"darkcyan",
"darkgoldenrod",
"darkgray",
"darkgreen",
"darkgrey",
"darkkhaki",
"darkmagenta",
"darkolivegreen",
"darkorange",
"darkorchid",
"darkred",
"darksalmon",
"darkseagreen",
"darkslateblue",
"darkslategray",
"darkslategrey",
"darkturquoise",
"darkviolet",
"deeppink",
"deepskyblue",
"dimgray",
"dimgrey",
"dodgerblue",
"firebrick",
"floralwhite",
"forestgreen",
"fuchsia",
"gainsboro",
"ghostwhite",
"gold",
"goldenrod",
"gray",
"green",
"greenyellow",
"grey",
"honeydew",
"hotpink",
"indianred",
"indigo",
"ivory",
"khaki",
"lavender",
"lavenderblush",
"lawngreen",
"lemonchiffon",
"lightblue",
"lightcoral",
"lightcyan",
"lightgoldenrodyellow",
"lightgray",
"lightgreen",
"lightgrey",
"lightpink",
"lightsalmon",
"lightseagreen",
"lightskyblue",
"lightslategray",
"lightslategrey",
"lightsteelblue",
"lightyellow",
"lime",
"limegreen",
"linen",
"magenta",
"maroon",
"mediumaquamarine",
"mediumblue",
"mediumorchid",
"mediumpurple",
"mediumseagreen",
"mediumslateblue",
"mediumspringgreen",
"mediumturquoise",
"mediumvioletred",
"midnightblue",
"mintcream",
"mistyrose",
"moccasin",
"navajowhite",
"navy",
"oldlace",
"olive",
"olivedrab",
"orange",
"orangered",
"orchid",
"palegoldenrod",
"palegreen",
"paleturquoise",
"palevioletred",
"papayawhip",
"peachpuff",
"peru",
"pink",
"plum",
"powderblue",
"purple",
// We do not test red.
"rosybrown",
"royalblue",
"saddlebrown",
"salmon",
"sandybrown",
"seagreen",
"seashell",
"sienna",
"silver",
"skyblue",
"slateblue",
"slategray",
"slategrey",
"snow",
"springgreen",
"steelblue",
"tan",
"teal",
"thistle",
"tomato",
"turquoise",
"violet",
"wheat",
"white",
"whitesmoke",
"yellow",
"yellowgreen"
];
// Valid values passed in color matching.
for (var i = 0; i < svgColors.length; ++i)
shouldSuccessfullyParse(svgColors[i]);
shouldSuccessfullyParse("#0f0");
shouldSuccessfullyParse("hsl(120, 100%, 50%)"); // Green HSL
// Invalid values.
shouldNotSuccessfullyParse("foobar");
shouldNotSuccessfullyParse("counter(foobar)");
shouldNotSuccessfullyParse("url(http://127.0.0.1:8080/)");
shouldNotSuccessfullyParse("inherited");
shouldNotSuccessfullyParse("#100%");
shouldNotSuccessfullyParse("#100px");
shouldNotSuccessfullyParse('-webkit-var("test")');
shouldNotSuccessfullyParse('left');
shouldNotSuccessfullyParse('right');
shouldNotSuccessfullyParse('center');
shouldNotSuccessfullyParse('border');
shouldNotSuccessfullyParse('border');
shouldNotSuccessfullyParse('content');
shouldNotSuccessfullyParse('logical');
shouldNotSuccessfullyParse('visual');
</script>
<script src="../../resources/js-test-post.js"></script>
</html>