<?xml version="1.0" encoding="UTF-8"?>
<!--
 /**
  * Copyright © Magento, Inc. All rights reserved.
  * See COPYING.txt for license details.
  */
-->
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
    <actionGroup name="validateOverlayAndButtonPoster">
        <arguments>
            <argument name="column"/>
            <argument name="columnIndex" defaultValue="1" type="string"/>
            <argument name="columnBorderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
            <argument name="columnPadding" defaultValue="PageBuilderPaddingProperty0"/>
            <argument name="element"/>
            <argument name="elementIndex" defaultValue="1" type="string"/>
            <argument name="elementBorderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
            <argument name="elementPadding" defaultValue="PageBuilderPaddingProperty0"/>
            <argument name="overlayPadding" defaultValue="PageBuilderPaddingPropertyOverlayDefault"/>
            <argument name="diffThreshold" defaultValue="0" type="string"/>
        </arguments>
        <!-- Validate Element Width -->
        <comment userInput="Validate Element Width" stepKey="commentValidateElementWidth"/>
        <executeJS function="return document.querySelector('{{column.columnX(columnIndex)}}').clientWidth" stepKey="columnWidth"/>
        <executeJS function="return parseInt({{element.elementJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="elementWidth"/>
        <executeJS function="return parseInt({$columnWidth} - {{columnPadding.paddingLeft}} - {{columnPadding.paddingRight}} - ({{columnBorderWidth.value}} * 2))" stepKey="expectedElementWidth"/>
        <executeJS function="return Math.abs({$expectedElementWidth} - {$elementWidth})" stepKey="elementDiff"/>
        <!-- We will allow a 2px offset to account for rounding and any additional threshold that is passed in as an argument -->
        <executeJS function="return parseInt({{diffThreshold}} + 2)" stepKey="acceptableOffset"/>
        <assertLessThanOrEqual stepKey="assertElementWidthEqualsColumnWidthLessPaddingAndBorder">
            <expectedResult type="variable">acceptableOffset</expectedResult>
            <actualResult type="variable">elementDiff</actualResult>
        </assertLessThanOrEqual>
        <!-- Validate Overlay Width -->
        <comment userInput="Validate Overlay Width" stepKey="commentValidateOverlayWidth"/>
        <executeJS function="return parseInt({{element.overlayJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="overlayWidth"/>
        <executeJS function="return parseInt({$elementWidth} - {{elementPadding.paddingLeft}} - {{elementPadding.paddingRight}} - ({{elementBorderWidth.value}} * 2))" stepKey="expectedOverlayWidth"/>
        <executeJS function="return Math.abs({$expectedOverlayWidth} - {$overlayWidth})" stepKey="overlayDiff"/>
        <assertLessThanOrEqual stepKey="assertOverlayWidthEqualsElementWidthLessPaddingAndBorder">
            <expectedResult type="variable">acceptableOffset</expectedResult>
            <actualResult type="variable">overlayDiff</actualResult>
        </assertLessThanOrEqual>
        <!-- Validate Content Width -->
        <comment userInput="Validate Content Width" stepKey="commentValidateContentWidth"/>
        <executeJS function="return parseInt({{element.contentJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="contentWidth"/>
        <executeJS function="return parseInt({$overlayWidth} - {{overlayPadding.paddingLeft}} - {{overlayPadding.paddingRight}})" stepKey="expectedContentWidth"/>
        <executeJS function="return Math.abs({$expectedContentWidth} - {$contentWidth})" stepKey="contentDiff"/>
        <assertLessThanOrEqual stepKey="assertContentWidthEqualsOverlayWidthLessPadding">
            <expectedResult type="variable">acceptableOffset</expectedResult>
            <actualResult type="variable">contentDiff</actualResult>
        </assertLessThanOrEqual>
        <!-- Validate Button Width -->
        <comment userInput="Validate Button Width" stepKey="commentValidateButtonWidth"/>
        <executeJS function="return parseInt({{element.buttonJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="buttonWidth"/>
        <!-- wysiwyg content may shrink smaller, but buttons will never be smaller than 36px (17px padding + 1px border) -->
        <executeJS function="return Math.max(36, {$expectedContentWidth})" stepKey="expectedButtonWidth"/>
        <executeJS function="return Math.abs({$expectedButtonWidth} - {$buttonWidth})" stepKey="buttonDiff"/>
        <assertLessThanOrEqual stepKey="assertButtonWidthEqualsOverlayWidthLessPadding">
            <expectedResult type="variable">acceptableOffset</expectedResult>
            <actualResult type="variable">buttonDiff</actualResult>
        </assertLessThanOrEqual>
    </actionGroup>
</actionGroups>
