ACP2E-3559: [FRESH] HEX code is not updating correctly in SWATCH

Author: bubasuma

app/code/Magento/Swatches/Test/Mftf/Test/AdminCreateVisualSwatchTest.xml

@@ -1,11 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
  /**
-  * Copyright © Magento, Inc. All rights reserved.
-  * See COPYING.txt for license details.
+  * Copyright 2018 Adobe
+  * All Rights Reserved.
   */
 -->
-
 <tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
     <test name="AdminCreateVisualSwatchTest">
@@ -98,11 +97,11 @@
         <!-- Assert that the Save was successful after round trip to server -->
         <actionGroup ref="AssertSwatchColorActionGroup" stepKey="assertSwatch1">
             <argument name="nthSwatch" value="1"/>
-            <argument name="expectedStyle" value="background: rgb(231, 77, 60);"/>
+            <argument name="expectedStyle" value="background: rgb(231, 76, 60);"/>
         </actionGroup>
         <actionGroup ref="AssertSwatchColorActionGroup" stepKey="assertSwatch2">
             <argument name="nthSwatch" value="2"/>
-            <argument name="expectedStyle" value="background: rgb(46, 204, 112);"/>
+            <argument name="expectedStyle" value="background: rgb(46, 204, 113);"/>
         </actionGroup>
         <actionGroup ref="AssertSwatchColorActionGroup" stepKey="assertSwatch3">
             <argument name="nthSwatch" value="3"/>
@@ -156,11 +155,11 @@
         <!-- Verify that the storefront shows the swatches too -->
         <actionGroup ref="AssertStorefrontSwatchColorActionGroup" stepKey="assertSwatch4">
             <argument name="nthSwatch" value="1"/>
-            <argument name="expectedRgb" value="rgb(231, 77, 60)"/>
+            <argument name="expectedRgb" value="rgb(231, 76, 60)"/>
         </actionGroup>
         <actionGroup ref="AssertStorefrontSwatchColorActionGroup" stepKey="assertSwatch5">
             <argument name="nthSwatch" value="2"/>
-            <argument name="expectedRgb" value="rgb(46, 204, 112)"/>
+            <argument name="expectedRgb" value="rgb(46, 204, 113)"/>
         </actionGroup>
         <actionGroup ref="AssertStorefrontSwatchColorActionGroup" stepKey="assertSwatch6">
             <argument name="nthSwatch" value="3"/>

app/code/Magento/Swatches/Test/Mftf/Test/AdminDisablingSwatchTooltipsTest.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
  /**
-  * Copyright © Magento, Inc. All rights reserved.
-  * See COPYING.txt for license details.
+  * Copyright 2018 Adobe
+  * All Rights Reserved.
   */
 -->
 
@@ -77,7 +77,7 @@
         <!-- Assert that the Save was successful after round trip to server -->
         <actionGroup ref="AssertSwatchColorActionGroup" stepKey="assertSwatchAdmin">
             <argument name="nthSwatch" value="1"/>
-            <argument name="expectedStyle" value="background: rgb(231, 77, 60);"/>
+            <argument name="expectedStyle" value="background: rgb(231, 76, 60);"/>
         </actionGroup>
 
         <!-- Create a configurable product to verify the storefront with -->
@@ -138,7 +138,7 @@
         <!-- Verify that the storefront shows the swatches too -->
         <actionGroup ref="AssertStorefrontSwatchColorActionGroup" stepKey="assertSwatchStorefront">
             <argument name="nthSwatch" value="1"/>
-            <argument name="expectedRgb" value="rgb(231, 77, 60)"/>
+            <argument name="expectedRgb" value="rgb(231, 76, 60)"/>
         </actionGroup>
 
         <!-- Verify swatch tooltips are visible-->

app/code/Magento/Swatches/Test/Mftf/Test/AdminVisualSwatchAttributeFunctionalityTest.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
  /**
-  * Copyright © Magento, Inc. All rights reserved.
-  * See COPYING.txt for license details.
+  * Copyright 2024 Adobe
+  * All Rights Reserved.
   */
 -->
 
@@ -59,7 +59,7 @@
         <waitForElementVisible selector="{{AdminProductMessagesSection.successMessage}}" stepKey="waitForSuccessMessage"/>
         <actionGroup ref="AssertSwatchColorActionGroup" stepKey="assertSwatch1">
             <argument name="nthSwatch" value="2"/>
-            <argument name="expectedStyle" value="background: rgb(231, 77, 60);"/>
+            <argument name="expectedStyle" value="background: rgb(231, 76, 60);"/>
         </actionGroup>
         <!-- Add file swatch-->
         <actionGroup ref="AdminUploadFileInVisualSwatchActionGroup" stepKey="addFileSwatch">

app/code/Magento/Swatches/Test/Mftf/Test/StorefrontCustomerCanChangeProductOptionsUsingSwatchesTest.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
  /**
-  * Copyright © Magento, Inc. All rights reserved.
-  * See COPYING.txt for license details.
+  * Copyright 2019 Adobe
+  * All Rights Reserved.
   */
 -->
 
