| <!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> |
