Fix resetting of top or left alignment in GridLayout (#18660)

Change-Id: I12b4d792f4d7cc7e3340d5566fda55f0cb23cbd0

diff --git a/client/src/com/vaadin/client/ui/layout/VLayoutSlot.java b/client/src/com/vaadin/client/ui/layout/VLayoutSlot.java
index f308d07673cee7b41f64bb92c84e8f49a4dab5e7..bc0c6739bbb40f0bb94548d681e239e16a8ebfb3 100644 (file)
--- a/client/src/com/vaadin/client/ui/layout/VLayoutSlot.java
+++ b/client/src/com/vaadin/client/ui/layout/VLayoutSlot.java
@@ -149,6 +149,8 @@ public abstract class VLayoutSlot {
             if (captionAboveCompnent) {
                 captionStyle.setLeft(0, Unit.PX);
             }
+            // Reset left when changing back to align left
+            widget.getElement().getStyle().clearLeft();
         }
 
     }
@@ -212,6 +214,10 @@ public abstract class VLayoutSlot {
             padding += captionHeight;
 
             widget.getElement().getStyle().setTop(padding, Unit.PX);
+        } else {
+            // Reset top when changing back to align top
+            widget.getElement().getStyle().clearTop();
+
         }
     }
 

diff --git a/uitest/src/com/vaadin/tests/components/gridlayout/GridLayoutAlignments.java b/uitest/src/com/vaadin/tests/components/gridlayout/GridLayoutAlignments.java
new file mode 100644 (file)
index 0000000..06f4f17
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/gridlayout/GridLayoutAlignments.java
@@ -0,0 +1,69 @@
+package com.vaadin.tests.components.gridlayout;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.GridLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.UI;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.themes.ValoTheme;
+
+@Theme(ValoTheme.THEME_NAME)
+public class GridLayoutAlignments extends UI {
+
+    @Override
+    protected void init(VaadinRequest request) {
+        HorizontalLayout layout = new HorizontalLayout();
+        layout.setSizeFull();
+        layout.setMargin(true);
+        layout.setSpacing(true);
+
+        final GridLayout g = new GridLayout();
+        g.setStyleName("border");
+        getPage().getStyles().add(".border {border: 1px solid black;}");
+
+        g.setColumns(1);
+        g.setRows(1);
+
+        NativeButton target = new NativeButton();
+        target.setWidth("30px");
+        target.setHeight("30px");
+        g.addComponent(target);
+
+        g.setWidth("402px"); // 400 + border
+        g.setHeight("402px");
+
+        g.setComponentAlignment(g.getComponent(0, 0), Alignment.MIDDLE_CENTER);
+
+        layout.addComponent(g);
+
+        VerticalLayout buttonLayout = new VerticalLayout();
+        buttonLayout.addComponent(createButton(g, Alignment.TOP_LEFT));
+        buttonLayout.addComponent(createButton(g, Alignment.MIDDLE_LEFT));
+        buttonLayout.addComponent(createButton(g, Alignment.BOTTOM_LEFT));
+        buttonLayout.addComponent(createButton(g, Alignment.TOP_CENTER));
+        buttonLayout.addComponent(createButton(g, Alignment.MIDDLE_CENTER));
+        buttonLayout.addComponent(createButton(g, Alignment.BOTTOM_CENTER));
+        buttonLayout.addComponent(createButton(g, Alignment.TOP_RIGHT));
+        buttonLayout.addComponent(createButton(g, Alignment.MIDDLE_RIGHT));
+        buttonLayout.addComponent(createButton(g, Alignment.BOTTOM_RIGHT));
+
+        layout.addComponent(buttonLayout);
+        layout.setExpandRatio(buttonLayout, 1);
+        setContent(layout);
+    }
+
+    private Component createButton(final GridLayout g, final Alignment topLeft) {
+        return new Button("Align " + topLeft.getVerticalAlignment() + ", "
+                + topLeft.getHorizontalAlignment(), new Button.ClickListener() {
+            @Override
+            public void buttonClick(Button.ClickEvent clickEvent) {
+                g.setComponentAlignment(g.getComponent(0, 0), topLeft);
+            }
+        });
+    }
+}
\ No newline at end of file

diff --git a/uitest/src/com/vaadin/tests/components/gridlayout/GridLayoutAlignmentsTest.java b/uitest/src/com/vaadin/tests/components/gridlayout/GridLayoutAlignmentsTest.java
new file mode 100644 (file)
index 0000000..0f8f717
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/gridlayout/GridLayoutAlignmentsTest.java
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.gridlayout;
+
+import org.junit.Assert;
+import org.junit.Test;
+import org.openqa.selenium.Point;
+
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.GridLayoutElement;
+import com.vaadin.testbench.elements.NativeButtonElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class GridLayoutAlignmentsTest extends MultiBrowserTest {
+
+    private NativeButtonElement targetButton;
+    private Point gridLayoutLocation;
+
+    private int middleY = 400 / 2 - 30 / 2;
+    private int middleX = middleY;
+    private int bottomX = 400 - 30;
+    private int bottomY = bottomX;;
+
+    @Override
+    protected boolean requireWindowFocusForIE() {
+        return true;
+    }
+
+    @Test
+    public void setAlignment() {
+        openTestURL();
+
+        targetButton = $(NativeButtonElement.class).first();
+        GridLayoutElement gridLayout = $(GridLayoutElement.class).first();
+        gridLayoutLocation = gridLayout.getLocation();
+        assertOffset(middleX, middleY);
+
+        $(ButtonElement.class).caption("Align top, left").first().click();
+        assertOffset(0, 0);
+        $(ButtonElement.class).caption("Align middle, left").first().click();
+        assertOffset(0, middleY);
+        $(ButtonElement.class).caption("Align bottom, left").first().click();
+        assertOffset(0, bottomY);
+
+        $(ButtonElement.class).caption("Align top, center").first().click();
+        assertOffset(middleX, 0);
+        $(ButtonElement.class).caption("Align middle, center").first().click();
+        assertOffset(middleX, middleY);
+        $(ButtonElement.class).caption("Align bottom, center").first().click();
+        assertOffset(middleX, bottomY);
+
+        $(ButtonElement.class).caption("Align top, right").first().click();
+        assertOffset(bottomX, 0);
+        $(ButtonElement.class).caption("Align middle, right").first().click();
+        assertOffset(bottomX, middleY);
+        $(ButtonElement.class).caption("Align bottom, right").first().click();
+        assertOffset(bottomX, bottomY);
+    }
+
+    private void assertOffset(int x, int y) {
+        Point location = targetButton.getLocation();
+        int offsetX = location.x - gridLayoutLocation.x;
+        int offsetY = location.y - gridLayoutLocation.y;
+
+        // Border: 1px
+        x++;
+        y++;
+
+        Assert.assertEquals("X offset incorrect", x, offsetX);
+        Assert.assertEquals("Y offset incorrect", y, offsetY);
+
+    }
+}