Fixed color creation from CSS color string with modern "space-separated" syntax

CHANGES.md

@@ -6,6 +6,7 @@
 
 ##### Fixes :wrench:
 
+- Fixed color creation from CSS color string with modern "space-separated" syntax. [#11271](https://github.com/CesiumGS/cesium/pull/11271)
 - Fixed a race condition when loading cut-out terrain. [#11296](https://github.com/CesiumGS/cesium/pull/11296)
 
 ### 1.105.2 - 2023-05-15

CONTRIBUTORS.md

@@ -357,3 +357,4 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to contribute to Cesiu
 - [王秋艳](https://github.com/wqy224488)
 - [Jason Summercamp](https://github.com/fullstacc)
 - [Shapovalov Kirill](https://github.com/ShapovalovKL)
+- [Alexander Popoff](https://github.com/aerialist7)

packages/engine/Source/Core/Color.js

@@ -352,9 +352,9 @@ const rgbaMatcher = /^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/i;
 //#rrggbbaa
 const rrggbbaaMatcher = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i;
 //rgb(), rgba(), or rgb%()
-const rgbParenthesesMatcher = /^rgba?\(\s*([0-9.]+%?)\s*,\s*([0-9.]+%?)\s*,\s*([0-9.]+%?)(?:\s*,\s*([0-9.]+))?\s*\)$/i;
+const rgbParenthesesMatcher = /^rgba?\s*\(\s*([0-9.]+%?)\s*[,\s]+\s*([0-9.]+%?)\s*[,\s]+\s*([0-9.]+%?)(?:\s*[,\s/]+\s*([0-9.]+))?\s*\)$/i;
 //hsl() or hsla()
-const hslParenthesesMatcher = /^hsla?\(\s*([0-9.]+)\s*,\s*([0-9.]+%)\s*,\s*([0-9.]+%)(?:\s*,\s*([0-9.]+))?\s*\)$/i;
+const hslParenthesesMatcher = /^hsla?\s*\(\s*([0-9.]+)\s*[,\s]+\s*([0-9.]+%)\s*[,\s]+\s*([0-9.]+%)(?:\s*[,\s/]+\s*([0-9.]+))?\s*\)$/i;
 
 /**
  * Creates a Color instance from a CSS color value.
@@ -379,8 +379,8 @@ Color.fromCssColorString = function (color, result) {
     result = new Color();
   }
 
-  // Remove all whitespaces from the color string
-  color = color.replace(/\s/g, "");
+  // Remove all surrounding whitespaces from the color string
+  color = color.trim();
 
   const namedColor = Color[color.toUpperCase()];
   if (defined(namedColor)) {

packages/engine/Specs/Core/ColorSpec.js

@@ -244,6 +244,15 @@ describe("Core/Color", function () {
     );
   });
 
+  it("fromCssColorString supports the rgb() format with absolute values (space-separated)", function () {
+    expect(Color.fromCssColorString("rgb(255 0 0)")).toEqual(Color.RED);
+    expect(Color.fromCssColorString("rgb(0 255 0)")).toEqual(Color.LIME);
+    expect(Color.fromCssColorString("rgb(0 0 255)")).toEqual(Color.BLUE);
+    expect(Color.fromCssColorString("rgb(51 102 204)")).toEqual(
+      new Color(0.2, 0.4, 0.8, 1.0)
+    );
+  });
+
   it("fromCssColorString supports the rgb() format with percentages", function () {
     expect(Color.fromCssColorString("rgb(100%, 0, 0)")).toEqual(Color.RED);
     expect(Color.fromCssColorString("rgb(0, 100%, 0)")).toEqual(Color.LIME);
@@ -253,6 +262,15 @@ describe("Core/Color", function () {
     );
   });
 
+  it("fromCssColorString supports the rgb() format with percentages (space-separated)", function () {
+    expect(Color.fromCssColorString("rgb(100% 0 0)")).toEqual(Color.RED);
+    expect(Color.fromCssColorString("rgb(0 100% 0)")).toEqual(Color.LIME);
+    expect(Color.fromCssColorString("rgb(0 0 100%)")).toEqual(Color.BLUE);
+    expect(Color.fromCssColorString("rgb(20% 40% 80%)")).toEqual(
+      new Color(0.2, 0.4, 0.8, 1.0)
+    );
+  });
+
   it("fromCssColorString supports the rgba() format with absolute values", function () {
     expect(Color.fromCssColorString("rgba(255, 0, 0, 1.0)")).toEqual(Color.RED);
     expect(Color.fromCssColorString("rgba(0, 255, 0, 1.0)")).toEqual(
@@ -266,6 +284,15 @@ describe("Core/Color", function () {
     );
   });
 
+  it("fromCssColorString supports the rgba() format with absolute values (space-separated)", function () {
+    expect(Color.fromCssColorString("rgba(255 0 0 / 1.0)")).toEqual(Color.RED);
+    expect(Color.fromCssColorString("rgba(0 255 0 / 1.0)")).toEqual(Color.LIME);
+    expect(Color.fromCssColorString("rgba(0 0 255 / 1.0)")).toEqual(Color.BLUE);
+    expect(Color.fromCssColorString("rgba(51 102 204 / 0.6)")).toEqual(
+      new Color(0.2, 0.4, 0.8, 0.6)
+    );
+  });
+
   it("fromCssColorString supports the rgba() format with percentages", function () {
     expect(Color.fromCssColorString("rgba(100%, 0, 0, 1.0)")).toEqual(
       Color.RED
@@ -281,6 +308,19 @@ describe("Core/Color", function () {
     );
   });
 
+  it("fromCssColorString supports the rgba() format with percentages (space-separated)", function () {
+    expect(Color.fromCssColorString("rgba(100% 0 0 / 1.0)")).toEqual(Color.RED);
+    expect(Color.fromCssColorString("rgba(0 100% 0 / 1.0)")).toEqual(
+      Color.LIME
+    );
+    expect(Color.fromCssColorString("rgba(0 0 100% / 1.0)")).toEqual(
+      Color.BLUE
+    );
+    expect(Color.fromCssColorString("rgba(20% 40% 80% / 0.6)")).toEqual(
+      new Color(0.2, 0.4, 0.8, 0.6)
+    );
+  });
+
   it("fromCssColorString supports named colors regardless of case", function () {
     expect(Color.fromCssColorString("red")).toEqual(Color.RED);
     expect(Color.fromCssColorString("GREEN")).toEqual(Color.GREEN);
@@ -297,6 +337,16 @@ describe("Core/Color", function () {
     );
   });
 
+  it("fromCssColorString supports the hsl() format (space-separated)", function () {
+    expect(Color.fromCssColorString("hsl(0 100% 50%)")).toEqual(Color.RED);
+    expect(Color.fromCssColorString("hsl(120 100% 50%)")).toEqual(Color.LIME);
+    expect(Color.fromCssColorString("hsl(240 100% 50%)")).toEqual(Color.BLUE);
+    expect(Color.fromCssColorString("hsl(220 60% 50%)")).toEqualEpsilon(
+      new Color(0.2, 0.4, 0.8),
+      CesiumMath.EPSILON15
+    );
+  });
+
   it("fromCssColorString supports the hsla() format", function () {
     expect(Color.fromCssColorString("hsla(0, 100%, 50%, 1.0)")).toEqual(
       Color.RED
@@ -313,6 +363,22 @@ describe("Core/Color", function () {
     );
   });
 
+  it("fromCssColorString supports the hsla() format (space-separated)", function () {
+    expect(Color.fromCssColorString("hsla(0 100% 50% / 1.0)")).toEqual(
+      Color.RED
+    );
+    expect(Color.fromCssColorString("hsla(120 100% 50% / 1.0)")).toEqual(
+      Color.LIME
+    );
+    expect(Color.fromCssColorString("hsla(240 100% 50% / 1.0)")).toEqual(
+      Color.BLUE
+    );
+    expect(Color.fromCssColorString("hsla(220 60% 50% / 0.6)")).toEqualEpsilon(
+      new Color(0.2, 0.4, 0.8, 0.6),
+      CesiumMath.EPSILON15
+    );
+  });
+
   it("fromCssColorString wraps hue into valid range for hsl() format", function () {
     expect(Color.fromCssColorString("hsl(720, 100%, 50%)")).toEqual(Color.RED);
     expect(Color.fromCssColorString("hsla(720, 100%, 50%, 1.0)")).toEqual(
@@ -363,6 +429,7 @@ describe("Core/Color", function () {
     expect(Color.fromCssColorString("rgb( 255, 255, 255) ")).toEqual(
       Color.WHITE
     );
+    expect(Color.fromCssColorString("rgb (0 0 255) ")).toEqual(Color.BLUE);
     expect(Color.fromCssColorString("  #FF0000")).toEqual(Color.RED);
     expect(Color.fromCssColorString("#FF0  ")).toEqual(Color.YELLOW);
     expect(Color.fromCssColorString(" hsla(720,   100%, 50%, 1.0)  ")).toEqual(