MC-3864: Fix alpha value in background colour

- Adding tests for hsla & hsva

Author: dhaecker

app/code/Magento/PageBuilder/Test/Mftf/Data/BackgroundFormData.xml

@@ -87,6 +87,15 @@
         <data key="hex">#ff8400</data>
         <data key="editPanelValue">#ff8400</data>
     </entity>
+    <entity name="PageBuilderBackgroundColor_HSLa_Orange" type="pagebuilder_background_color_property">
+        <data key="name">Background Color</data>
+        <data key="section">background</data>
+        <data key="fieldName">background_color</data>
+        <data key="value">hsla(31, 100%, 50%, .3)</data>
+        <data key="rgb">rgba(255, 132, 0, 0.3)</data>
+        <data key="hex">#ff8400</data>
+        <data key="editPanelValue">rgba(255, 132, 0, 0.3)</data>
+    </entity>
     <entity name="PageBuilderBackgroundColor_HSV_Orange" type="pagebuilder_background_color_property">
         <data key="name">Background Color</data>
         <data key="section">background</data>
@@ -96,6 +105,15 @@
         <data key="hex">#a96836</data>
         <data key="editPanelValue">#a96836</data>
     </entity>
+    <entity name="PageBuilderBackgroundColor_HSVa_Orange" type="pagebuilder_background_color_property">
+        <data key="name">Background Color</data>
+        <data key="section">background</data>
+        <data key="fieldName">background_color</data>
+        <data key="value">hsva(26.09, 68.05, 66.27, .4)</data>
+        <data key="rgb">rgba(169, 104, 54, 0.4)</data>
+        <data key="hex">#a96836</data>
+        <data key="editPanelValue">rgba(169, 104, 54, 0.4)</data>
+    </entity>
     <entity name="PageBuilderBackgroundColor_CenterColorPicker" type="pagebuilder_background_color_property">
         <data key="name">Background Color</data>
         <data key="section">background</data>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderCommonTest.xml

@@ -799,7 +799,9 @@
         <actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="inputRGBa">
             <argument name="property" value="PageBuilderBackgroundColor_RGBa_Blue"/>
         </actionGroup>
-        <waitForElementVisible selector="{{ColorPicker.panelColorSwatchColor(PageBuilderBackgroundColor_RGBa_Blue.section, PageBuilderBackgroundColor_RGBa_Blue.fieldName, PageBuilderBackgroundColor_RGBa_Blue.value)}}" stepKey="waitForColorSwatchColor"/>
+        <actionGroup ref="seeColorInColorSwatch" stepKey="seeSwatchRGBaColor">
+            <argument name="property" value="PageBuilderBackgroundColor_RGBa_Blue"/>
+        </actionGroup>
         <actionGroup ref="openAndValidateColorPickerValue" stepKey="validateRGBa">
             <argument name="color" value="{{PageBuilderBackgroundColor_RGBa_Blue.value}}"/>
         </actionGroup>
@@ -814,6 +816,39 @@
         <actionGroup ref="openAndValidateColorPickerValue" stepKey="validateHSL">
             <argument name="color" value="{{PageBuilderBackgroundColor_HSL_Orange.hex}}"/>
         </actionGroup>
+        <!-- Input: HSLa -->
+        <comment userInput="Input: HSLa" stepKey="commentHSLa"/>
+        <actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="inputHSLa">
+            <argument name="property" value="PageBuilderBackgroundColor_HSLa_Orange"/>
+        </actionGroup>
+        <actionGroup ref="seeColorInColorSwatch" stepKey="seeSwatchHSLaColor">
+            <argument name="property" value="PageBuilderBackgroundColor_HSLa_Orange"/>
+        </actionGroup>
+        <actionGroup ref="openAndValidateColorPickerValue" stepKey="validateHSLa">
+            <argument name="color" value="{{PageBuilderBackgroundColor_HSLa_Orange.rgb}}"/>
+        </actionGroup>
+        <!-- Input: HSV -->
+        <comment userInput="Input: HSV" stepKey="commentHSV"/>
+        <actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="inputHSV">
+            <argument name="property" value="PageBuilderBackgroundColor_HSV_Orange"/>
+        </actionGroup>
+        <actionGroup ref="seeColorInColorSwatch" stepKey="seeSwatchHSVColor">
+            <argument name="property" value="PageBuilderBackgroundColor_HSV_Orange"/>
+        </actionGroup>
+        <actionGroup ref="openAndValidateColorPickerValue" stepKey="validateHSV">
+            <argument name="color" value="{{PageBuilderBackgroundColor_HSV_Orange.hex}}"/>
+        </actionGroup>
+        <!-- Input: HSVa -->
+        <comment userInput="Input: HSVa" stepKey="commentHSVa"/>
+        <actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="inputHSVa">
+            <argument name="property" value="PageBuilderBackgroundColor_HSVa_Orange"/>
+        </actionGroup>
+        <actionGroup ref="seeColorInColorSwatch" stepKey="seeSwatchHSVaColor">
+            <argument name="property" value="PageBuilderBackgroundColor_HSVa_Orange"/>
+        </actionGroup>
+        <actionGroup ref="openAndValidateColorPickerValue" stepKey="validateHSVa">
+            <argument name="color" value="{{PageBuilderBackgroundColor_HSVa_Orange.rgb}}"/>
+        </actionGroup>
     </test>
     <test name="EditPanelColorPickerWindowFunctionality">
         <annotations>