Skip to content

Commit 2f409a4

Browse files
aerialist7ggetzjjhembdJeshurun Hembdbkuster
authored
Fixed color creation from CSS color string with modern "space-separated" 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 <jeshurun@cesium.com> * 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 <gabby@cesium.com> Co-authored-by: Jeshurun Hembd <41167620+jjhembd@users.noreply.github.com> Co-authored-by: Jeshurun Hembd <jeshurun@cesium.com> Co-authored-by: Ben Kuster <bkuster@vc.systems> Co-authored-by: Frédéric Junod <frederic.junod@camptocamp.com>
1 parent 8da0967 commit 2f409a4

File tree

4 files changed

+73
-4
lines changed

4 files changed

+73
-4
lines changed

‎CHANGES.md

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
##### Fixes :wrench:
88

9+
- Fixed color creation from CSS color string with modern "space-separated" syntax. [#11271](https://github.com/CesiumGS/cesium/pull/11271)
910
- Fixed a race condition when loading cut-out terrain. [#11296](https://github.com/CesiumGS/cesium/pull/11296)
1011

1112
### 1.105.2 - 2023-05-15

‎CONTRIBUTORS.md

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

‎packages/engine/Source/Core/Color.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -352,9 +352,9 @@ const rgbaMatcher = /^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/i;
352352
//#rrggbbaa
353353
const rrggbbaaMatcher = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i;
354354
//rgb(), rgba(), or rgb%()
355-
const rgbParenthesesMatcher = /^rgba?\(\s*([0-9.]+%?)\s*,\s*([0-9.]+%?)\s*,\s*([0-9.]+%?)(?:\s*,\s*([0-9.]+))?\s*\)$/i;
355+
const rgbParenthesesMatcher = /^rgba?\s*\(\s*([0-9.]+%?)\s*[,\s]+\s*([0-9.]+%?)\s*[,\s]+\s*([0-9.]+%?)(?:\s*[,\s/]+\s*([0-9.]+))?\s*\)$/i;
356356
//hsl() or hsla()
357-
const hslParenthesesMatcher = /^hsla?\(\s*([0-9.]+)\s*,\s*([0-9.]+%)\s*,\s*([0-9.]+%)(?:\s*,\s*([0-9.]+))?\s*\)$/i;
357+
const hslParenthesesMatcher = /^hsla?\s*\(\s*([0-9.]+)\s*[,\s]+\s*([0-9.]+%)\s*[,\s]+\s*([0-9.]+%)(?:\s*[,\s/]+\s*([0-9.]+))?\s*\)$/i;
358358

359359
/**
360360
* Creates a Color instance from a CSS color value.
@@ -379,8 +379,8 @@ Color.fromCssColorString = function (color, result) {
379379
result = new Color();
380380
}
381381

382-
// Remove all whitespaces from the color string
383-
color = color.replace(/\s/g, "");
382+
// Remove all surrounding whitespaces from the color string
383+
color = color.trim();
384384

385385
const namedColor = Color[color.toUpperCase()];
386386
if (defined(namedColor)) {

‎packages/engine/Specs/Core/ColorSpec.js

+67
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,15 @@ describe("Core/Color", function () {
244244
);
245245
});
246246

247+
it("fromCssColorString supports the rgb() format with absolute values (space-separated)", function () {
248+
expect(Color.fromCssColorString("rgb(255 0 0)")).toEqual(Color.RED);
249+
expect(Color.fromCssColorString("rgb(0 255 0)")).toEqual(Color.LIME);
250+
expect(Color.fromCssColorString("rgb(0 0 255)")).toEqual(Color.BLUE);
251+
expect(Color.fromCssColorString("rgb(51 102 204)")).toEqual(
252+
new Color(0.2, 0.4, 0.8, 1.0)
253+
);
254+
});
255+
247256
it("fromCssColorString supports the rgb() format with percentages", function () {
248257
expect(Color.fromCssColorString("rgb(100%, 0, 0)")).toEqual(Color.RED);
249258
expect(Color.fromCssColorString("rgb(0, 100%, 0)")).toEqual(Color.LIME);
@@ -253,6 +262,15 @@ describe("Core/Color", function () {
253262
);
254263
});
255264

265+
it("fromCssColorString supports the rgb() format with percentages (space-separated)", function () {
266+
expect(Color.fromCssColorString("rgb(100% 0 0)")).toEqual(Color.RED);
267+
expect(Color.fromCssColorString("rgb(0 100% 0)")).toEqual(Color.LIME);
268+
expect(Color.fromCssColorString("rgb(0 0 100%)")).toEqual(Color.BLUE);
269+
expect(Color.fromCssColorString("rgb(20% 40% 80%)")).toEqual(
270+
new Color(0.2, 0.4, 0.8, 1.0)
271+
);
272+
});
273+
256274
it("fromCssColorString supports the rgba() format with absolute values", function () {
257275
expect(Color.fromCssColorString("rgba(255, 0, 0, 1.0)")).toEqual(Color.RED);
258276
expect(Color.fromCssColorString("rgba(0, 255, 0, 1.0)")).toEqual(
@@ -266,6 +284,15 @@ describe("Core/Color", function () {
266284
);
267285
});
268286

287+
it("fromCssColorString supports the rgba() format with absolute values (space-separated)", function () {
288+
expect(Color.fromCssColorString("rgba(255 0 0 / 1.0)")).toEqual(Color.RED);
289+
expect(Color.fromCssColorString("rgba(0 255 0 / 1.0)")).toEqual(Color.LIME);
290+
expect(Color.fromCssColorString("rgba(0 0 255 / 1.0)")).toEqual(Color.BLUE);
291+
expect(Color.fromCssColorString("rgba(51 102 204 / 0.6)")).toEqual(
292+
new Color(0.2, 0.4, 0.8, 0.6)
293+
);
294+
});
295+
269296
it("fromCssColorString supports the rgba() format with percentages", function () {
270297
expect(Color.fromCssColorString("rgba(100%, 0, 0, 1.0)")).toEqual(
271298
Color.RED
@@ -281,6 +308,19 @@ describe("Core/Color", function () {
281308
);
282309
});
283310

311+
it("fromCssColorString supports the rgba() format with percentages (space-separated)", function () {
312+
expect(Color.fromCssColorString("rgba(100% 0 0 / 1.0)")).toEqual(Color.RED);
313+
expect(Color.fromCssColorString("rgba(0 100% 0 / 1.0)")).toEqual(
314+
Color.LIME
315+
);
316+
expect(Color.fromCssColorString("rgba(0 0 100% / 1.0)")).toEqual(
317+
Color.BLUE
318+
);
319+
expect(Color.fromCssColorString("rgba(20% 40% 80% / 0.6)")).toEqual(
320+
new Color(0.2, 0.4, 0.8, 0.6)
321+
);
322+
});
323+
284324
it("fromCssColorString supports named colors regardless of case", function () {
285325
expect(Color.fromCssColorString("red")).toEqual(Color.RED);
286326
expect(Color.fromCssColorString("GREEN")).toEqual(Color.GREEN);
@@ -297,6 +337,16 @@ describe("Core/Color", function () {
297337
);
298338
});
299339

340+
it("fromCssColorString supports the hsl() format (space-separated)", function () {
341+
expect(Color.fromCssColorString("hsl(0 100% 50%)")).toEqual(Color.RED);
342+
expect(Color.fromCssColorString("hsl(120 100% 50%)")).toEqual(Color.LIME);
343+
expect(Color.fromCssColorString("hsl(240 100% 50%)")).toEqual(Color.BLUE);
344+
expect(Color.fromCssColorString("hsl(220 60% 50%)")).toEqualEpsilon(
345+
new Color(0.2, 0.4, 0.8),
346+
CesiumMath.EPSILON15
347+
);
348+
});
349+
300350
it("fromCssColorString supports the hsla() format", function () {
301351
expect(Color.fromCssColorString("hsla(0, 100%, 50%, 1.0)")).toEqual(
302352
Color.RED
@@ -313,6 +363,22 @@ describe("Core/Color", function () {
313363
);
314364
});
315365

366+
it("fromCssColorString supports the hsla() format (space-separated)", function () {
367+
expect(Color.fromCssColorString("hsla(0 100% 50% / 1.0)")).toEqual(
368+
Color.RED
369+
);
370+
expect(Color.fromCssColorString("hsla(120 100% 50% / 1.0)")).toEqual(
371+
Color.LIME
372+
);
373+
expect(Color.fromCssColorString("hsla(240 100% 50% / 1.0)")).toEqual(
374+
Color.BLUE
375+
);
376+
expect(Color.fromCssColorString("hsla(220 60% 50% / 0.6)")).toEqualEpsilon(
377+
new Color(0.2, 0.4, 0.8, 0.6),
378+
CesiumMath.EPSILON15
379+
);
380+
});
381+
316382
it("fromCssColorString wraps hue into valid range for hsl() format", function () {
317383
expect(Color.fromCssColorString("hsl(720, 100%, 50%)")).toEqual(Color.RED);
318384
expect(Color.fromCssColorString("hsla(720, 100%, 50%, 1.0)")).toEqual(
@@ -363,6 +429,7 @@ describe("Core/Color", function () {
363429
expect(Color.fromCssColorString("rgb( 255, 255, 255) ")).toEqual(
364430
Color.WHITE
365431
);
432+
expect(Color.fromCssColorString("rgb (0 0 255) ")).toEqual(Color.BLUE);
366433
expect(Color.fromCssColorString(" #FF0000")).toEqual(Color.RED);
367434
expect(Color.fromCssColorString("#FF0 ")).toEqual(Color.YELLOW);
368435
expect(Color.fromCssColorString(" hsla(720, 100%, 50%, 1.0) ")).toEqual(

0 commit comments

Comments
 (0)