| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Color 4: Resolving keyword color values</title> |
| <link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-color-values"> |
| <meta name="assert" content="Tests if keyword color values are resolved properly"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <div id="parent" style="color: rgb(45, 23, 27)"> |
| <div id="inner"></div> |
| </div> |
| |
| <script> |
| function color_test(color, expected, reason) { |
| test(function() { |
| var element = document.getElementById('inner'); |
| // Random value not in our test data. |
| fail_value = "rgb(12, 34, 223)" |
| element.style.color = "black"; |
| element.style.cssText = "color: " + fail_value + "; color: " + color; |
| |
| if (expected === null) |
| assert_equals(getComputedStyle(element).color, fail_value); |
| else |
| assert_equals(getComputedStyle(element).color, expected); |
| }, `${reason}: ${color}`); |
| } |
| |
| function expected_value(rgb_channels) { |
| if (rgb_channels === null) |
| return null; |
| else if (rgb_channels.length === 3 || rgb_channels[3] == 1) |
| return "rgb(" + rgb_channels.slice(0, 3).join(", ") + ")"; |
| else |
| return "rgba(" + rgb_channels.join(", ") + ")"; |
| } |
| |
| keywords = [ |
| ['transparent', [0, 0, 0, 0]], |
| ['aliceblue', [240, 248, 255, 1]], |
| ['antiquewhite', [250, 235, 215, 1]], |
| ['aqua', [0, 255, 255, 1]], |
| ['aquamarine', [127, 255, 212, 1]], |
| ['azure', [240, 255, 255, 1]], |
| ['beige', [245, 245, 220, 1]], |
| ['bisque', [255, 228, 196, 1]], |
| ['black', [0, 0, 0, 1]], |
| ['blanchedalmond', [255, 235, 205, 1]], |
| ['blue', [0, 0, 255, 1]], |
| ['blueviolet', [138, 43, 226, 1]], |
| ['brown', [165, 42, 42, 1]], |
| ['burlywood', [222, 184, 135, 1]], |
| ['cadetblue', [95, 158, 160, 1]], |
| ['chartreuse', [127, 255, 0, 1]], |
| ['chocolate', [210, 105, 30, 1]], |
| ['coral', [255, 127, 80, 1]], |
| ['cornflowerblue', [100, 149, 237, 1]], |
| ['cornsilk', [255, 248, 220, 1]], |
| ['crimson', [220, 20, 60, 1]], |
| ['cyan', [0, 255, 255, 1]], |
| ['darkblue', [0, 0, 139, 1]], |
| ['darkcyan', [0, 139, 139, 1]], |
| ['darkgoldenrod', [184, 134, 11, 1]], |
| ['darkgray', [169, 169, 169, 1]], |
| ['darkgreen', [0, 100, 0, 1]], |
| ['darkgrey', [169, 169, 169, 1]], |
| ['darkkhaki', [189, 183, 107, 1]], |
| ['darkmagenta', [139, 0, 139, 1]], |
| ['darkolivegreen', [85, 107, 47, 1]], |
| ['darkorange', [255, 140, 0, 1]], |
| ['darkorchid', [153, 50, 204, 1]], |
| ['darkred', [139, 0, 0, 1]], |
| ['darksalmon', [233, 150, 122, 1]], |
| ['darkseagreen', [143, 188, 143, 1]], |
| ['darkslateblue', [72, 61, 139, 1]], |
| ['darkslategray', [47, 79, 79, 1]], |
| ['darkslategrey', [47, 79, 79, 1]], |
| ['darkturquoise', [0, 206, 209, 1]], |
| ['darkviolet', [148, 0, 211, 1]], |
| ['deeppink', [255, 20, 147, 1]], |
| ['deepskyblue', [0, 191, 255, 1]], |
| ['dimgray', [105, 105, 105, 1]], |
| ['dimgrey', [105, 105, 105, 1]], |
| ['dodgerblue', [30, 144, 255, 1]], |
| ['firebrick', [178, 34, 34, 1]], |
| ['floralwhite', [255, 250, 240, 1]], |
| ['forestgreen', [34, 139, 34, 1]], |
| ['fuchsia', [255, 0, 255, 1]], |
| ['gainsboro', [220, 220, 220, 1]], |
| ['ghostwhite', [248, 248, 255, 1]], |
| ['gold', [255, 215, 0, 1]], |
| ['goldenrod', [218, 165, 32, 1]], |
| ['gray', [128, 128, 128, 1]], |
| ['green', [0, 128, 0, 1]], |
| ['greenyellow', [173, 255, 47, 1]], |
| ['grey', [128, 128, 128, 1]], |
| ['honeydew', [240, 255, 240, 1]], |
| ['hotpink', [255, 105, 180, 1]], |
| ['indianred', [205, 92, 92, 1]], |
| ['indigo', [75, 0, 130, 1]], |
| ['ivory', [255, 255, 240, 1]], |
| ['khaki', [240, 230, 140, 1]], |
| ['lavender', [230, 230, 250, 1]], |
| ['lavenderblush', [255, 240, 245, 1]], |
| ['lawngreen', [124, 252, 0, 1]], |
| ['lemonchiffon', [255, 250, 205, 1]], |
| ['lightblue', [173, 216, 230, 1]], |
| ['lightcoral', [240, 128, 128, 1]], |
| ['lightcyan', [224, 255, 255, 1]], |
| ['lightgoldenrodyellow', [250, 250, 210, 1]], |
| ['lightgray', [211, 211, 211, 1]], |
| ['lightgreen', [144, 238, 144, 1]], |
| ['lightgrey', [211, 211, 211, 1]], |
| ['lightpink', [255, 182, 193, 1]], |
| ['lightsalmon', [255, 160, 122, 1]], |
| ['lightseagreen', [32, 178, 170, 1]], |
| ['lightskyblue', [135, 206, 250, 1]], |
| ['lightslategray', [119, 136, 153, 1]], |
| ['lightslategrey', [119, 136, 153, 1]], |
| ['lightsteelblue', [176, 196, 222, 1]], |
| ['lightyellow', [255, 255, 224, 1]], |
| ['lime', [0, 255, 0, 1]], |
| ['limegreen', [50, 205, 50, 1]], |
| ['linen', [250, 240, 230, 1]], |
| ['magenta', [255, 0, 255, 1]], |
| ['maroon', [128, 0, 0, 1]], |
| ['mediumaquamarine', [102, 205, 170, 1]], |
| ['mediumblue', [0, 0, 205, 1]], |
| ['mediumorchid', [186, 85, 211, 1]], |
| ['mediumpurple', [147, 112, 219, 1]], |
| ['mediumseagreen', [60, 179, 113, 1]], |
| ['mediumslateblue', [123, 104, 238, 1]], |
| ['mediumspringgreen', [0, 250, 154, 1]], |
| ['mediumturquoise', [72, 209, 204, 1]], |
| ['mediumvioletred', [199, 21, 133, 1]], |
| ['midnightblue', [25, 25, 112, 1]], |
| ['mintcream', [245, 255, 250, 1]], |
| ['mistyrose', [255, 228, 225, 1]], |
| ['moccasin', [255, 228, 181, 1]], |
| ['navajowhite', [255, 222, 173, 1]], |
| ['navy', [0, 0, 128, 1]], |
| ['oldlace', [253, 245, 230, 1]], |
| ['olive', [128, 128, 0, 1]], |
| ['olivedrab', [107, 142, 35, 1]], |
| ['orange', [255, 165, 0, 1]], |
| ['orangered', [255, 69, 0, 1]], |
| ['orchid', [218, 112, 214, 1]], |
| ['palegoldenrod', [238, 232, 170, 1]], |
| ['palegreen', [152, 251, 152, 1]], |
| ['paleturquoise', [175, 238, 238, 1]], |
| ['palevioletred', [219, 112, 147, 1]], |
| ['papayawhip', [255, 239, 213, 1]], |
| ['peachpuff', [255, 218, 185, 1]], |
| ['peru', [205, 133, 63, 1]], |
| ['pink', [255, 192, 203, 1]], |
| ['plum', [221, 160, 221, 1]], |
| ['powderblue', [176, 224, 230, 1]], |
| ['purple', [128, 0, 128, 1]], |
| ['red', [255, 0, 0, 1]], |
| ['rosybrown', [188, 143, 143, 1]], |
| ['royalblue', [65, 105, 225, 1]], |
| ['saddlebrown', [139, 69, 19, 1]], |
| ['salmon', [250, 128, 114, 1]], |
| ['sandybrown', [244, 164, 96, 1]], |
| ['seagreen', [46, 139, 87, 1]], |
| ['seashell', [255, 245, 238, 1]], |
| ['sienna', [160, 82, 45, 1]], |
| ['silver', [192, 192, 192, 1]], |
| ['skyblue', [135, 206, 235, 1]], |
| ['slateblue', [106, 90, 205, 1]], |
| ['slategray', [112, 128, 144, 1]], |
| ['slategrey', [112, 128, 144, 1]], |
| ['snow', [255, 250, 250, 1]], |
| ['springgreen', [0, 255, 127, 1]], |
| ['steelblue', [70, 130, 180, 1]], |
| ['tan', [210, 180, 140, 1]], |
| ['teal', [0, 128, 128, 1]], |
| ['thistle', [216, 191, 216, 1]], |
| ['tomato', [255, 99, 71, 1]], |
| ['turquoise', [64, 224, 208, 1]], |
| ['violet', [238, 130, 238, 1]], |
| ['wheat', [245, 222, 179, 1]], |
| ['white', [255, 255, 255, 1]], |
| ['whitesmoke', [245, 245, 245, 1]], |
| ['yellow', [255, 255, 0, 1]], |
| ['yellowgreen', [154, 205, 50, 1]], |
| ] |
| |
| for (var value in keywords) { |
| items_to_test = keywords[value]; |
| keyword = items_to_test[0]; |
| expected = expected_value(items_to_test[1]); |
| letter = value % keyword.length; |
| replacement = keyword; |
| |
| color_test(keyword, expected, "Keyword should parse properly"); |
| color_test(keyword.toUpperCase(), expected, "Keywords should be case-insensitive"); |
| replacement[letter] = "\\" + keyword.codePointAt(letter); |
| color_test(replacement, expected, "Code point should parse"); |
| color_test(keyword.slice(0, letter) + keyword.slice(letter + 1, keyword.length), null, "Partial keywords shouldn't parse"); |
| if (keyword.indexOf('k') !== -1) |
| color_test(keyword.replace('k', 'K'), null, "Unicode modification shouldn't parse"); |
| } |
| </script> |
