Support #rgba and #rrggbbaa in Color.fromCssColorString

Author: vrana

CHANGES.md

@@ -6,6 +6,7 @@
 
 - Added `Cesium3DTileset.extensions` to get the extensions property from the tileset JSON. [#8829](https://github.com/CesiumGS/cesium/pull/8829)
 - Added `frustumSplits` option to `DebugCameraPrimitive`. [8849](https://github.com/CesiumGS/cesium/pull/8849)
+- Supported `#rgba` and `#rrggbbaa` formats in `Color.fromCssColorString`. [8873](https://github.com/CesiumGS/cesium/pull/8873)
 
 ##### Fixes :wrench:
 

Source/Core/Color.js

@@ -347,19 +347,19 @@ Color.fromRandom = function (options, result) {
   return result;
 };
 
-//#rgb
-var rgbMatcher = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
-//#rrggbb
-var rrggbbMatcher = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
+//#rgba
+var rgbaMatcher = /^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/i;
+//#rrggbbaa
+var rrggbbaaMatcher = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i;
 //rgb(), rgba(), or rgb%()
 var rgbParenthesesMatcher = /^rgba?\(\s*([0-9.]+%?)\s*,\s*([0-9.]+%?)\s*,\s*([0-9.]+%?)(?:\s*,\s*([0-9.]+))?\s*\)$/i;
-//hsl(), hsla(), or hsl%()
+//hsl() or hsla()
 var hslParenthesesMatcher = /^hsla?\(\s*([0-9.]+)\s*,\s*([0-9.]+%)\s*,\s*([0-9.]+%)(?:\s*,\s*([0-9.]+))?\s*\)$/i;
 
 /**
  * Creates a Color instance from a CSS color value.
  *
- * @param {String} color The CSS color value in #rgb, #rrggbb, rgb(), rgba(), hsl(), or hsla() format.
+ * @param {String} color The CSS color value in #rgb, #rgba, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), or hsla() format.
  * @param {Color} [result] The object to store the result in, if undefined a new instance will be created.
  * @returns {Color} The color object, or undefined if the string was not a valid CSS color.
  *
@@ -385,21 +385,21 @@ Color.fromCssColorString = function (color, result) {
     return result;
   }
 
-  var matches = rgbMatcher.exec(color);
+  var matches = rgbaMatcher.exec(color);
   if (matches !== null) {
     result.red = parseInt(matches[1], 16) / 15;
     result.green = parseInt(matches[2], 16) / 15.0;
     result.blue = parseInt(matches[3], 16) / 15.0;
-    result.alpha = 1.0;
+    result.alpha = parseInt(defaultValue(matches[4], "f"), 16) / 15.0;
     return result;
   }
 
-  matches = rrggbbMatcher.exec(color);
+  matches = rrggbbaaMatcher.exec(color);
   if (matches !== null) {
     result.red = parseInt(matches[1], 16) / 255.0;
     result.green = parseInt(matches[2], 16) / 255.0;
     result.blue = parseInt(matches[3], 16) / 255.0;
-    result.alpha = 1.0;
+    result.alpha = parseInt(defaultValue(matches[4], "ff"), 16) / 255.0;
     return result;
   }
 

Specs/Core/ColorSpec.js

@@ -172,6 +172,18 @@ describe("Core/Color", function () {
     );
   });
 
+  it("fromCssColorString supports the #rgba format", function () {
+    expect(Color.fromCssColorString("#369c")).toEqual(
+      new Color(0.2, 0.4, 0.6, 0.8)
+    );
+  });
+
+  it("fromCssColorString supports the #rgba format with uppercase", function () {
+    expect(Color.fromCssColorString("#369C")).toEqual(
+      new Color(0.2, 0.4, 0.6, 0.8)
+    );
+  });
+
   it("fromCssColorString supports the #rgb format with lowercase", function () {
     expect(Color.fromCssColorString("#f00")).toEqual(Color.RED);
     expect(Color.fromCssColorString("#0f0")).toEqual(Color.LIME);
@@ -184,12 +196,24 @@ describe("Core/Color", function () {
     expect(Color.fromCssColorString("#00F")).toEqual(Color.BLUE);
   });
 
-  it("fromCssColorString supports the #rrggbb", function () {
+  it("fromCssColorString supports the #rrggbb format", function () {
     expect(Color.fromCssColorString("#336699")).toEqual(
       new Color(0.2, 0.4, 0.6, 1.0)
     );
   });
 
+  it("fromCssColorString supports the #rrggbbaa format", function () {
+    expect(Color.fromCssColorString("#336699cc")).toEqual(
+      new Color(0.2, 0.4, 0.6, 0.8)
+    );
+  });
+
+  it("fromCssColorString supports the #rrggbbaa format with uppercase", function () {
+    expect(Color.fromCssColorString("#336699CC")).toEqual(
+      new Color(0.2, 0.4, 0.6, 0.8)
+    );
+  });
+
   it("fromCssColorString supports the #rrggbb format with lowercase", function () {
     expect(Color.fromCssColorString("#ff0000")).toEqual(Color.RED);
     expect(Color.fromCssColorString("#00ff00")).toEqual(Color.LIME);