Fixes related to parsing of colors in RGB functions (#2398)

* Fix leading whitespace in color string issue * Add parsing support for floating point numbers in rbg function * Update CHANGELOG.md
Automattic · Jul 15, 2024 · 83a5126 · 83a5126
1 parent f138b3a
commit 83a5126
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 ### Fixed
 
+
 3.0.0
 ==================
 
@@ -36,6 +37,8 @@ This release notably changes to using N-API. 🎉
 * Fix a potential memory leak. (#2229)
 * Fix the wrong type of setTransform
 * Fix the improper parsing of rgb functions issue. (#2300)
+* Fix issue related to improper parsing of leading and trailing whitespaces in CSS color. (#2301)
+* RGB functions should support real numbers now instead of just integers. (#2339)
 
 2.11.2
 ==================

diff --git a/src/color.cc b/src/color.cc
@@ -159,8 +159,9 @@ wrap_float(T value, T limit) {
 
 static bool
 parse_rgb_channel(const char** pStr, uint8_t *pChannel) {
-  int channel;
-  if (parse_integer(pStr, &channel)) {
+  float f_channel;
+  if (parse_css_number(pStr, &f_channel)) {
+    int channel = (int) ceil(f_channel);
     *pChannel = clip(channel, 0, 255);
     return true;
   }
@@ -739,6 +740,7 @@ rgba_from_hex_string(const char *str, short *ok) {
 
 static int32_t
 rgba_from_name_string(const char *str, short *ok) {
+  WHITESPACE;
   std::string lowered(str);
   std::transform(lowered.begin(), lowered.end(), lowered.begin(), tolower);
   auto color = named_colors.find(lowered);
@@ -765,6 +767,7 @@ rgba_from_name_string(const char *str, short *ok) {
 
 int32_t
 rgba_from_string(const char *str, short *ok) {
+  WHITESPACE;
   if ('#' == str[0])
     return rgba_from_hex_string(++str, ok);
   if (str == strstr(str, "rgba"))

diff --git a/test/canvas.test.js b/test/canvas.test.js
@@ -163,6 +163,13 @@ describe('Canvas', function () {
     ctx.fillStyle = '#FGG'
     assert.equal('#ff0000', ctx.fillStyle)
 
+    ctx.fillStyle = '      #FCA'
+    assert.equal('#ffccaa', ctx.fillStyle)
+
+    ctx.fillStyle = '         #ffccaa'
+    assert.equal('#ffccaa', ctx.fillStyle)
+
+
     ctx.fillStyle = '#fff'
     ctx.fillStyle = 'afasdfasdf'
     assert.equal('#ffffff', ctx.fillStyle)
@@ -282,7 +289,20 @@ describe('Canvas', function () {
     ctx.fillStyle = 'rgb( 255 200 90  0.1)'
     assert.equal('rgba(255, 200, 90, 0.10)', ctx.fillStyle)
 
+    ctx.fillStyle = '       rgb( 255 100 90  0.1)'
+    assert.equal('rgba(255, 100, 90, 0.10)', ctx.fillStyle)
+
+    ctx.fillStyle = 'rgb(124.00, 58, 26, 0)';
+    assert.equal('rgba(124, 58, 26, 0.00)', ctx.fillStyle);
+
+    ctx.fillStyle = 'rgb( 255, 200.09, 90, 40%)'
+    assert.equal('rgba(255, 201, 90, 0.40)', ctx.fillStyle)
+
+    ctx.fillStyle = 'rgb( 255.00, 199.03, 90, 50 %)'
+    assert.equal('rgba(255, 200, 90, 0.50)', ctx.fillStyle)
 
+    ctx.fillStyle = 'rgb( 255, 300.09, 90, 40%)'
+    assert.equal('rgba(255, 255, 90, 0.40)', ctx.fillStyle)
     // hsl / hsla tests
 
     ctx.fillStyle = 'hsl(0, 0%, 0%)'
@@ -306,6 +326,9 @@ describe('Canvas', function () {
     ctx.fillStyle = 'hsl(237, 76%, 25%)'
     assert.equal('#0f1470', ctx.fillStyle)
 
+    ctx.fillStyle = '      hsl(0, 150%, 150%)'
+    assert.equal('#ffffff', ctx.fillStyle)
+
     ctx.fillStyle = 'hsl(240, 73%, 25%)'
     assert.equal('#11116e', ctx.fillStyle)