[css-properties-values-api] Proper computed value for <color>.

As of an imminent spec change, <color> values no longer compute to their
specified value, but behave like <color> values in general.

Note that color keywords are parsed as CSSIdentifierValue (holding a
CSSValueID), and custom idents are parsed as CSSCustomIdentValue (holding a
String), which is why the "tomato | <color>" works as it should.

[email protected]

Bug: 641877
Change-Id: I946536a9d54dbaa7af589cb99acdba72f37fe016
Reviewed-on: https://chromium-review.googlesource.com/c/1303365
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Anders Ruud <[email protected]>
Cr-Commit-Position: refs/heads/master@{#603628}

css/css-properties-values-api/registered-property-computation.html

@@ -29,7 +29,7 @@
         // Because we want to include the parsing step, insert a stylesheet
         // node with textContent.
         let node = document.createElement('style');
-        node.textContent = `#${id} { ${name}: ${value}; }`;
+        node.textContent = `#${id} { ${name}:${value}; }`;
         document.body.append(node);
 
         try {
@@ -123,5 +123,22 @@
     test(function() {
         assert_computed_value('<integer>+', '15 calc(2.4) calc(2.6)', '15 2 3');
     }, "<integer>+ values are computed correctly for " + id);
+
+    test(function() {
+        assert_computed_value('<color>', '#ff0000', 'rgb(255, 0, 0)');
+        assert_computed_value('<color>', '#000f00', 'rgb(0, 15, 0)');
+        assert_computed_value('<color>', '#00000a', 'rgb(0, 0, 10)');
+        assert_computed_value('<color>', '#badbee', 'rgb(186, 219, 238)');
+        assert_computed_value('<color>', '#badbee33', 'rgba(186, 219, 238, 0.2)');
+        assert_computed_value('<color>', 'tomato', 'rgb(255, 99, 71)');
+        assert_computed_value('<color>', 'plum', 'rgb(221, 160, 221)');
+        assert_computed_value('<color>', 'currentcolor', 'currentcolor');
+    }, "<color> values are computed correctly for " + id);
+
+    test(function() {
+        assert_computed_value('*', 'tomato', 'tomato');
+        assert_computed_value('tomato | plum', 'plum', 'plum');
+        assert_computed_value('tomato | plum | <color>', 'plum', 'plum');
+    }, "ident values that look like color keywords are not converted to colors" + id);
 }
 </script>

css/css-properties-values-api/registered-property-cssom.html

@@ -46,7 +46,7 @@
   assert_equals(inlineStyle.getPropertyValue('--length'), '5');
   assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');
   assert_equals(computedStyle.getPropertyValue('--length'), '0px');
-  assert_equals(computedStyle.getPropertyValue('--color'), 'blue');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(0, 0, 255)');
 }, "Formerly valid values are still readable from inline styles but are computed as the unset value");
 
 test(function() {
@@ -62,7 +62,7 @@
   assert_equals(inlineStyle.getPropertyValue('--length'), '');
   assert_equals(inlineStyle.getPropertyValue('--color'), '');
   assert_equals(computedStyle.getPropertyValue('--length'), '10px');
-  assert_equals(computedStyle.getPropertyValue('--color'), 'red');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(255, 0, 0)');
 }, "Values can be removed from inline styles");
 
 test(function() {
@@ -80,9 +80,9 @@
   assert_equals(inlineStyle.getPropertyValue('--length'), '30px');
   assert_equals(inlineStyle.getPropertyValue('--color'), 'pink');
   assert_equals(computedStyle.getPropertyValue('--length'), '30px');
-  assert_equals(computedStyle.getPropertyValue('--color'), 'pink');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(255, 192, 203)');
   inlineStyle.setProperty('--color', 'inherit');
   assert_equals(inlineStyle.getPropertyValue('--color'), 'inherit');
-  assert_equals(computedStyle.getPropertyValue('--color'), 'blue');
+  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(0, 0, 255)');
 }, "Valid values can be set on inline styles");
 </script>

css/css-properties-values-api/registered-property-initial.html

@@ -23,8 +23,8 @@
     computedStyle = getComputedStyle(target);
     assert_equals(computedStyle.getPropertyValue('--length'), '25px');
     assert_equals(computedStyle.getPropertyValue('--length-percentage'), 'calc(100px + 10%)');
-    assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'pink');
-    assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'purple');
+    assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'rgb(255, 192, 203)');
+    assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'rgb(128, 0, 128)');
     assert_equals(computedStyle.getPropertyValue('--transform-function'), 'rotate(42deg)');
     assert_equals(computedStyle.getPropertyValue('--single-transform-list'), 'scale(4)');
     assert_equals(computedStyle.getPropertyValue('--multiple-transform-list'), 'scale(3) translateX(4px)');