Fix absolute layout component sizing on size change (#8269)

* Fix absolute layout component sizing on size change (#8255, #8256, #8257)

Changing from relative to defined size leaves the component positioned wrong,
also changing from defined size to relative size leaves the component in the
wrong position with the wrong size.

Change makes the wrapper rerun setChildWidgetPosition() that adds/removes
necessary css definitions to/from the cssPosition String.

* Clean test sources according to review.

2 files changed, 196 insertions, 0 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponents.java b/uitest/src/main/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponents.java
new file mode 100644
index 0000000000..fc9753bc22
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponents.java
@@ -0,0 +1,85 @@
+package com.vaadin.tests.components.absolutelayout;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractReindeerTestUI;
+import com.vaadin.ui.AbsoluteLayout;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Panel;
+
+/**
+ * Test UI with different cases for component size changes
+ */
+public class AbsoluteLayoutResizeComponents extends AbstractReindeerTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        AbsoluteLayout layout = new AbsoluteLayout();
+
+        addStartWithFullWidth(layout);
+        addStartWithDefinedWidth(layout);
+        addStartWithDefinedWidthAbsoluteLayout(layout);
+
+        setContent(layout);
+    }
+
+    /**
+     * Build test layout for #8255
+     */
+    private void addStartWithFullWidth(AbsoluteLayout layout) {
+        final Panel full = new Panel(new CssLayout(new Label("Start Width 100%")));
+        full.setWidth("100%");
+        full.setId("expanding-panel");
+
+        layout.addComponent(full, "right:0;top:10px;");
+        layout.addComponent(expandButton(full), "left: 10x; top: 50px;");
+    }
+
+    /**
+     * Build test layout for #8256
+     */
+    private void addStartWithDefinedWidth(AbsoluteLayout layout) {
+        final Panel small = new Panel(new CssLayout(new Label("Start Width 250px")));
+        small.setWidth("250px");
+        small.setId("small-panel");
+
+        layout.addComponent(small, "right:0;top:100px;");
+        layout.addComponent(expandButton(small), "left: 10x; top: 150px;");
+    }
+
+
+    /**
+     * Build test layout for #8257
+     */
+    private void addStartWithDefinedWidthAbsoluteLayout(AbsoluteLayout layout) {
+        AbsoluteLayout layoutExpading = new AbsoluteLayout();
+        layoutExpading.setWidth("250px");
+        layoutExpading.addComponent(new Panel(new CssLayout(new Label("Start Width 250px"))));
+        layoutExpading.setId("absolute-expanding");
+
+        layout.addComponent(layoutExpading, "right:0;top:200px;");
+        layout.addComponent(expandButton(layoutExpading), "left: 10x; top: 250px;");
+    }
+
+    /**
+     * Create size change button for component
+     *
+     * @param component Component to controll with button
+     * @return Created Expand Button
+     */
+    private Button expandButton(Component component) {
+        Button button = new Button("Change Size", clickEvent -> resizeComponent(component));
+        button.setId(component.getId() + "-button");
+        return button;
+    }
+
+    private void resizeComponent(Component component) {
+        if (component.getWidthUnits().equals(Unit.PERCENTAGE)) {
+            component.setWidth("250px");
+        } else {
+            component.setWidth("100%");
+        }
+    }
+}
diff --git a/uitest/src/test/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponentsTest.java b/uitest/src/test/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponentsTest.java
new file mode 100644
index 0000000000..6efee81a04
--- /dev/null
+++ b/uitest/src/test/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponentsTest.java
@@ -0,0 +1,111 @@
+package com.vaadin.tests.components.absolutelayout;
+
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+import org.junit.Assert;
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+
+import java.util.Optional;
+
+
+/**
+ * Tests for component positioning after width changes from defined to relative and relative to defined
+ */
+public class AbsoluteLayoutResizeComponentsTest extends MultiBrowserTest {
+
+    @Test
+    public void testFullWithComponentWithRightAlignmentShouldMoveRightWhenSettingAbsoluteWidth() {
+        openTestURL();
+
+        String componentId = "expanding-panel";
+
+        Optional<WebElement> panelWrapper = getComponentWrapper(componentId);
+
+        Assert.assertTrue("No wrapper element found for expanding panel [ID: " + componentId + "]", panelWrapper.isPresent());
+
+        String left = panelWrapper.get().getCssValue("left");
+        Assert.assertEquals("Component wrapper was missing left:0; from its css positioning", "0px", left);
+
+        WebElement panelComponent = findElement(By.id(componentId));
+        Assert.assertEquals("Panel is not on the left side of the screen", 0, panelComponent.getLocation().getX());
+
+        // Click button to change component size
+        $(ButtonElement.class).id(componentId + "-button").click();
+
+        left = panelWrapper.get().getCssValue("left");
+        Assert.assertEquals("Component wrapper did not have its left positioning reset to auto", "auto", left);
+        Assert.assertNotEquals("Panel is still on the left side of the screen", 0, panelComponent.getLocation().getX());
+    }
+
+    @Test
+    public void testDefinedWidthComponentShouldExpandToFullWidth() {
+        openTestURL();
+
+        String componentId = "small-panel";
+
+        Optional<WebElement> panelWrapper = getComponentWrapper(componentId);
+
+        Assert.assertTrue("No wrapper element found for panel [ID: " + componentId + "]", panelWrapper.isPresent());
+
+        String left = panelWrapper.get().getCssValue("left");
+        Assert.assertEquals("Component wrapper has a set Left marker", "auto", left);
+
+        WebElement panelComponent = findElement(By.id(componentId));
+        Assert.assertNotEquals("Panel is positioned to the left side of the screen", 0, panelComponent.getLocation().getX());
+
+        // Click button to change component size
+        $(ButtonElement.class).id(componentId + "-button").click();
+
+
+        left = panelWrapper.get().getCssValue("left");
+        Assert.assertEquals("Component wrapper was missing left:0; from its css positioning", "0px", left);
+
+        Assert.assertEquals("Panel is not on the left side of the screen", 0, panelComponent.getLocation().getX());
+    }
+
+    @Test
+    public void testDefinedWidthAbsoluteLayoutToFullWidthShouldBeFullWidth() {
+        openTestURL();
+
+        String componentId = "absolute-expanding";
+
+        Optional<WebElement> panelWrapper = getComponentWrapper(componentId);
+
+        Assert.assertTrue("No wrapper element found for AbsoluteLayout [ID: " + componentId + "].", panelWrapper.isPresent());
+
+        String left = panelWrapper.get().getCssValue("left");
+        Assert.assertEquals("Component wrapper did not have its left positioning reset to auto", "auto", left);
+
+        WebElement panelComponent = findElement(By.id(componentId));
+        Assert.assertNotEquals("Panel is positioned to the left side of the screen", 0, panelComponent.getLocation().getX());
+
+        // Click button to change component size
+        $(ButtonElement.class).id(componentId + "-button").click();
+
+        left = panelWrapper.get().getCssValue("left");
+        Assert.assertEquals("Component wrapper was missing left:0; from its css positioning", "0px", left);
+
+        Assert.assertEquals("Panel is not on the left side of the screen", 0, panelComponent.getLocation().getX());
+    }
+
+    /**
+     * Search for the AbsoluteLayout wrapper element that contains component for componentId
+     *
+     * @param componentId Id of component contained in Wrapper component
+     * @return WrapperComponent or null
+     */
+    private Optional<WebElement> getComponentWrapper(String componentId) {
+        WebElement panelWrapper = null;
+
+        for (WebElement wrapper : findElements(By.className("v-absolutelayout-wrapper"))) {
+            // Check if this wrapper contains element with the wanted id.
+            if (!wrapper.findElements(By.id(componentId)).isEmpty()) {
+                panelWrapper = wrapper;
+                break;
+            }
+        }
+        return Optional.ofNullable(panelWrapper);
+    }
+}