Fix absolute layout component sizing on size change in Vaadin7 (#8304)

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.

diff --git a/client/src/main/java/com/vaadin/client/ui/absolutelayout/AbsoluteLayoutConnector.java b/client/src/main/java/com/vaadin/client/ui/absolutelayout/AbsoluteLayoutConnector.java
index 477d59289efd602979b35c96e105225386056d59..2749ea014ff4f83e01195e9315011aa58d32a06c 100644 (file)
--- a/client/src/main/java/com/vaadin/client/ui/absolutelayout/AbsoluteLayoutConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/absolutelayout/AbsoluteLayoutConnector.java
@@ -71,6 +71,10 @@ public class AbsoluteLayoutConnector extends AbstractComponentContainerConnector
                 getWidget().setWidgetWrapperStyleNames(child.getWidget(),
                         childStyles.toArray(new String[childStyles.size()]));
             }
+
+            if (stateChangeEvent.hasPropertyChanged("height") || stateChangeEvent.hasPropertyChanged("width")) {
+                setChildWidgetPosition(child);
+            }
         }
     };
 

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 (file)
index 0000000..6ac1404
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponents.java
@@ -0,0 +1,87 @@
+package com.vaadin.tests.components.absolutelayout;
+
+import com.vaadin.server.Sizeable;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+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 AbstractTestUI {
+
+    @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(final Component component) {
+        Button button = new Button("Change Size", new Button.ClickListener() {
+            @Override
+            public void buttonClick(Button.ClickEvent clickEvent) {
+                if (component.getWidthUnits().equals(Sizeable.Unit.PERCENTAGE)) {
+                    component.setWidth("250px");
+                } else {
+                    component.setWidth("100%");
+                }
+            }
+        });
+        button.setId(component.getId() + "-button");
+        return button;
+    }
+}

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 (file)
index 0000000..be85a68
--- /dev/null
+++ b/uitest/src/test/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponentsTest.java
@@ -0,0 +1,108 @@
+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;
+
+/**
+ * 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";
+
+        WebElement panelWrapper = getComponentWrapper(componentId);
+
+        Assert.assertNotNull("No wrapper element found for expanding panel [ID: " + componentId + "]", panelWrapper);
+
+        String left = panelWrapper.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.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";
+
+        WebElement panelWrapper = getComponentWrapper(componentId);
+
+        Assert.assertNotNull("No wrapper element found for panel [ID: " + componentId + "]", panelWrapper);
+
+        String left = panelWrapper.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.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";
+
+        WebElement panelWrapper = getComponentWrapper(componentId);
+
+        Assert.assertNotNull("No wrapper element found for AbsoluteLayout [ID: " + componentId + "].", panelWrapper);
+
+        String left = panelWrapper.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.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 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 panelWrapper;
+    }
+}