Margin for header label in form should override any other rule (#14775).

Change-Id: I6db8f01cf4842f17db3ee9509a0b7873dfd70ddd

3 files changed, 128 insertions, 0 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index cfec847271..3057aaa40f 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -183,6 +183,16 @@ $v-letter-spacing--h4: 0 !default;
     }
   }
 
+  .v-verticallayout > .v-slot:first-child .v-formlayout-contentcell,
+  .v-verticallayout > div > .v-slot:first-child .v-formlayout-contentcell {
+    h1, .#{$primary-stylename}-h1,
+    h2, .#{$primary-stylename}-h2,
+    h3, .#{$primary-stylename}-h3,
+    h4, .#{$primary-stylename}-h4 {
+      margin-top: -0.5em;
+    }
+  }
+
   h1, .#{$primary-stylename}-h1,
   h2, .#{$primary-stylename}-h2,
   h3, .#{$primary-stylename}-h3,
diff --git a/uitest/src/com/vaadin/tests/components/formlayout/FormLayoutInVerticalLayout.java b/uitest/src/com/vaadin/tests/components/formlayout/FormLayoutInVerticalLayout.java
new file mode 100644
index 0000000000..45cb55637c
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/formlayout/FormLayoutInVerticalLayout.java
@@ -0,0 +1,71 @@
+/*
+ * 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.formlayout;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.FormLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.themes.ValoTheme;
+
+/**
+ * Test UI for H2 label inside FormLayout.
+ * 
+ * @author Vaadin Ltd
+ */
+@Theme("valo")
+public class FormLayoutInVerticalLayout extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        CssLayout container = new CssLayout();
+        addComponent(container);
+
+        FormLayout formLayout = new FormLayout();
+
+        Label sectionLabel = createLabel();
+        formLayout.addComponent(sectionLabel);
+
+        TextField nameTextField = new TextField("Name");
+        nameTextField.setValue("Lorem ipsum");
+        nameTextField.setWidth("50%");
+        formLayout.addComponent(nameTextField);
+
+        container.addComponent(formLayout);
+        container.addComponent(createLabel());
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return super.getTicketNumber();
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "FormLayout 'margin-top' value should take precedence over "
+                + "the rule defined in any other selector.";
+    }
+
+    private Label createLabel() {
+        Label sectionLabel = new Label("Personal info");
+        sectionLabel.addStyleName(ValoTheme.LABEL_H2);
+        sectionLabel.addStyleName(ValoTheme.LABEL_COLORED);
+        return sectionLabel;
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/components/formlayout/FormLayoutInVerticalLayoutTest.java b/uitest/src/com/vaadin/tests/components/formlayout/FormLayoutInVerticalLayoutTest.java
new file mode 100644
index 0000000000..89e7c9a06e
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/formlayout/FormLayoutInVerticalLayoutTest.java
@@ -0,0 +1,47 @@
+/*
+ * 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.formlayout;
+
+import java.util.List;
+
+import org.junit.Assert;
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+/**
+ * Test for H2 label inside FormLayout as first child of VerticalLayout.
+ * 
+ * @author Vaadin Ltd
+ */
+public class FormLayoutInVerticalLayoutTest extends MultiBrowserTest {
+
+    @Test
+    public void testHeaderMarginInFormLayout() {
+        openTestURL();
+
+        List<WebElement> labels = findElements(By.className("v-label-h2"));
+        String formLabelMargin = labels.get(0).getCssValue("margin-top");
+        String verticalLayoutLabelMargin = labels.get(1).getCssValue(
+                "margin-top");
+        Assert.assertNotEquals(
+                "'margin-top' values for header label in vertical layout "
+                        + "and form layout are the same",
+                verticalLayoutLabelMargin, formLabelMargin);
+    }
+}