itemengine-cypress-automation 1.0.155-migrationScripts-86e4c95.0 → 1.0.156-01AprilFixes-fc21452.0

package/cypress/e2e/ILC/GridFill/customizeLayoutFillColor.js

@@ -0,0 +1,475 @@
+import { gridFillPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { gridFillColorProperties } from "../../../fixtures/fillColorDefaultProperties";
+const css = Cypress.env('css');
+
+describe('Create item page - Grid fill: Customize layout section - \'Fill type\'', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Fill type\' section - contents', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        it('\'Fill type\' label should be displayed', () => {
+            utilities.verifyInnerText(gridFillPage.fillTypeLabel(), 'Fill type');
+            utilities.verifyElementVisibilityState(gridFillPage.fillTypeLabel(), 'visible');
+        });
+
+        it('\'Color\' and \'Image\' labels and radio buttons should be displayed and \'Color\' radio button should be selected', () => {
+            utilities.verifyInnerText(gridFillPage.colorLabel(), 'Color');
+            utilities.verifyElementVisibilityState(gridFillPage.colorLabel(), 'visible');
+            utilities.verifyInnerText(gridFillPage.imageLabel(), 'Image');
+            utilities.verifyElementVisibilityState(gridFillPage.imageLabel(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.colorRadioButton(), 'exist');
+            utilities.verifyElementVisibilityState(gridFillPage.imageRadioButton(), 'exist');
+            gridFillPage.steps.verifyColorRadioButtonIsSelected();
+        });
+
+        it(`\'Customize highlight properties\' accordion should have \'Default\' section with ${gridFillColorProperties['default'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(gridFillPage.defaultLabel(), gridFillColorProperties['default'].displayName);
+            utilities.verifyInnerText(gridFillPage.defaultFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(gridFillPage.defaultBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(gridFillPage.defaultFillColorHexCodeLabel(), gridFillColorProperties.default.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(gridFillPage.defaultBorderColorHexCodeLabel(), gridFillColorProperties.default.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(gridFillPage.defaultFillColorOpacityLabel(), `${gridFillColorProperties.default.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(gridFillPage.defaultBorderColorOpacityLabel(), `${gridFillColorProperties.default.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(gridFillPage.defaultFillColorBlock(), 'visible');
+            gridFillPage.steps.verifyDefaultFillColorBlockColor(gridFillColorProperties.default.colorProperties.fillColorRgbaValue);
+            utilities.verifyElementVisibilityState(gridFillPage.defaultBorderColorBlock(), 'visible');
+            gridFillPage.steps.verifyDefaultBorderColorBlockColor(gridFillColorProperties.default.colorProperties.borderColorRgbValue);
+        });
+
+        it(`\'Customize highlight properties\' accordion should have \'Hover\' section with ${gridFillColorProperties['hover'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(gridFillPage.hoverLabel(), gridFillColorProperties['hover'].displayName);
+            utilities.verifyInnerText(gridFillPage.hoverFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(gridFillPage.hoverBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(gridFillPage.hoverFillColorHexCodeLabel(), gridFillColorProperties.hover.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(gridFillPage.hoverBorderColorHexCodeLabel(), gridFillColorProperties.hover.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(gridFillPage.hoverFillColorOpacityLabel(), `${gridFillColorProperties.hover.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(gridFillPage.hoverBorderColorOpacityLabel(), `${gridFillColorProperties.hover.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(gridFillPage.hoverFillColorBlock(), 'visible');
+            gridFillPage.steps.verifyHoverFillColorBlockColor(gridFillColorProperties.hover.colorProperties.fillColorRgbaValue);
+            utilities.verifyElementVisibilityState(gridFillPage.hoverBorderColorBlock(), 'visible');
+            gridFillPage.steps.verifyHoverBorderColorBlockColor(gridFillColorProperties.hover.colorProperties.borderColorRgbValue);
+        });
+
+        it(`\'Customize highlight properties\' accordion should have \'Filled\' section with ${gridFillColorProperties['filled'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(gridFillPage.filledLabel(), gridFillColorProperties['filled'].displayName);
+            utilities.verifyInnerText(gridFillPage.filledFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(gridFillPage.filledBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(gridFillPage.filledFillColorHexCodeLabel(), gridFillColorProperties.filled.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(gridFillPage.filledBorderColorHexCodeLabel(), gridFillColorProperties.filled.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(gridFillPage.filledFillColorOpacityLabel(), `${gridFillColorProperties.filled.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(gridFillPage.filledBorderColorOpacityLabel(), `${gridFillColorProperties.filled.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(gridFillPage.filledFillColorBlock(), 'visible');
+            gridFillPage.steps.verifyFilledFillColorBlockColor(gridFillColorProperties.filled.colorProperties.fillColorRgbaValue);
+            utilities.verifyElementVisibilityState(gridFillPage.filledBorderColorBlock(), 'visible');
+            gridFillPage.steps.verifyFilledBorderColorBlockColor(gridFillColorProperties.filled.colorProperties.borderColorRgbValue);
+        });
+
+        it('\'Apply pattern on active state\' label and checkbox should be displayed and by default the checkbox should be checked', () => {
+            utilities.verifyInnerText(gridFillPage.applyPatternOnActiveStateLabel(), 'Apply pattern on active state');
+            utilities.verifyElementVisibilityState(gridFillPage.applyPatternOnActiveStateLabel(), 'visible');
+            gridFillPage.steps.verifyApplyPatternOnActiveStateCheckboxIsNotChecked();
+        });
+
+        it('CSS of \'Fill type\' color section', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridFillPage.fillTypeLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridFillPage.colorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(gridFillPage.imageLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(gridFillPage.applyPatternOnActiveStateLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            gridFillPage.steps.verifyFillColorDefaultContentCSS();
+            gridFillPage.steps.verifyFillColorHoverContentCSS();
+            gridFillPage.steps.verifyFillColorFilledContentCSS();
+        });
+
+        //Accessibility verified in customizeLayoutSectionShadeCellsGridBorders.js
+    });
+
+    describe('\'Fill type\' section - Select color contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        it('When the user clicks on the color block, a color popup should be visible with a title \'Select color\',\'Color saturation\' and \'Color hue\' palette along with the color picker should be displayed, labels \'Selected color\', \'Hex\', \'Opacity\' along with the input field and \'Recommended colors\' label along with recommended color blocks - Red, Yellow, Green, Black should be displayed', () => {
+            gridFillPage.steps.clickOnFillColorBlock('defaultFillColor');
+            gridFillPage.steps.verifyColorPopupIsDisplayed();
+            gridFillPage.steps.verifyColorPopupSelectColorTitle();
+            gridFillPage.steps.verifyColorSaturationPaletteAndPicker();
+            gridFillPage.steps.verifySaturationPaletteColor('rgb(189, 203, 255)');
+            gridFillPage.steps.verifyColorHuePaletteAndPicker();
+            gridFillPage.steps.verifyHuePaletteColor('rgb(0, 55, 255)');
+            gridFillPage.steps.verifySelectedColorLabelAndSelectedColorBlock();
+            gridFillPage.steps.verifyHexLabelAndInputField();
+            gridFillPage.steps.verifyOpacityLabelSliderAndInputField();
+            gridFillPage.steps.verifyRecommendedColorBlocksLabel();
+            gridFillPage.steps.verifyColorPopupCancelButton();
+            gridFillPage.steps.verifyColorPopupOkButton();
+            gridFillPage.steps.clickOnCancelButton();
+        });
+
+        it('When the user clicks on the default \'Fill color\' block, a color popup should be visible with pre-filled values of \'Selected color\', \'Hex code\' and \'Opacity\' and the user should able to change the selected color and opacity which should be displayed in the default \'Fill color\' block', () => {
+            gridFillPage.steps.clickOnFillColorBlock('defaultFillColor');
+            gridFillPage.steps.verifyColorPopupIsDisplayed();
+            gridFillPage.steps.verifySelectedColorBlock(gridFillColorProperties.default.colorProperties.fillColorRgbaValue);
+            gridFillPage.steps.verifyHexValue(gridFillColorProperties.default.colorProperties.fillColorHexValue);
+            gridFillPage.steps.verifyOpacityInputFieldValue(gridFillColorProperties.default.colorProperties.fillColorOpacity);
+            gridFillPage.steps.verifyOpacitySliderValue(gridFillColorProperties.default.colorProperties.fillColorOpacity);
+            gridFillPage.steps.selectRecommendedColorBlock(0);
+            gridFillPage.steps.addInputToOpacityInputField(20);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.verifyDefaultFillColorBlockColor('rgba(229, 76, 25, 0.2)');
+            gridFillPage.steps.verifyDefaultFillColorHexCodeLabel('#E54C19');
+            gridFillPage.steps.verifyDefaultFillColorOpacityLabel('20%');
+        });
+
+        it('When the user clicks on the default \'Border color\' block, a color popup should be visible with pre-filled values of \'Selected color\', \'Hex code\' and \'Opacity\' and the user should able to change the selected color and opacity which should be displayed in the default \'Border color\' block', () => {
+            gridFillPage.steps.clickOnFillColorBlock('defaultBorderColor');
+            gridFillPage.steps.verifyColorPopupIsDisplayed();
+            gridFillPage.steps.verifySelectedColorBlock(gridFillColorProperties.default.colorProperties.borderColorRgbValue);
+            gridFillPage.steps.verifyHexValue(gridFillColorProperties.default.colorProperties.borderColorHexValue);
+            gridFillPage.steps.verifyOpacityInputFieldValue(gridFillColorProperties.default.colorProperties.borderColorOpacity);
+            gridFillPage.steps.verifyOpacitySliderValue(gridFillColorProperties.default.colorProperties.borderColorOpacity);
+            gridFillPage.steps.selectRecommendedColorBlock(1);
+            gridFillPage.steps.addInputToOpacityInputField(30);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.verifyDefaultBorderColorBlockColor('rgba(255, 240, 25, 0.3)');
+            gridFillPage.steps.verifyDefaultBorderColorHexCodeLabel('#FFF019');
+            gridFillPage.steps.verifyDefaultBorderColorOpacityLabel('30%')
+        });
+
+        it('When the user clicks on the hover \'Fill color\' block, a color popup should be visible with pre-filled values of \'Selected color\', \'Hex code\' and \'Opacity\' and the user should able to change the selected color and opacity which should be displayed in the hover \'Fill color\' block', () => {
+            gridFillPage.steps.clickOnFillColorBlock('hoverFillColor');
+            gridFillPage.steps.verifyColorPopupIsDisplayed();
+            gridFillPage.steps.verifySelectedColorBlock(gridFillColorProperties.hover.colorProperties.fillColorRgbaValue);
+            gridFillPage.steps.verifyHexValue(gridFillColorProperties.hover.colorProperties.fillColorHexValue);
+            gridFillPage.steps.verifyOpacityInputFieldValue(gridFillColorProperties.hover.colorProperties.fillColorOpacity);
+            gridFillPage.steps.verifyOpacitySliderValue(gridFillColorProperties.hover.colorProperties.fillColorOpacity);
+            gridFillPage.steps.selectRecommendedColorBlock(2);
+            gridFillPage.steps.addInputToOpacityInputField(60);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.verifyHoverFillColorBlockColor('rgba(9, 179, 33, 0.6)');
+            gridFillPage.steps.verifyHoverFillColorHexCodeLabel('#09B321');
+            gridFillPage.steps.verifyHoverFillColorOpacityLabel('60%')
+        });
+
+        it('When the user clicks on the hover \'Border color\' block, a color popup should be visible with pre-filled values of \'Selected color\', \'Hex code\' and \'Opacity\' and the user should able to change the selected color and opacity which should be displayed in the hover \'Border color\' block', () => {
+            gridFillPage.steps.clickOnFillColorBlock('hoverBorderColor');
+            gridFillPage.steps.verifyColorPopupIsDisplayed();
+            gridFillPage.steps.verifySelectedColorBlock(gridFillColorProperties.hover.colorProperties.borderColorRgbValue);
+            gridFillPage.steps.verifyHexValue(gridFillColorProperties.hover.colorProperties.borderColorHexValue);
+            gridFillPage.steps.verifyOpacityInputFieldValue(gridFillColorProperties.hover.colorProperties.borderColorOpacity);
+            gridFillPage.steps.verifyOpacitySliderValue(gridFillColorProperties.hover.colorProperties.borderColorOpacity);
+            gridFillPage.steps.selectRecommendedColorBlock(3);
+            gridFillPage.steps.addInputToOpacityInputField(90);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.verifyHoverBorderColorBlockColor('rgba(0, 0, 0, 0.9)');
+            gridFillPage.steps.verifyHoverBorderColorHexCodeLabel('#000000');
+            gridFillPage.steps.verifyHoverBorderColorOpacityLabel('90%')
+        });
+
+        it('When the user clicks on the Filled \'Fill color\' block, a color popup should be visible with pre-filled values of \'Selected color\', \'Hex code\' and \'Opacity\' and the user should able to change the selected color and opacity which should be displayed in the Filled \'Fill color\' block', () => {
+            gridFillPage.steps.clickOnFillColorBlock('filledFillColor');
+            gridFillPage.steps.verifyColorPopupIsDisplayed();
+            gridFillPage.steps.verifySelectedColorBlock(gridFillColorProperties.filled.colorProperties.fillColorRgbaValue);
+            gridFillPage.steps.verifyHexValue(gridFillColorProperties.filled.colorProperties.fillColorHexValue);
+            gridFillPage.steps.verifyOpacityInputFieldValue(gridFillColorProperties.filled.colorProperties.fillColorOpacity);
+            gridFillPage.steps.verifyOpacitySliderValue(gridFillColorProperties.filled.colorProperties.fillColorOpacity);
+            gridFillPage.steps.selectRecommendedColorBlock(1);
+            gridFillPage.steps.addInputToOpacityInputField(10);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.verifyFilledFillColorBlockColor('rgba(255, 240, 25, 0.1)');
+            gridFillPage.steps.verifyFilledFillColorHexCodeLabel('#FFF019');
+            gridFillPage.steps.verifyFilledFillColorOpacityLabel('10%')
+        });
+
+        it('When the user clicks on the Filled \'Border color\' block, a color popup should be visible with pre-filled values of \'Selected color\', \'Hex code\' and \'Opacity\' and the user should able to change the selected color and opacity which should be displayed in the Filled \'Border color\' block', () => {
+            gridFillPage.steps.clickOnFillColorBlock('filledBorderColor');
+            gridFillPage.steps.verifyColorPopupIsDisplayed();
+            gridFillPage.steps.verifySelectedColorBlock(gridFillColorProperties.filled.colorProperties.borderColorRgbValue);
+            gridFillPage.steps.verifyHexValue(gridFillColorProperties.filled.colorProperties.borderColorHexValue);
+            gridFillPage.steps.verifyOpacityInputFieldValue(gridFillColorProperties.filled.colorProperties.borderColorOpacity);
+            gridFillPage.steps.verifyOpacitySliderValue(gridFillColorProperties.filled.colorProperties.borderColorOpacity);
+            gridFillPage.steps.selectRecommendedColorBlock(2);
+            gridFillPage.steps.addInputToOpacityInputField(80);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.verifyFilledBorderColorBlockColor('rgba(9, 179, 33, 0.8)');
+            gridFillPage.steps.verifyFilledBorderColorHexCodeLabel('#09B321');
+            gridFillPage.steps.verifyFilledBorderColorOpacityLabel('80%')
+        });
+    });
+
+    describe('\'Fill type\' section - Fill color functionality in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        it('When user changes the default fill color and border color, then the updated colors should be applied to all the grids in edit tab', () => {
+            gridFillPage.steps.clickOnFillColorBlock('defaultFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(0);
+            gridFillPage.steps.addInputToOpacityInputField(30);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('defaultBorderColor');
+            gridFillPage.steps.selectRecommendedColorBlock(1);
+            gridFillPage.steps.addInputToOpacityInputField(50);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.verifyDefaultStateCSSForGridInEditTab('rgba(229, 76, 25, 0.3)', 'rgba(255, 240, 25, 0.5)');
+        });
+
+        it('When user changes the hover fill color and border color, then the updated colors should be applied to all the grids in edit tab', () => {
+            gridFillPage.steps.clickOnFillColorBlock('hoverFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(2);
+            gridFillPage.steps.addInputToOpacityInputField(60);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('hoverBorderColor');
+            gridFillPage.steps.selectRecommendedColorBlock(3);
+            gridFillPage.steps.addInputToOpacityInputField(70);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.verifyHoverStateCSSForGridInEditTab('rgba(9, 179, 33, 0.6)', 'rgba(0, 0, 0, 0.7)');
+        });
+
+        it('When user changes the filled fill color and border color, then the updated colors should be applied to all the grids in edit tab', () => {
+            gridFillPage.steps.clickOnFillColorBlock('filledFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(1);
+            gridFillPage.steps.addInputToOpacityInputField(50);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('filledBorderColor');
+            gridFillPage.steps.selectRecommendedColorBlock(3);
+            gridFillPage.steps.addInputToOpacityInputField(80);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.verifyFilledStateCSSForGridInEditTab('rgba(255, 240, 25, 0.5)', 'rgba(0, 0, 0, 0.8)');
+        });
+    });
+
+    describe('\'Fill type\' section - Fill color functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        it('When user changes the default fill color and border color, then the updated colors should be applied to the grid in preview tab', () => {
+            gridFillPage.steps.clickOnFillColorBlock('defaultFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(0);
+            gridFillPage.steps.addInputToOpacityInputField(30);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('defaultBorderColor');
+            gridFillPage.steps.selectRecommendedColorBlock(1);
+            gridFillPage.steps.addInputToOpacityInputField(50);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyDefaultStateCSSForGridInPreviewTabTab('rgba(229, 76, 25, 0.3)', 'rgba(255, 240, 25, 0.5)');
+        });
+
+        it('When user changes the hover fill color and border color, then the updated colors should be applied to the grid in preview tab', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnFillColorBlock('hoverFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(2);
+            gridFillPage.steps.addInputToOpacityInputField(60);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('hoverBorderColor');
+            gridFillPage.steps.selectRecommendedColorBlock(3);
+            gridFillPage.steps.addInputToOpacityInputField(70);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyHoverStateCSSForGridInPreviewTab('rgba(9, 179, 33, 0.6)', 'rgba(0, 0, 0, 0.7)');
+        });
+
+        it('When user changes the filled fill color and border color, then the updated colors should be applied to the grid in preview tab', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnFillColorBlock('filledFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(1);
+            gridFillPage.steps.addInputToOpacityInputField(50);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('filledBorderColor');
+            gridFillPage.steps.selectRecommendedColorBlock(3);
+            gridFillPage.steps.addInputToOpacityInputField(80);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyFilledStateCSSForGridInPreviewTab('rgba(255, 240, 25, 0.5)', 'rgba(0, 0, 0, 0.8)');
+        });
+    });
+
+    describe('\'Apply pattern on active state\' - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        it('User should be able to check \'Apply pattern on active state\' checkbox', () => {
+            gridFillPage.steps.checkApplyPatternOnActiveStateCheckbox();
+        });
+
+        it('When user \'Apply pattern on active state\' checkbox is checked, then pattern should be displayed on the fill color block in filled section', () => {
+            gridFillPage.steps.verifyPatternAppliedOnFilledState();
+        })
+
+        it('When \'Apply pattern on active state\' checkbox is checked and user shades cell in customize layout section grid, then pattern should be displayed in the shaded cell.', () => {
+            gridFillPage.steps.shadeCell(0, 0);
+            gridFillPage.steps.verifyPatternIsDisplayedInCellInCustomizeLayoutSection(0, 0);
+        });
+
+        it('When \'Apply pattern on active state\' checkbox is checked and user selects cell in specify correct answer section grid, then pattern should be displayed in the selected cell.', () => {
+            gridFillPage.steps.selectCellSpecifyCorrectAnswerSection(0, 0);
+            gridFillPage.steps.verifyPatternIsDisplayedInCellInSpecifyCorrectAnswerSection(0, 0);
+        });
+
+        it('User should be uncheck the \'Apply pattern on active state\' checkbox', () => {
+            gridFillPage.steps.uncheckApplyPatternOnActiveStateCheckbox();
+        });
+
+        it('When \'Apply pattern on active state\' checkbox is unchecked, then pattern should not be displayed in fill color block in filled section', () => {
+            gridFillPage.steps.verifyPatternNotAppliedOnFilledState();
+        });
+
+        it('When \'Apply pattern on active state\' checkbox is unchecked, then pattern should not be displayed in shaded/selected grid cells in edit tab', () => {
+            gridFillPage.steps.verifyPatternIsNotDisplayedInCellInCustomizeLayoutSection(0, 0);
+            gridFillPage.steps.verifyPatternIsNotDisplayedInCellInSpecifyCorrectAnswerSection(0, 0);
+        });
+    });
+
+    describe('\'Apply pattern on active state\' - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Apply pattern on active state\' checkbox is unchecked, then pattern should not be displayed in selected grid cell in preview tab', () => {
+            gridFillPage.steps.selectCellPreviewTab(0, 0);
+            gridFillPage.steps.verifyPatternIsNotDisplayedInCellInPreviewTab(0, 0);
+        });
+
+        it('When \'Apply pattern on active state\' checkbox is checked and user selects cell in preview tab grid, then pattern should be displayed in the selected cell.', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.checkApplyPatternOnActiveStateCheckbox();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.selectCellPreviewTab(0, 0);
+            gridFillPage.steps.verifyPatternIsDisplayedInCellInPreviewTab(0, 0);
+        });
+    });
+
+    describe('\'Reset color\' button - functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        it('When user has made no changes in color section, then a disabled reset color button should be displayed', () => {
+            utilities.verifyInnerText(gridFillPage.resetButton(), 'Reset color');
+            utilities.verifyElementVisibilityState(gridFillPage.resetButton(), 'visible');
+            utilities.verifyElementDisabled(gridFillPage.resetButton());
+        });
+
+        it('When user makes any changes in the color properties, then \'Reset color\' button should be enabled', () => {
+            gridFillPage.steps.clickOnFillColorBlock('defaultFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(0);
+            gridFillPage.steps.addInputToOpacityInputField(30);
+            gridFillPage.steps.clickOnOkButton();
+            utilities.verifyElementNotDisabled(gridFillPage.resetButton());
+        });
+
+        it('CSS of enabled \'Reset color\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridFillPage.resetButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of enabled \'Reset color\' button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridFillPage.resetButton());
+        });
+
+        it('When user had made changes in the color properties and clicks on \'Reset color\' button, then the previously made changes should be reset to default values', () => {
+            gridFillPage.steps.clickOnFillColorBlock('defaultFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(0);
+            gridFillPage.steps.addInputToOpacityInputField(30);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('defaultBorderColor');
+            gridFillPage.steps.selectRecommendedColorBlock(1);
+            gridFillPage.steps.addInputToOpacityInputField(50);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('hoverFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(2);
+            gridFillPage.steps.addInputToOpacityInputField(60);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('hoverBorderColor');
+            gridFillPage.steps.selectRecommendedColorBlock(3);
+            gridFillPage.steps.addInputToOpacityInputField(70);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('filledFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(1);
+            gridFillPage.steps.addInputToOpacityInputField(50);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('filledBorderColor');
+            gridFillPage.steps.selectRecommendedColorBlock(3);
+            gridFillPage.steps.addInputToOpacityInputField(80);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnResetColorButton();
+            gridFillPage.steps.verifyDefaultFillColorBlockColor(gridFillColorProperties.default.colorProperties.fillColorRgbaValue);
+            gridFillPage.steps.verifyDefaultBorderColorBlockColor(gridFillColorProperties.default.colorProperties.borderColorRgbValue);
+            gridFillPage.steps.verifyHoverFillColorBlockColor(gridFillColorProperties.hover.colorProperties.fillColorRgbaValue);
+            gridFillPage.steps.verifyHoverBorderColorBlockColor(gridFillColorProperties.hover.colorProperties.borderColorRgbValue);
+            gridFillPage.steps.verifyFilledFillColorBlockColor(gridFillColorProperties.filled.colorProperties.fillColorRgbaValue);
+            gridFillPage.steps.verifyFilledBorderColorBlockColor(gridFillColorProperties.filled.colorProperties.borderColorRgbValue);
+        });
+
+        it('The \'Reset color\' button should be disabled again', () => {
+            utilities.verifyElementDisabled(gridFillPage.resetButton());
+        });
+
+        it('When user shades/selects cells with updated color values and clicks on \'Reset color\' button, then the css of shaded/selected cell should be reset to default values', () => {
+            gridFillPage.steps.clickOnFillColorBlock('filledFillColor');
+            gridFillPage.steps.selectRecommendedColorBlock(1);
+            gridFillPage.steps.addInputToOpacityInputField(50);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.clickOnFillColorBlock('filledBorderColor');
+            gridFillPage.steps.selectRecommendedColorBlock(3);
+            gridFillPage.steps.addInputToOpacityInputField(80);
+            gridFillPage.steps.clickOnOkButton();
+            gridFillPage.steps.shadeCell(0, 0);
+            gridFillPage.steps.clickOnResetColorButton();
+            utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0), {
+                'background-color': `${gridFillColorProperties.filled.colorProperties.fillColorRgbaValue}`,
+                'border-color': `${gridFillColorProperties.filled.colorProperties.borderColorRgbValue}`
+            });
+        });
+    });
+});