Skip to content

Commit

Permalink
Fixed color creation from CSS color string with modern "space-separat…
Browse files Browse the repository at this point in the history
…ed" syntax (#11271)

* Fix `Color.fromCssColorString` in case of parsing `rgb(a)`/`hsl(a)` CSS colors with modern "space-separated" syntax

* Add `Alexander Popoff` (@aerialist7) to the list of contributors

* Escaping

* Disable `/` parsing

* Fix regexps

* Only remove surrounding whitespace from color strings

* Enable `/` parsing

* Formatting

* Make sure availability tiles are loaded before deciding there is no terrain at that x, y, level

* Return the correct promise

* Update CHANGES.md

* Adjust camera controls for 3D

* Use first picked position in drag when possible

* Use pick position direction for panning

* Only use new camera controls when globe is false

* Spin3d should fallback to old behavior when globe is defined

* pick globe on spin3d

* Fallback to old behavior for spin3d

* Updates for Google Photorealistic 3D Tiles

* Updates for 1.105.1 release

* Fix doc for Entity.prototype.computeModelMatrix (#11277)

Co-authored-by: Jeshurun Hembd <[email protected]>

* Update widgets version

* fixed datasource display visualizer callback typedef (#11294)

* Add TextureUniform type for setUniform value type (#11284)

* Add unit test

* Enable standard derivatives extension in demodernizeShader

* Update CHANGES.md

---------

Co-authored-by: Gabby Getz <[email protected]>
Co-authored-by: Jeshurun Hembd <[email protected]>
Co-authored-by: Jeshurun Hembd <[email protected]>
Co-authored-by: Ben Kuster <[email protected]>
Co-authored-by: Frédéric Junod <[email protected]>
  • Loading branch information
6 people authored May 25, 2023
1 parent 8da0967 commit 2f409a4
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 4 deletions.
1 change: 1 addition & 0 deletions CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions CONTRIBUTORS.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
8 changes: 4 additions & 4 deletions packages/engine/Source/Core/Color.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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)) {
Expand Down
67 changes: 67 additions & 0 deletions packages/engine/Specs/Core/ColorSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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(
Expand All @@ -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
Expand All @@ -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);
Expand All @@ -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
Expand All @@ -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(
Expand Down Expand Up @@ -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(
Expand Down

0 comments on commit 2f409a4

Please sign in to comment.