Color: Support HSLA with decimal percentage values. (#24461)

* Color: Support HSLA with decimal percentage values.

* Color: Clean up.

src/math/Color.js

@@ -222,12 +222,12 @@ class Color {
 				case 'hsl':
 				case 'hsla':
 
-					if ( color = /^\s*(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec( components ) ) {
+					if ( color = /^\s*(\d*\.?\d+)\s*,\s*(\d*\.?\d+)\%\s*,\s*(\d*\.?\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec( components ) ) {
 
 						// hsl(120,50%,50%) hsla(120,50%,50%,0.5)
 						const h = parseFloat( color[ 1 ] ) / 360;
-						const s = parseInt( color[ 2 ], 10 ) / 100;
-						const l = parseInt( color[ 3 ], 10 ) / 100;
+						const s = parseFloat( color[ 2 ] ) / 100;
+						const l = parseFloat( color[ 3 ] ) / 100;
 
 						handleAlpha( color[ 4 ] );
 

test/unit/src/math/Color.tests.js

@@ -611,6 +611,30 @@ export default QUnit.module( 'Maths', () => {
 
 		} );
 
+		QUnit.test( 'setStyleHSLRedWithDecimals', ( assert ) => {
+
+			var c = new Color();
+			c.setStyle( 'hsl(360,100.0%,50.0%)' );
+			assert.ok( c.r == 1, 'Red: ' + c.r );
+			assert.ok( c.g === 0, 'Green: ' + c.g );
+			assert.ok( c.b === 0, 'Blue: ' + c.b );
+
+		} );
+
+		QUnit.test( 'setStyleHSLARedWithDecimals', ( assert ) => {
+
+			var c = new Color();
+
+			console.level = CONSOLE_LEVEL.ERROR;
+			c.setStyle( 'hsla(360,100.0%,50.0%,0.5)' );
+			console.level = CONSOLE_LEVEL.DEFAULT;
+
+			assert.ok( c.r == 1, 'Red: ' + c.r );
+			assert.ok( c.g === 0, 'Green: ' + c.g );
+			assert.ok( c.b === 0, 'Blue: ' + c.b );
+
+		} );
+
 		QUnit.test( 'setStyleHexSkyBlue', ( assert ) => {
 
 			var c = new Color();