@@ -50,7 +50,7 @@
         <actionGroup ref="StorefrontCartPageOpenActionGroup" stepKey="openShoppingCartPage"/>
         <actionGroup ref="StorefrontUpdateCartConfigurableProductWithSwatchesActionGroup" stepKey="updateConfigurableProductInTheCart">
             <argument name="product" value="_defaultProduct"/>
-            <argument name="productOption" value="e74d3c"/>
+            <argument name="productOption" value="e74c3c"/>
         </actionGroup>
     </test>
 </tests>

app/code/Magento/Swatches/Test/Mftf/Test/StorefrontFilterByVisualSwatchTest.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
  /**
-  * Copyright © Magento, Inc. All rights reserved.
-  * See COPYING.txt for license details.
+  * Copyright 2018 Adobe
+  * All Rights Reserved.
   */
 -->
 
@@ -105,7 +105,7 @@
         <grabAttributeFrom selector="{{StorefrontCategorySidebarSection.attributeNthOption(ProductAttributeFrontendLabel.label, '1')}}" userInput="style" stepKey="grabSwatch1"/>
         <grabAttributeFrom selector="{{StorefrontCategorySidebarSection.attributeNthOption(ProductAttributeFrontendLabel.label, '2')}}" userInput="style" stepKey="grabSwatch2"/>
         <assertStringContainsString stepKey="assertSwatch1">
-            <expectedResult type="string">rgb(231, 77, 60)</expectedResult>
+            <expectedResult type="string">rgb(231, 76, 60)</expectedResult>
             <actualResult type="string">{$grabSwatch1}</actualResult>
         </assertStringContainsString>
         <assertStringContainsString stepKey="assertSwatch2">

dev/tests/static/testsuite/Magento/Test/Js/_files/blacklist/magento.txt

@@ -16,6 +16,7 @@ lib/web/varien/js.js
 lib/web/jquery/jquery.validate.js
 lib/web/prototype/**/*.js
 lib/web/jquery/jstree/jquery.jstree.js
+lib/web/jquery/colorpicker/js/colorpicker.js
 
 // MINIFIED FILES
 app/code/**/*.min.js

lib/web/jquery/colorpicker/js/colorpicker.js

@@ -2,9 +2,9 @@
  *
  * Color picker
  * Author: Stefan Petre www.eyecon.ro
- * 
+ *
  * Dual licensed under the MIT and GPL licenses
- * 
+ *
  */
 
 define([
@@ -28,6 +28,7 @@ define([
 				livePreview: true,
 				flat: false
 			},
+            HSBtoRGBCache = {},
 			fillRGBFields = function  (hsb, cal) {
 				var rgb = HSBToRGB(hsb);
 				$(cal).data('colorpicker').fields
@@ -115,7 +116,7 @@ define([
 					y: ev.pageY,
 					field: field,
 					val: parseInt(field.val(), 10),
-					preview: $(this).parent().parent().data('colorpicker').livePreview					
+					preview: $(this).parent().parent().data('colorpicker').livePreview
 				};
 				$(document).bind('mouseup', current, upIncrement);
 				$(document).bind('mousemove', current, moveIncrement);
@@ -265,7 +266,7 @@ define([
 					s: Math.min(100, Math.max(0, hsb.s)),
 					b: Math.min(100, Math.max(0, hsb.b))
 				};
-			}, 
+			},
 			fixRGB = function (rgb) {
 				return {
 					r: Math.min(255, Math.max(0, rgb.r)),
@@ -284,7 +285,7 @@ define([
 					hex = o.join('');
 				}
 				return hex;
-			}, 
+			},
 			HexToRGB = function (hex) {
 				var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
 				return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
@@ -303,7 +304,7 @@ define([
 				var delta = max - min;
 				hsb.b = max;
 				if (max != 0) {
-					
+
 				}
 				hsb.s = max != 0 ? 255 * delta / max : 0;
 				if (hsb.s != 0) {
@@ -323,13 +324,21 @@ define([
 				}
 				hsb.s *= 100/255;
 				hsb.b *= 100/255;
+                HSBtoRGBCache[hsb.h + '|' + hsb.s + '|' + hsb.b] = {r: rgb.r, g: rgb.g, b: rgb.b};
 				return hsb;
 			},
 			HSBToRGB = function (hsb) {
 				var rgb = {};
 				var h = Math.round(hsb.h);
 				var s = Math.round(hsb.s*255/100);
 				var v = Math.round(hsb.b*255/100);
+                // Use the cached value if available to prevent precision errors during RGB to HSB and HSB to RGB conversions.
+                // For instance: rgb(231, 76, 60) -> hsb(5.614035087719298, 74.02597402597402, 90.58823529411765) -> rgb(231, 77, 60)
+                // produces a slightly different RGB value than the original RGB value.
+                if (HSBtoRGBCache.hasOwnProperty(hsb.h + '|' + hsb.s + '|' + hsb.b)) {
+                    rgb = HSBtoRGBCache[hsb.h + '|' + hsb.s + '|' + hsb.b];
+                    return {r: rgb.r, g: rgb.g, b: rgb.b};
+                }
 				if(s == 0) {
 					rgb.r = rgb.g = rgb.b = v;
 				} else {
@@ -484,4 +493,4 @@ define([
 		ColorPickerShow: ColorPicker.showPicker,
 		ColorPickerSetColor: ColorPicker.setColor
 	});
-});
+});