Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add mapping to hex codes for color keywords not recognized natively b…

…y VML. Mapping provided by Don Retzlaff.
  • Loading branch information...
commit c9a03fca724f0a0cadf1333d13c460d56ed0eaf5 1 parent fbbd13e
Jason Johnston authored
Showing with 96 additions and 8 deletions.
  1. +62 −6 sources/Color.js
  2. +2 −2 sources/Tokenizer.js
  3. +32 −0 tests/color-names.html
View
68 sources/Color.js
@@ -14,20 +14,76 @@ PIE.Color = (function() {
*/
Color.rgbaRE = /\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;
+ Color.names = {
+ "aliceblue":"#F0F8FF", "antiquewhite":"#FAEBD7", "aqua":"#00FFFF",
+ "aquamarine":"#7FFFD4", "azure":"#F0FFFF", "beige":"#F5F5DC",
+ "bisque":"#FFE4C4", "black":"#000000", "blanchedalmond":"#FFEBCD",
+ "blue":"#0000FF", "blueviolet":"#8A2BE2", "brown":"#A52A2A",
+ "burlywood":"#DEB887", "cadetblue":"#5F9EA0", "chartreuse":"#7FFF00",
+ "chocolate":"#D2691E", "coral":"#FF7F50", "cornflowerblue":"#6495ED",
+ "cornsilk":"#FFF8DC", "crimson":"#DC143C", "cyan":"#00FFFF",
+ "darkblue":"#00008B", "darkcyan":"#008B8B", "darkgoldenrod":"#B8860B",
+ "darkgray":"#A9A9A9", "darkgreen":"#006400", "darkkhaki":"#BDB76B",
+ "darkmagenta":"#8B008B", "darkolivegreen":"#556B2F", "darkorange":"#FF8C00",
+ "darkorchid":"#9932CC", "darkred":"#8B0000", "darksalmon":"#E9967A",
+ "darkseagreen":"#8FBC8F", "darkslateblue":"#483D8B", "darkslategray":"#2F4F4F",
+ "darkturquoise":"#00CED1", "darkviolet":"#9400D3", "deeppink":"#FF1493",
+ "deepskyblue":"#00BFFF", "dimgray":"#696969", "dodgerblue":"#1E90FF",
+ "firebrick":"#B22222", "floralwhite":"#FFFAF0", "forestgreen":"#228B22",
+ "fuchsia":"#FF00FF", "gainsboro":"#DCDCDC", "ghostwhite":"#F8F8FF",
+ "gold":"#FFD700", "goldenrod":"#DAA520", "gray":"#808080",
+ "green":"#008000", "greenyellow":"#ADFF2F", "honeydew":"#F0FFF0",
+ "hotpink":"#FF69B4", "indianred":"#CD5C5C", "indigo":"#4B0082",
+ "ivory":"#FFFFF0", "khaki":"#F0E68C", "lavender":"#E6E6FA",
+ "lavenderblush":"#FFF0F5", "lawngreen":"#7CFC00", "lemonchiffon":"#FFFACD",
+ "lightblue":"#ADD8E6", "lightcoral":"#F08080", "lightcyan":"#E0FFFF",
+ "lightgoldenrodyellow":"#FAFAD2", "lightgreen":"#90EE90", "lightgrey":"#D3D3D3",
+ "lightpink":"#FFB6C1", "lightsalmon":"#FFA07A", "lightseagreen":"#20B2AA",
+ "lightskyblue":"#87CEFA", "lightslategray":"#778899", "lightsteelblue":"#B0C4DE",
+ "lightyellow":"#FFFFE0", "lime":"#00FF00", "limegreen":"#32CD32",
+ "linen":"#FAF0E6", "magenta":"#FF00FF", "maroon":"#800000",
+ "mediumauqamarine":"#66CDAA", "mediumblue":"#0000CD", "mediumorchid":"#BA55D3",
+ "mediumpurple":"#9370D8", "mediumseagreen":"#3CB371", "mediumslateblue":"#7B68EE",
+ "mediumspringgreen":"#00FA9A", "mediumturquoise":"#48D1CC", "mediumvioletred":"#C71585",
+ "midnightblue":"#191970", "mintcream":"#F5FFFA", "mistyrose":"#FFE4E1",
+ "moccasin":"#FFE4B5", "navajowhite":"#FFDEAD", "navy":"#000080",
+ "oldlace":"#FDF5E6", "olive":"#808000", "olivedrab":"#688E23",
+ "orange":"#FFA500", "orangered":"#FF4500", "orchid":"#DA70D6",
+ "palegoldenrod":"#EEE8AA", "palegreen":"#98FB98", "paleturquoise":"#AFEEEE",
+ "palevioletred":"#D87093", "papayawhip":"#FFEFD5", "peachpuff":"#FFDAB9",
+ "peru":"#CD853F", "pink":"#FFC0CB", "plum":"#DDA0DD",
+ "powderblue":"#B0E0E6", "purple":"#800080", "red":"#FF0000",
+ "rosybrown":"#BC8F8F", "royalblue":"#4169E1", "saddlebrown":"#8B4513",
+ "salmon":"#FA8072", "sandybrown":"#F4A460", "seagreen":"#2E8B57",
+ "seashell":"#FFF5EE", "sienna":"#A0522D", "silver":"#C0C0C0",
+ "skyblue":"#87CEEB", "slateblue":"#6A5ACD", "slategray":"#708090",
+ "snow":"#FFFAFA", "springgreen":"#00FF7F", "steelblue":"#4682B4",
+ "tan":"#D2B48C", "teal":"#008080", "thistle":"#D8BFD8",
+ "tomato":"#FF6347", "turquoise":"#40E0D0", "violet":"#EE82EE",
+ "wheat":"#F5DEB3", "white":"#FFFFFF", "whitesmoke":"#F5F5F5",
+ "yellow":"#FFFF00", "yellowgreen":"#9ACD32"
+ };
+
Color.prototype = {
/**
* @private
*/
parse: function() {
if( !this._color ) {
- var v = this.val,
+ var me = this,
+ v = me.val,
+ vLower,
m = v.match( Color.rgbaRE );
if( m ) {
- this._color = 'rgb(' + m[1] + ',' + m[2] + ',' + m[3] + ')';
- this._alpha = parseFloat( m[4] );
- } else {
- this._color = v;
- this._alpha = ( v === 'transparent' ? 0 : 1 );
+ me._color = 'rgb(' + m[1] + ',' + m[2] + ',' + m[3] + ')';
+ me._alpha = parseFloat( m[4] );
+ }
+ else {
+ if( ( vLower = v.toLowerCase() ) in Color.names ) {
+ v = Color.names[vLower];
+ }
+ me._color = v;
+ me._alpha = ( v === 'transparent' ? 0 : 1 );
}
}
},
View
4 sources/Tokenizer.js
@@ -84,7 +84,7 @@ PIE.Tokenizer = (function() {
* @return {PIE.Tokenizer.Token}
*/
next: function( forget ) {
- var css, ch, firstChar, match, type, val,
+ var css, ch, firstChar, match, val,
me = this;
function newToken( type, value ) {
@@ -170,7 +170,7 @@ PIE.Tokenizer = (function() {
this.ch += val.length;
// Named colors
- if( val.toLowerCase() in this.colorNames ) {
+ if( val.toLowerCase() in PIE.Color.names || val === 'currentColor' ) {
return newToken( Type.COLOR, val );
}
View
32 tests/color-names.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Tests for background gradients</title>
+
+ <style type="text/css">
+
+ .test {
+ float: left;
+ padding: 10px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ border: 3px solid;
+ margin: 5px;
+ behavior: url(../build/PIE.htc);
+ }
+
+ </style>
+</head>
+<body>
+
+ <script type="text/javascript">
+ var colors = ["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", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumauqamarine", "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", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"];
+ for( var i=0, len=colors.length; i < len; i++ ) {
+ document.write('<div class="test" style="border-color:' + colors[i] + ';">' + colors[i] + '</div>');
+ }
+ </script>
+
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.