Position caption correctly in GridLayout (#9909)

Position caption correctly when using different vertical alignment than TOP in GridLayout.

Fixes #7895

2 files changed, 76 insertions, 0 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/layouts/gridlayout/GridLayoutCaptionOnBottomAlignedComponent.java b/uitest/src/main/java/com/vaadin/tests/layouts/gridlayout/GridLayoutCaptionOnBottomAlignedComponent.java
new file mode 100644
index 0000000000..e71ff3d9d6
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/layouts/gridlayout/GridLayoutCaptionOnBottomAlignedComponent.java
@@ -0,0 +1,29 @@
+package com.vaadin.tests.layouts.gridlayout;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.GridLayout;
+import com.vaadin.ui.TextField;
+
+public class GridLayoutCaptionOnBottomAlignedComponent extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        GridLayout layout = new GridLayout();
+        layout.setHeight("200px");
+        layout.setWidth("100%");
+
+        TextField component = new TextField("Oh Caption My Caption");
+        layout.addComponent(component);
+        layout.setComponentAlignment(component, Alignment.BOTTOM_CENTER);
+
+        addComponent(layout);
+
+        Button realign = new Button("Realign", evt -> {
+            layout.setComponentAlignment(component, Alignment.TOP_LEFT);
+        });
+        addComponent(realign);
+    }
+}
diff --git a/uitest/src/test/java/com/vaadin/tests/layouts/gridlayout/GridLayoutCaptionOnBottomAlignedComponentTest.java b/uitest/src/test/java/com/vaadin/tests/layouts/gridlayout/GridLayoutCaptionOnBottomAlignedComponentTest.java
new file mode 100644
index 0000000000..0e5d3dea8a
--- /dev/null
+++ b/uitest/src/test/java/com/vaadin/tests/layouts/gridlayout/GridLayoutCaptionOnBottomAlignedComponentTest.java
@@ -0,0 +1,47 @@
+package com.vaadin.tests.layouts.gridlayout;
+
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.GridLayoutElement;
+import com.vaadin.testbench.elements.TextFieldElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+
+import static org.junit.Assert.assertEquals;
+
+public class GridLayoutCaptionOnBottomAlignedComponentTest extends MultiBrowserTest {
+
+    @Test
+    public void captionShouldBeImmediatelyAboveItsComponent() {
+        openTestURL();
+        GridLayoutElement gridLayout = $(GridLayoutElement.class).first();
+        WebElement caption = gridLayout.findElement(By.className("v-caption"));
+        TextFieldElement component = $(TextFieldElement.class).first();
+
+        assertEquals("Caption and component have the same horizontal alignment",
+            caption.getLocation().x, component.getLocation().x);
+
+        // We have to do the assertion in this way because different browsers on different operating systems
+        // measure the height of the caption in different ways.
+        int diff = Math.abs(caption.getLocation().y - component.getLocation().y + caption.getSize().height);
+        assertLessThanOrEqual("Caption is placed directly above the component", diff, 1);
+    }
+
+    @Test
+    public void captionShouldStillBeImmediatelyAboveItsComponentEvenWhenRealigned() {
+        openTestURL();
+        GridLayoutElement gridLayout = $(GridLayoutElement.class).first();
+        WebElement caption = gridLayout.findElement(By.className("v-caption"));
+        TextFieldElement component = $(TextFieldElement.class).first();
+
+        // Click the button, this changes the alignment of the component
+        $(ButtonElement.class).first().click();
+
+        assertEquals("Caption and component have the same horizontal alignment",
+            caption.getLocation().x, component.getLocation().x);
+
+        assertEquals("Caption is placed in the top-left corner",
+            gridLayout.getLocation().y, caption.getLocation().y);
+    }
+}