getComputedStyle-backgroundColor-serialization.html

<!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>
chromium/third_party/blink/web_tests/fast/css/getComputedStyle/getComputedStyle-backgroundColor-serialization.html
