itemengine-cypress-automation 1.0.25 → 1.0.26

package/cypress/e2e/ILC/HighlightImage/highlightImageCustomizeHighlightProperties.js

@@ -0,0 +1,1010 @@
+import { highlightImagePage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const flowerHighlightRegion = [[24, 6], [24, 24], [56, 24], [56, 6]];
+const leafHighlightRegion = [[54, 48], [54, 72], [82, 72], [82, 48]];
+
+const highlightColorProperties = {
+    default: {
+        displayName: 'Default',
+        colorProperties: {
+            fillColorHexValue: '#BAC9FF',
+            fillColorRgbaValue: 'rgba(186, 201, 255, 0.4)',
+            fillColorOpacity: 40,
+            borderColorHexValue: '#5200FF',
+            borderColorRgbValue: 'rgb(82, 0, 255)',
+            borderColorOpacity: 100
+        }
+    },
+    hover: {
+        displayName: 'Hover',
+        colorProperties: {
+            fillColorHexValue: '#BAC9FF',
+            fillColorRgbaValue: 'rgba(186, 201, 255, 0.4)',
+            fillColorOpacity: 40,
+            borderColorHexValue: '#4200CC',
+            borderColorRgbValue: 'rgb(66, 0, 204)',
+            borderColorOpacity: 100
+        }
+    },
+    active: {
+        displayName: 'Active',
+        colorProperties: {
+            fillColorHexValue: '#6B8BFF',
+            fillColorRgbaValue: 'rgba(107, 139, 255, 0.7)',
+            fillColorOpacity: 70,
+            borderColorHexValue: '#290080',
+            borderColorRgbValue: 'rgb(41, 0, 128)',
+            borderColorOpacity: 100
+        }
+    }
+}
+
+describe('Create Item page - Highlight image: Customize highlight properties', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Customize highlight properties content : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        it('When user has not uploaded an image \'Customize highlight properties\' accordion should not be displayed', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.customizeHighlightPropertiesPanel(), 'notExist');
+        });
+
+        it('When user adds uploads an image, \'Customize highlight properties\' accordion should be visible and by default it should be collapsed', () => {
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            utilities.verifyInnerText(highlightImagePage.customizeHighlightPropertiesLabel(), 'Customize highlight properties');
+            utilities.verifyElementVisibilityState(highlightImagePage.customizeHighlightPropertiesPanel(), 'visible');
+            highlightImagePage.steps.verifyCustomizeHighlightPropertiesCollapsedState();
+        });
+
+        it('When user clicks on the \'Customize highlight properties\' accordion it should be displayed in expanded state', () => {
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+        });
+
+        it('When user has not highlighted any region in the image then only \'Global\' tab should be displayed and by default it should be in active state', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.customizeHighlightPropertiesTab(), 'visible')
+            utilities.verifyInnerText(highlightImagePage.customizeHighlightPropertiesTab(), 'Global')
+            highlightImagePage.steps.verifyActiveStateOfCustomizeHighlightPropertiesTab(0);
+            highlightImagePage.steps.verifyCountOfCustomizePropertiesTab(1);
+        });
+
+        it('\'Highlight color\' label should be displayed', () => {
+            utilities.verifyInnerText(highlightImagePage.highlightColorLabel(), 'Highlight color');
+            utilities.verifyElementVisibilityState(highlightImagePage.highlightColorLabel(), 'visible');
+        });
+
+        it(`\'Customize highlight properties\' accordion should have \'Default\' section with ${highlightColorProperties['default'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(highlightImagePage.defaultLabel(), highlightColorProperties['default'].displayName);
+            utilities.verifyInnerText(highlightImagePage.defaultFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(highlightImagePage.defaultBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(highlightImagePage.defaultFillColorHexCodeLabel(), highlightColorProperties.default.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.defaultBorderColorHexCodeLabel(), highlightColorProperties.default.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.defaultFillColorOpacityLabel(), `${highlightColorProperties.default.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(highlightImagePage.defaultBorderColorOpacityLabel(), `${highlightColorProperties.default.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(highlightImagePage.defaultFillColorBlock(), 'visible');
+            highlightImagePage.steps.verifyDefaultFillColorBlockColor(highlightColorProperties.default.colorProperties.fillColorRgbaValue);
+            utilities.verifyElementVisibilityState(highlightImagePage.defaultBorderColorBlock(), 'visible');
+            highlightImagePage.steps.verifyDefaultBorderColorBlockColor(highlightColorProperties.default.colorProperties.borderColorRgbValue);
+        });
+
+        it(`\'Customize highlight properties\' accordion should have \'Hover\' section with ${highlightColorProperties['hover'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(highlightImagePage.hoverLabel(), highlightColorProperties['hover'].displayName);
+            utilities.verifyInnerText(highlightImagePage.hoverFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(highlightImagePage.hoverBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(highlightImagePage.hoverFillColorHexCodeLabel(), highlightColorProperties.hover.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.hoverBorderColorHexCodeLabel(), highlightColorProperties.hover.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.hoverFillColorOpacityLabel(), `${highlightColorProperties.hover.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(highlightImagePage.hoverBorderColorOpacityLabel(), `${highlightColorProperties.hover.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(highlightImagePage.hoverFillColorBlock(), 'visible');
+            highlightImagePage.steps.verifyHoverFillColorBlockColor(highlightColorProperties.hover.colorProperties.fillColorRgbaValue);
+            utilities.verifyElementVisibilityState(highlightImagePage.hoverBorderColorBlock(), 'visible');
+            highlightImagePage.steps.verifyHoverBorderColorBlockColor(highlightColorProperties.hover.colorProperties.borderColorRgbValue);
+        });
+
+        it(`\'Customize highlight properties\' accordion should have \'Active\' section with ${highlightColorProperties['active'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(highlightImagePage.activeLabel(), highlightColorProperties['active'].displayName);
+            utilities.verifyInnerText(highlightImagePage.activeFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(highlightImagePage.activeBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(highlightImagePage.activeFillColorHexCodeLabel(), highlightColorProperties.active.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.activeBorderColorHexCodeLabel(), highlightColorProperties.active.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.activeFillColorOpacityLabel(), `${highlightColorProperties.active.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(highlightImagePage.activeBorderColorOpacityLabel(), `${highlightColorProperties.active.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(highlightImagePage.activeFillColorBlock(), 'visible');
+            highlightImagePage.steps.verifyActiveFillColorBlockColor(highlightColorProperties.active.colorProperties.fillColorRgbaValue);
+            highlightImagePage.steps.verifyPatternAppliedOnActiveState();
+            utilities.verifyElementVisibilityState(highlightImagePage.activeBorderColorBlock(), 'visible');
+            highlightImagePage.steps.verifyActiveBorderColorBlockColor(highlightColorProperties.active.colorProperties.borderColorRgbValue);
+        });
+
+        it('\'Apply pattern on active state\' label and checkbox should be displayed and by default the checkbox should be checked', () => {
+            utilities.verifyInnerText(highlightImagePage.applyPatternOnActiveStateLabel(), 'Apply pattern on active state');
+            utilities.verifyElementVisibilityState(highlightImagePage.applyPatternOnActiveStateLabel(), 'visible');
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsChecked();
+        });
+
+        it('CSS of \'Customize highlight properties\' accordion', () => {
+            utilities.verifyCSS(highlightImagePage.customizeHighlightPropertiesLabel(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(highlightImagePage.customizeHighlightPropertiesPanel().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(highlightImagePage.customizeHighlightPropertiesTab(), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(highlightImagePage.highlightColorLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            highlightImagePage.steps.verifyCSSOfApplyPatternOnActiveState();
+            highlightImagePage.steps.verifyHighlightColorDefaultContentCSS();
+            highlightImagePage.steps.verifyHighlightColorHoverContentCSS();
+            highlightImagePage.steps.verifyHighlightColorActiveContentCSS();
+        });
+
+
+        it('Accessibility of \'Customize highlight properties\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.customizeHighlightPropertiesPanel());
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/546130
+    describe('Customize highlight properties accordion: Global tab popup contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+        });
+
+        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', () => {
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultFillColor');
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+            colorPopupComponent.steps.verifyColorPopupSelectColorTitle();
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(189, 203, 255)');
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 55, 255)');
+            colorPopupComponent.steps.verifySelectedColorLabelAndSelectedColorBlock();
+            colorPopupComponent.steps.verifyHexLabelAndInputField();
+            colorPopupComponent.steps.verifyOpacityLabelSliderAndInputField();
+            colorPopupComponent.steps.verifyRecommendedColorBlocksLabel();
+            colorPopupComponent.steps.verifyColorPopupCancelButton();
+            colorPopupComponent.steps.verifyColorPopupOkButton();
+            colorPopupComponent.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', () => {
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultFillColor');
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+            colorPopupComponent.steps.verifySelectedColorBlock(highlightColorProperties.default.colorProperties.fillColorRgbaValue);
+            colorPopupComponent.steps.verifyHexValue(highlightColorProperties.default.colorProperties.fillColorHexValue);
+            colorPopupComponent.steps.verifyOpacityInputFieldValue(highlightColorProperties.default.colorProperties.fillColorOpacity);
+            colorPopupComponent.steps.verifyOpacitySliderValue(highlightColorProperties.default.colorProperties.fillColorOpacity);
+            colorPopupComponent.steps.selectRecommendedColorBlock(0);
+            colorPopupComponent.steps.addInputToOpacityInputField(20);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyDefaultFillColorBlockColor('rgba(229, 76, 25, 0.2)');
+            highlightImagePage.steps.verifyDefaultFillColorHexCodeLabel('#E54C19');
+            highlightImagePage.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', () => {
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultBorderColor');
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+            colorPopupComponent.steps.verifySelectedColorBlock(highlightColorProperties.default.colorProperties.borderColorRgbValue);
+            colorPopupComponent.steps.verifyHexValue(highlightColorProperties.default.colorProperties.borderColorHexValue);
+            colorPopupComponent.steps.verifyOpacityInputFieldValue(highlightColorProperties.default.colorProperties.borderColorOpacity);
+            colorPopupComponent.steps.verifyOpacitySliderValue(highlightColorProperties.default.colorProperties.borderColorOpacity);
+            colorPopupComponent.steps.selectRecommendedColorBlock(1);
+            colorPopupComponent.steps.addInputToOpacityInputField(30);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyDefaultBorderColorBlockColor('rgba(255, 240, 25, 0.3)');
+            highlightImagePage.steps.verifyDefaultBorderColorHexCodeLabel('#FFF019');
+            highlightImagePage.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', () => {
+            highlightImagePage.steps.clickOnHighlightColorBlock('hoverFillColor');
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+            colorPopupComponent.steps.verifySelectedColorBlock(highlightColorProperties.hover.colorProperties.fillColorRgbaValue);
+            colorPopupComponent.steps.verifyHexValue(highlightColorProperties.hover.colorProperties.fillColorHexValue);
+            colorPopupComponent.steps.verifyOpacityInputFieldValue(highlightColorProperties.hover.colorProperties.fillColorOpacity);
+            colorPopupComponent.steps.verifyOpacitySliderValue(highlightColorProperties.hover.colorProperties.fillColorOpacity);
+            colorPopupComponent.steps.selectRecommendedColorBlock(2);
+            colorPopupComponent.steps.addInputToOpacityInputField(60);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyHoverFillColorBlockColor('rgba(9, 179, 33, 0.6)');
+            highlightImagePage.steps.verifyHoverFillColorHexCodeLabel('#09B321');
+            highlightImagePage.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', () => {
+            highlightImagePage.steps.clickOnHighlightColorBlock('hoverBorderColor');
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+            colorPopupComponent.steps.verifySelectedColorBlock(highlightColorProperties.hover.colorProperties.borderColorRgbValue);
+            colorPopupComponent.steps.verifyHexValue(highlightColorProperties.hover.colorProperties.borderColorHexValue);
+            colorPopupComponent.steps.verifyOpacityInputFieldValue(highlightColorProperties.hover.colorProperties.borderColorOpacity);
+            colorPopupComponent.steps.verifyOpacitySliderValue(highlightColorProperties.hover.colorProperties.borderColorOpacity);
+            colorPopupComponent.steps.selectRecommendedColorBlock(3);
+            colorPopupComponent.steps.addInputToOpacityInputField(90);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyHoverBorderColorBlockColor('rgba(0, 0, 0, 0.9)');
+            highlightImagePage.steps.verifyHoverBorderColorHexCodeLabel('#000000');
+            highlightImagePage.steps.verifyHoverBorderColorOpacityLabel('90%')
+        });
+
+        it('When the user clicks on the active \'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 active \'Fill color\' block', () => {
+            highlightImagePage.steps.clickOnHighlightColorBlock('activeFillColor');
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+            colorPopupComponent.steps.verifySelectedColorBlock(highlightColorProperties.active.colorProperties.fillColorRgbaValue);
+            colorPopupComponent.steps.verifyHexValue(highlightColorProperties.active.colorProperties.fillColorHexValue);
+            colorPopupComponent.steps.verifyOpacityInputFieldValue(highlightColorProperties.active.colorProperties.fillColorOpacity);
+            colorPopupComponent.steps.verifyOpacitySliderValue(highlightColorProperties.active.colorProperties.fillColorOpacity);
+            colorPopupComponent.steps.selectRecommendedColorBlock(1);
+            colorPopupComponent.steps.addInputToOpacityInputField(10);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyActiveFillColorBlockColor('rgba(255, 240, 25, 0.1)');
+            highlightImagePage.steps.verifyActiveFillColorHexCodeLabel('#FFF019');
+            highlightImagePage.steps.verifyActiveFillColorOpacityLabel('10%')
+        });
+
+        it('When the user clicks on the active \'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 active \'Border color\' block', () => {
+            highlightImagePage.steps.clickOnHighlightColorBlock('activeBorderColor');
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+            colorPopupComponent.steps.verifySelectedColorBlock(highlightColorProperties.active.colorProperties.borderColorRgbValue);
+            colorPopupComponent.steps.verifyHexValue(highlightColorProperties.active.colorProperties.borderColorHexValue);
+            colorPopupComponent.steps.verifyOpacityInputFieldValue(highlightColorProperties.active.colorProperties.borderColorOpacity);
+            colorPopupComponent.steps.verifyOpacitySliderValue(highlightColorProperties.active.colorProperties.borderColorOpacity);
+            colorPopupComponent.steps.selectRecommendedColorBlock(2);
+            colorPopupComponent.steps.addInputToOpacityInputField(80);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyActiveBorderColorBlockColor('rgba(9, 179, 33, 0.8)');
+            highlightImagePage.steps.verifyActiveBorderColorHexCodeLabel('#09B321');
+            highlightImagePage.steps.verifyActiveBorderColorOpacityLabel('80%')
+        });
+    });
+
+    describe('Customize highlight properties accordion: Option tab default contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+        });
+
+        it('When the user has not highlighted any region then, \'Option 1\' tab should not be displayed in \'Customize highlight properties\' accordion', () => {
+            highlightImagePage.steps.verifyCountOfCustomizePropertiesTab(1);
+            utilities.verifyInnerText(highlightImagePage.customizeHighlightPropertiesTab(), 'Global');
+        });
+
+        it('When the user highlights a region then \'Option 1\' tab should be displayed in \'Customize highlight properties\' and by default it should be in inactive state', () => {
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(0, flowerHighlightRegion);
+            highlightImagePage.steps.verifyCountOfCustomizePropertiesTab(2);
+            highlightImagePage.steps.verifyOptionTabIsDisplayed(1);
+            highlightImagePage.steps.verifyInactiveStateOfCustomizeHighlightPropertiesTab(1);
+        });
+
+        it('When the user highlights another region then a new tab should be added with the name \'Option 2\' in \'Customize highlight properties\' section', () => {
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(1, leafHighlightRegion);
+            highlightImagePage.steps.verifyCountOfCustomizePropertiesTab(3);
+            highlightImagePage.steps.verifyOptionTabIsDisplayed(2);
+        });
+
+        it('When the user deletes the first highlight region then \'Option 1\' tab should be removed and the name of the option tabs should get updated accordingly in \'Customize highlight properties\' section', () => {
+            highlightImagePage.steps.eraseAHighlightRegion([flowerHighlightRegion[0]]);
+            highlightImagePage.steps.verifyCountOfCustomizePropertiesTab(2);
+            highlightImagePage.steps.verifyOptionTabIsDisplayed(1);
+        });
+
+        it('When the user switches to \'Option 1\' tab, it should be displayed in active state and \'Global\' tab should be in inactive state', () => {
+            highlightImagePage.steps.navigateToOptionTab(1);
+            highlightImagePage.steps.verifyActiveStateOfCustomizeHighlightPropertiesTab(1);
+            highlightImagePage.steps.verifyInactiveStateOfCustomizeHighlightPropertiesTab(0);
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/546464
+        it('\'Label\' title should be displayed', () => {
+            utilities.verifyInnerText(highlightImagePage.labelTitle(), 'Label');
+            utilities.verifyElementVisibilityState(highlightImagePage.labelTitle(), 'visible');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/548722
+        it('\'Option label\' and \'ARIA label\' label and input field should be displayed and by default the input fields should be empty', () => {
+            utilities.verifyInnerText(highlightImagePage.optionLabelInputFieldLabel(), 'Option label');
+            utilities.verifyElementVisibilityState(highlightImagePage.optionLabelInputFieldLabel(), 'visible');
+            utilities.verifyElementVisibilityState(highlightImagePage.optionLabelInputField(), 'visible');
+            utilities.verifyInnerText(highlightImagePage.optionLabelInputField(), '')
+            utilities.verifyInnerText(highlightImagePage.ariaLabelInputFieldLabel(), 'ARIA label');
+            utilities.verifyElementVisibilityState(highlightImagePage.ariaLabelInputFieldLabel(), 'visible');
+            utilities.verifyElementVisibilityState(highlightImagePage.ariaLabelInputField(), 'visible');
+            utilities.verifyInnerText(highlightImagePage.ariaLabelInputField(), '')
+        });
+
+        it('User should be able to enter the text in \'Option label\' and \'ARIA label\' input field', () => {
+            highlightImagePage.steps.addAndVerifyTextInOptionLabelInputField('top flower');
+            highlightImagePage.steps.addAndVerifyTextInAriaLabelInputField('top flower is highlighted');
+        });
+
+        it('\'Reset to global color\' button should be displayed and by default it should be disabled', () => {
+            utilities.verifyInnerText(highlightImagePage.resetToGlobalColorButton(), 'Reset to global color');
+            utilities.verifyElementVisibilityState(highlightImagePage.resetToGlobalColorButton(), 'visible');
+            highlightImagePage.steps.verifyResetToGlobalColorButtonDisabled();
+        });
+
+        it('\'Highlight color\' label should be displayed', () => {
+            highlightImagePage.steps.verifyHighlightColorLabelIsDisplayed();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/546130
+        it(`\'Customize highlight properties\' accordion should have \'Default\' section with ${highlightColorProperties['default'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(highlightImagePage.defaultLabel(), highlightColorProperties['default'].displayName);
+            utilities.verifyInnerText(highlightImagePage.defaultFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(highlightImagePage.defaultBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(highlightImagePage.defaultFillColorHexCodeLabel(), highlightColorProperties.default.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.defaultBorderColorHexCodeLabel(), highlightColorProperties.default.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.defaultFillColorOpacityLabel(), `${highlightColorProperties.default.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(highlightImagePage.defaultBorderColorOpacityLabel(), `${highlightColorProperties.default.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(highlightImagePage.defaultFillColorBlock(), 'visible');
+            highlightImagePage.steps.verifyDefaultFillColorBlockColor(highlightColorProperties.default.colorProperties.fillColorRgbaValue);
+            utilities.verifyElementVisibilityState(highlightImagePage.defaultBorderColorBlock(), 'visible');
+            highlightImagePage.steps.verifyDefaultBorderColorBlockColor(highlightColorProperties.default.colorProperties.borderColorRgbValue);
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/546130
+        it(`\'Customize highlight properties\' accordion should have \'Hover\' section with ${highlightColorProperties['hover'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(highlightImagePage.hoverLabel(), highlightColorProperties['hover'].displayName);
+            utilities.verifyInnerText(highlightImagePage.hoverFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(highlightImagePage.hoverBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(highlightImagePage.hoverFillColorHexCodeLabel(), highlightColorProperties.hover.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.hoverBorderColorHexCodeLabel(), highlightColorProperties.hover.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.hoverFillColorOpacityLabel(), `${highlightColorProperties.hover.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(highlightImagePage.hoverBorderColorOpacityLabel(), `${highlightColorProperties.hover.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(highlightImagePage.hoverFillColorBlock(), 'visible');
+            highlightImagePage.steps.verifyHoverFillColorBlockColor(highlightColorProperties.hover.colorProperties.fillColorRgbaValue);
+            utilities.verifyElementVisibilityState(highlightImagePage.hoverBorderColorBlock(), 'visible');
+            highlightImagePage.steps.verifyHoverBorderColorBlockColor(highlightColorProperties.hover.colorProperties.borderColorRgbValue);
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/546130
+        it(`\'Customize highlight properties\' accordion should have \'Active\' section with ${highlightColorProperties['active'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(highlightImagePage.activeLabel(), highlightColorProperties['active'].displayName);
+            utilities.verifyInnerText(highlightImagePage.activeFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(highlightImagePage.activeBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(highlightImagePage.activeFillColorHexCodeLabel(), highlightColorProperties.active.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.activeBorderColorHexCodeLabel(), highlightColorProperties.active.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(highlightImagePage.activeFillColorOpacityLabel(), `${highlightColorProperties.active.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(highlightImagePage.activeBorderColorOpacityLabel(), `${highlightColorProperties.active.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(highlightImagePage.activeFillColorBlock(), 'visible');
+            highlightImagePage.steps.verifyActiveFillColorBlockColor(highlightColorProperties.active.colorProperties.fillColorRgbaValue);
+            highlightImagePage.steps.verifyPatternAppliedOnActiveState();
+            utilities.verifyElementVisibilityState(highlightImagePage.activeBorderColorBlock(), 'visible');
+            highlightImagePage.steps.verifyActiveBorderColorBlockColor(highlightColorProperties.active.colorProperties.borderColorRgbValue);
+        });
+
+        it('\'Apply pattern on active state\' label and checkbox should be displayed and by default the checkbox should be checked', () => {
+            utilities.verifyInnerText(highlightImagePage.applyPatternOnActiveStateLabel(), 'Apply pattern on active state');
+            utilities.verifyElementVisibilityState(highlightImagePage.applyPatternOnActiveStateLabel(), 'visible');
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsChecked();
+        });
+
+        it('CSS of option tab contents', { tags: 'css' }, () => {
+            const sectionlabel = [highlightImagePage.labelTitle, highlightImagePage.highlightColorLabel];
+            for (let index = 0; index < sectionlabel.length; index++) {
+                utilities.verifyCSS(sectionlabel[index](), {
+                    'color': css.color.sectionHeading,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.semibold
+                });
+            };
+            const labels = [highlightImagePage.optionLabelInputFieldLabel, highlightImagePage.ariaLabelInputFieldLabel];
+            for (let index = 0; index < labels.length; index++) {
+                utilities.verifyCSS(labels[index](), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+            };
+            const inputFields = [highlightImagePage.optionLabelInputField, highlightImagePage.ariaLabelInputField];
+            for (let index = 0; index < inputFields.length; index++) {
+                utilities.verifyCSS(inputFields[index](), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+            };
+            utilities.verifyCSS(highlightImagePage.resetToGlobalColorButton(), {
+                'color': css.color.secondaryBtnDisabled,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            highlightImagePage.steps.verifyCSSOfApplyPatternOnActiveState();
+            highlightImagePage.steps.verifyHighlightColorDefaultContentCSS();
+            highlightImagePage.steps.verifyHighlightColorHoverContentCSS();
+            highlightImagePage.steps.verifyHighlightColorActiveContentCSS();
+        });
+
+        it('Accessiblity of option tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.customizeHighlightPropertiesTab().parents('.MuiCollapse-wrapper'));
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/546130
+    describe('Customize highlight properties accordion: Global and option tab functionality of default state in set correct answer and preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(0, flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(1, leafHighlightRegion);
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Default\' state in \'Global\' tab then the default state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the \'Set correct answer\' section', () => {
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(82, 0, 255)', '1');
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Default\' state in \'Global\' tab then the default state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the\'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(82, 0, 255)', '1');
+        });
+
+        it('When the user updates the \'Fill color\' and \'Border color\' of \'Default\' state in \'Option 1\' tab then the default state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of default state according to the \'Global\' tab and hover and active state for \'Option 1\' and \'Option 2\' highlight region should be also according to the \'Global\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToOptionTab(1);
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(0);
+            colorPopupComponent.steps.addInputToOpacityInputField('50');
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(1);
+            colorPopupComponent.steps.addInputToOpacityInputField('50');
+            colorPopupComponent.steps.clickOnOkButton();
+            cy.log("Verifying default state");
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(229, 76, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(255, 240, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user has updated the \'Fill color\' and \'Border color\' of \'Default\' state in \'Option 1\' tab then the default state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of default state according to the \'Global\' tab and hover and active state for \'Option 1\' and \'Option 2\' highlight region should be also according to the \'Global\' tab in the \'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            cy.log("Verifying default state");
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(0, 'rgb(229, 76, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(255, 240, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user updates \'Fill color\' and \'Border color\' of \'Default\' state in \'Global tab\' then the default state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of default state should be according to \'Option 1\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToGlobalTab();
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(3);
+            colorPopupComponent.steps.addInputToOpacityInputField(70);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(2);
+            colorPopupComponent.steps.addInputToOpacityInputField(70);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(0, 0, 0)', '0.7');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(229, 76, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(255, 240, 25)', '0.5');
+        });
+
+        it('When the user has updated \'Fill color\' and \'Border color\' of \'Default\' state in \'Global tab\' then the default state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of default state should be according to \'Option 1\' tab in the  in the \'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(1, 'rgb(0, 0, 0)', '0.7');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(0, 'rgb(229, 76, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(255, 240, 25)', '0.5');
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/546130
+    describe('Customize highlight properties accordion: Global and option tab functionality of hover state in set correct answer and preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(0, flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(1, leafHighlightRegion);
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Hover\' state in \'Global\' tab then the hover state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the \'Set correct answer\' section', () => {
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(66, 0, 204)', '1');
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Hover\' state in \'Global\' tab then the hover state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the\'Preview tab\'', () => {
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(66, 0, 204)', '1');
+        });
+
+        it('When the user updates the \'Fill color\' and \'Border color\' of \'Hover\' state in \'Option 1\' tab then the hover state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of hover state according to the \'Global\' tab and default and active state for \'Option 1\' and \'Option 2 \' highlight region should be also according to the \'Global\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToOptionTab(1);
+            highlightImagePage.steps.clickOnHighlightColorBlock('hoverFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(2);
+            colorPopupComponent.steps.addInputToOpacityInputField(70);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('hoverBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(3);
+            colorPopupComponent.steps.addInputToOpacityInputField(70);
+            colorPopupComponent.steps.clickOnOkButton();
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(0, 0, 0)', '0.7');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying default state");
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user has updated the \'Fill color\' and \'Border color\' of \'Hover\' state in \'Option 1\' tab then the hover state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of hover state according to the \'Global\' tab and default and active state for \'Option 1\' and \'Option 2 \' highlight region should be also according to the \'Global\' tab in the \'Preview\' tab', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(0, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(0, 0, 0)', '0.7');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying default state");
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user updates \'Fill color\' and \'Border color\' of \'Hover\' state in \'Global tab\' then the hover state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of hover state should be according to \'Option 1\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToGlobalTab();
+            highlightImagePage.steps.clickOnHighlightColorBlock('hoverFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(0);
+            colorPopupComponent.steps.addInputToOpacityInputField(30);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('hoverBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(1);
+            colorPopupComponent.steps.addInputToOpacityInputField(30);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(229, 76, 25)', '0.3');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(255, 240, 25)', '0.3');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(0, 0, 0)', '0.7');
+        });
+
+        it('When the user has updated \'Fill color\' and \'Border color\' of \'Hover\' state in \'Global tab\' then the hover state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of hover state should be according to \'Option 1\' tab in the  in the \'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(1, 'rgb(229, 76, 25)', '0.3');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(255, 240, 25)', '0.3');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(0, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(0, 0, 0)', '0.7');
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/546130
+    describe('Customize highlight properties accordion: Global and option tab functionality of active state in set correct answer and preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(0, flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(1, leafHighlightRegion);
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Active\' state in \'Global\' tab then the active state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the \'Set correct answer\' section', () => {
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Active\' state in \'Global\' tab then the active state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the\'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user updates the \'Fill color\' and \'Border color\' of \'Active\' state in \'Option 1\' tab then the active state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of active state according to the \'Global\' tab and default and hover state for \'Option 1\' and \'Option 2 \' highlight region should be also according to the \'Global\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToOptionTab(1);
+            highlightImagePage.steps.clickOnHighlightColorBlock('activeFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(1);
+            colorPopupComponent.steps.addInputToOpacityInputField(90);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('activeBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(3);
+            colorPopupComponent.steps.addInputToOpacityInputField(90);
+            colorPopupComponent.steps.clickOnOkButton()
+            cy.log('Verfying default state')
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(255, 240, 25)', '0.9');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(0, 0, 0)', '0.9');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user has updated the \'Fill color\' and \'Border color\' of \'Active\' state in \'Option 1\' tab then the active state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of active state according to the \'Global\' tab and default and hover state for \'Option 1\' and \'Option 2 \' highlight region should be also according to the \'Global\' tab in the \'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            cy.log('Verfying default state')
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(0, 'rgb(255, 240, 25)', '0.9');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(0, 0, 0)', '0.9');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user updates \'Fill color\' and \'Border color\' of \'Active\' state in \'Global tab\' then the active state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of active state should be according to \'Option 1\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToGlobalTab();
+            highlightImagePage.steps.clickOnHighlightColorBlock('activeFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(0);
+            colorPopupComponent.steps.addInputToOpacityInputField(80);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('activeBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(2);
+            colorPopupComponent.steps.addInputToOpacityInputField(80);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(229, 76, 25)', '0.8');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(9, 179, 33)', '0.8');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(255, 240, 25)', '0.9');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(0, 0, 0)', '0.9');
+        });
+
+        it('When the user has updated \'Fill color\' and \'Border color\' of \'Active\' state in \'Global tab\' then the active state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of active state should be according to \'Option 1\' tab in the  in the \'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(1, 'rgb(229, 76, 25)', '0.8');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(9, 179, 33)', '0.8');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(0, 'rgb(255, 240, 25)', '0.9');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(0, 0, 0)', '0.9');
+        });
+    });
+
+    describe('Customize highlight properties accordion: Apply pattern on active state', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(0, flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(1, leafHighlightRegion);
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+        });
+
+        it('When user highlights a region then in the \'Customize highlight properties accordion\' the \'Apply pattern on active state\' should be in checked state', () => {
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsChecked();
+        });
+
+        it('When \'Apply pattern on active state\' is checked and user selects a highlight region in \'Set correct answer\' section then the active pattern should be displayed in the \'Set correct answer\' section', () => {
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsChecked();
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyActivePatternIsDisplayedOnHighlightRegionInSetCorrectAnswerSection(0);
+        });
+
+        it('When \'Apply pattern on active state\' is checked and user selects a highlight region in \'Preview tab\' then the active pattern should be displayed in the \'Preview tab\'', () => {
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsChecked();
+            cy.log('Switching to preview tab')
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(0);
+            highlightImagePage.steps.verifyActivePatternIsDisplayedOnHighlightRegionInPreviewTab(0);
+        });
+
+        it('When user unchecks the \'Apply pattern on active state\' in the \'Global\' tab then the checkbox should be unchecked in all tabs', () => {
+            cy.log('Switching to edit tab')
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.uncheckApplyPatternOnActiveStateCheckbox();
+            highlightImagePage.steps.navigateToOptionTab(1);
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsUnchecked();
+            highlightImagePage.steps.navigateToOptionTab(2);
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsUnchecked();
+        });
+
+        it('When \'Apply pattern on active state\' is unchecked and user selects a highlight region in \'Set correct answer\' section then the active pattern should not be displayed in the \'Set correct answer\' section', () => {
+            highlightImagePage.steps.navigateToGlobalTab();
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsUnchecked();
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyActivePatternIsNotDisplayedOnHighlightRegionInSetCorrectAnswerSection(1);
+        });
+
+        it('When \'Apply pattern on active state\' is unchecked and user selects a highlight region in \'Preview tab\' then the active pattern should not be displayed in the \'Preview tab\'', () => {
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsUnchecked();
+            cy.log('Switching to preview tab')
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(1);
+            highlightImagePage.steps.verifyActivePatternIsNotDisplayedOnHighlightRegionInPreviewTab(1);
+        });
+
+        it('CSS of selected highlight in \'Set correct answer\' section and \'Preview tab\'', { tags: 'css' }, () => {
+            cy.log('CSS of selected highlight in preview tab')
+            utilities.verifyCSS(highlightImagePage.setCorrectAnswerSectionHighlightPolygon().eq(1), {
+                'stroke': css.color.activeHighlightBorder,
+                'fill': css.color.videoProgressBarElapsedFill,
+                'stroke-width': '4px'
+            });
+            cy.log('CSS of selected highlight in edit tab')
+            highlightImagePage.steps.switchToEditTab();
+            utilities.verifyCSS(highlightImagePage.setCorrectAnswerSectionHighlightPolygon().eq(1), {
+                'stroke': css.color.activeHighlightBorder,
+                'fill': css.color.videoProgressBarElapsedFill,
+                'stroke-width': '4px'
+            });
+            highlightImagePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user checks \'Hide highlights\' checkbox and \'Apply pattern on active state\' is unchecked then on selecting a highlight region in \'Set correct answer\' section active pattern should not be displayed in \'Set correct answer\' section', () => {
+            cy.log('Pre step: Removing highlight of region in set correct section');
+            highlightImagePage.steps.switchToEditTab()
+            highlightImagePage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.checkHideHighlightsCheckbox();
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsUnchecked();
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(0);
+            highlightImagePage.steps.verifyActivePatternIsNotDisplayedOnHighlightRegionInSetCorrectAnswerSection(0);
+        });
+
+        it('When the \'Hide highlights\' checkbox is checked and \'Apply pattern on active state\' is unchecked then on selecting a highlight region in \'Preview tab\' active pattern should not be displayed in the \'Preview tab\'', () => {
+            highlightImagePage.steps.verifyHideHighlightsCheckboxIsChecked();
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsUnchecked();
+            cy.log('Switching to preview tab')
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(0);
+            highlightImagePage.steps.verifyActivePatternIsNotDisplayedOnHighlightRegionInPreviewTab(0);
+        });
+
+        it('When \'Hide highlights\' and \'Apply pattern on active state\' checkbox is checked then on selecting a highlight region in \'Set correct answer\' section active pattern should be displayed in \'Set correct answer\' section', () => {
+            cy.log('Switching to edit tab')
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.verifyHideHighlightsCheckboxIsChecked();
+            highlightImagePage.steps.checkApplyPatternOnActiveStateCheckbox();
+            highlightImagePage.steps.highlightARegionInSetCorrectAnswerSection(1);
+            highlightImagePage.steps.verifyActivePatternIsDisplayedOnHighlightRegionInSetCorrectAnswerSection(1);
+        });
+
+        it('When \'Hide highlights\' and \'Apply pattern on active state\' checkbox is checked then on selecting a highlight region in \'Preview tab\' active pattern should be displayed in \'Preview tab\'', () => {
+            highlightImagePage.steps.verifyHideHighlightsCheckboxIsChecked();
+            highlightImagePage.steps.verifyApplyPatternOnActiveStateCheckboxIsChecked();
+            cy.log('Switching to preview tab')
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.highlightARegionInPreviewTab(1);
+            highlightImagePage.steps.verifyActivePatternIsDisplayedOnHighlightRegionInPreviewTab(1);
+        });
+    });
+
+    describe('Customize highlight properties accordion: Reset to global color functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(0, flowerHighlightRegion);
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+            highlightImagePage.steps.navigateToOptionTab(1);
+        });
+
+        it('When the user draws a highlight region the \'Reset to global color\' button should be displayed in disabled state in the \'Option 1\' tab', () => {
+            utilities.verifyInnerText(highlightImagePage.resetToGlobalColorButton(), 'Reset to global color');
+            utilities.verifyElementVisibilityState(highlightImagePage.resetToGlobalColorButton(), 'visible');
+            highlightImagePage.steps.verifyResetToGlobalColorButtonDisabled();
+        });
+
+        it('When the user updates any property color in the \'Option\' tab then the \'Reset to global color\' should be displayed in enabled state', () => {
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(1);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyDefaultFillColorBlockColor('rgba(255, 240, 25, 0.4)');
+            highlightImagePage.steps.verifyDefaultFillColorHexCodeLabel('#FFF019');
+            highlightImagePage.steps.verifyResetToGlobalColorButtonEnabled();
+        });
+
+        it('CSS of enabled \'Reset to global color\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightImagePage.resetToGlobalColorButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of enabled \'Reset to global color\' button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.resetToGlobalColorButton());
+        });
+
+        it('When the user clicks on the \'Reset to global color\' button then all the changes should be reverted and the global properties should be displayed and the button should be disabled again', () => {
+            highlightImagePage.steps.clickOnResetToGlobalColorButton();
+            highlightImagePage.steps.verifyDefaultFillColorBlockColor(highlightColorProperties.default.colorProperties.fillColorRgbaValue);
+            highlightImagePage.steps.verifyDefaultFillColorHexCodeLabel(highlightColorProperties.default.colorProperties.fillColorHexValue);
+            highlightImagePage.steps.verifyResetToGlobalColorButtonDisabled();
+        });
+
+        it('When the user makes any changes in the \'Global\' tab then the changes should be reflected in the \'Option 1\' tab and the \'Reset to global color\' should be in disabled state', () => {
+            highlightImagePage.steps.navigateToGlobalTab();
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(2);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyDefaultBorderColorBlockColor('rgb(9, 179, 33)');
+            highlightImagePage.steps.verifyDefaultBorderColorHexCodeLabel('#09B321');
+            highlightImagePage.steps.navigateToOptionTab(1);
+            highlightImagePage.steps.verifyDefaultBorderColorBlockColor('rgb(9, 179, 33)');
+            highlightImagePage.steps.verifyDefaultBorderColorHexCodeLabel('#09B321');
+            highlightImagePage.steps.verifyResetToGlobalColorButtonDisabled();
+        });
+    });
+
+    //TODO: Need to write script after https://redmine.zeuslearning.com/issues/546352 is resolved
+    describe('Option label and Aria label functionaity in Set correct answer section and preview tab', () => {
+
+        it('When user adds input to \'Option label\' and \'ARIA label\' input field then option label and aria label should be displayed for \'Option 1\' highlight region in \'Set correct answer\' section', () => {
+
+        });
+
+        it('When user adds input to \'Option label\' and \'ARIA label\' input field then option label and aria label should be displayed for \'Option 1\' highlight region in \'Preview tab\'', () => {
+
+        });
+
+        it('Option label and aria label should not be displayed for \'Option 2\' highlight region in \'Set correct answer\' section', () => {
+
+        });
+
+        it('Option label and aria label should not be displayed for \'Option 2\' highlight region in the \'Preview tab\'', () => {
+
+        });
+    });
+});