| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| |
| <div id="target"></div> |
| |
| <script> |
| var values = [ |
| // specified as rgba |
| {input: 'rgba(0,0,0,0)', expected: 'rgba(0, 0, 0, 0)'}, |
| {input: 'rgba(128,0,0,0)', expected: 'rgba(128, 0, 0, 0)'}, |
| |
| // basic color keywords taken from: https://drafts.csswg.org/css-color-3/#colorunits |
| {input: 'transparent', expected: 'rgba(0, 0, 0, 0)'}, |
| {input: 'black', expected: 'rgb(0, 0, 0)'}, |
| {input: 'silver', expected: 'rgb(192, 192, 192)'}, |
| {input: 'gray', expected: 'rgb(128, 128, 128)'}, |
| {input: 'white', expected: 'rgb(255, 255, 255)'}, |
| {input: 'maroon', expected: 'rgb(128, 0, 0)'}, |
| {input: 'red', expected: 'rgb(255, 0, 0)'}, |
| {input: 'purple', expected: 'rgb(128, 0, 128)'}, |
| {input: 'fuchsia', expected: 'rgb(255, 0, 255)'}, |
| {input: 'green', expected: 'rgb(0, 128, 0)'}, |
| {input: 'lime', expected: 'rgb(0, 255, 0)'}, |
| {input: 'olive', expected: 'rgb(128, 128, 0)'}, |
| {input: 'yellow', expected: 'rgb(255, 255, 0)'}, |
| {input: 'navy', expected: 'rgb(0, 0, 128)'}, |
| {input: 'blue', expected: 'rgb(0, 0, 255)'}, |
| {input: 'teal', expected: 'rgb(0, 128, 128)'}, |
| {input: 'aqua', expected: 'rgb(0, 255, 255)'}, |
| |
| // Hex RGB taken from: https://drafts.csswg.org/css-color-3/#colorunits |
| {input: '#000000', expected: 'rgb(0, 0, 0)'}, |
| {input: '#C0C0C0', expected: 'rgb(192, 192, 192)'}, |
| {input: '#808080', expected: 'rgb(128, 128, 128)'}, |
| {input: '#FFFFFF', expected: 'rgb(255, 255, 255)'}, |
| {input: '#800000', expected: 'rgb(128, 0, 0)'}, |
| {input: '#FF0000', expected: 'rgb(255, 0, 0)'}, |
| {input: '#800080', expected: 'rgb(128, 0, 128)'}, |
| {input: '#FF00FF', expected: 'rgb(255, 0, 255)'}, |
| {input: '#008000', expected: 'rgb(0, 128, 0)'}, |
| {input: '#00FF00', expected: 'rgb(0, 255, 0)'}, |
| {input: '#808000', expected: 'rgb(128, 128, 0)'}, |
| {input: '#FFFF00', expected: 'rgb(255, 255, 0)'}, |
| {input: '#000080', expected: 'rgb(0, 0, 128)'}, |
| {input: '#0000FF', expected: 'rgb(0, 0, 255)'}, |
| {input: '#008080', expected: 'rgb(0, 128, 128)'}, |
| {input: '#00FFFF', expected: 'rgb(0, 255, 255)'}, |
| |
| // Extended color keywords from: http://www.w3.org/TR/css3-color/#svg-color (a few were selected) |
| {input: 'darkorchid', expected: 'rgb(153, 50, 204)'}, |
| {input: 'dodgerblue', expected: 'rgb(30, 144, 255)'}, |
| {input: 'lightgoldenrodyellow', expected: 'rgb(250, 250, 210)'}, |
| {input: 'mediumspringgreen', expected: 'rgb(0, 250, 154)'}, |
| {input: 'papayawhip', expected: 'rgb(255, 239, 213)'}, |
| {input: 'salmon', expected: 'rgb(250, 128, 114)'}, |
| {input: 'darkgoldenrod', expected: 'rgb(184, 134, 11)'}, |
| {input: 'cornflowerblue', expected: 'rgb(100, 149, 237)'}, |
| ]; |
| |
| test(function() { |
| for (var value of values) { |
| target.style.backgroundColor = value.input; |
| assert_equals(getComputedStyle(target).backgroundColor, value.expected); |
| } |
| }, "Test that getComputedStyle serializes backgroundColor as per the spec here: https://drafts.csswg.org/css-color-3/#foreground"); |
| </script> |
