256 lines
5.5 KiB
HTML
256 lines
5.5 KiB
HTML
<!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 <canvas>.");
|
|
|
|
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>
|