Button icon 'icon-align-top' style correction (#15140).

Change-Id: I671013284cadbef89b46cca042a099441dbb6bff

3 files changed, 100 insertions, 0 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index b1b16f5bde..3a4bca615d 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -444,6 +444,8 @@
 
   .v-icon {
     display: block;
+    margin-left: auto;
+    margin-right: auto;
 
     + span:not(:empty) {
       margin-top: ceil($v-unit-size/6);
diff --git a/uitest/src/com/vaadin/tests/themes/valo/AlignTopIconInButton.java b/uitest/src/com/vaadin/tests/themes/valo/AlignTopIconInButton.java
new file mode 100644
index 0000000000..dc257fb3ec
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/AlignTopIconInButton.java
@@ -0,0 +1,51 @@
+/*
+ * 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.themes.valo;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.ThemeResource;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+
+/**
+ * Test UI for image icon in button with 'icon-align-top' style.
+ * 
+ * @author Vaadin Ltd
+ */
+@Theme("valo")
+public class AlignTopIconInButton extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        Button button = new Button();
+        button.setIcon(new ThemeResource("../runo/icons/16/document.png"));
+        addComponent(button);
+        button.addStyleName("icon-align-top");
+        button.setCaption("caption");
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 15140;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Icon in the button with 'icon-align-top' style is not "
+                + "centered when image is used.";
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/AlignTopIconInButtonTest.java b/uitest/src/com/vaadin/tests/themes/valo/AlignTopIconInButtonTest.java
new file mode 100644
index 0000000000..287e25d402
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/AlignTopIconInButtonTest.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.themes.valo;
+
+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 centered image icon in button with 'icon-align-top' style.
+ * 
+ * @author Vaadin Ltd
+ */
+public class AlignTopIconInButtonTest extends MultiBrowserTest {
+
+    @Test
+    public void testIconPositioninButton() {
+        openTestURL();
+
+        WebElement wrapper = findElement(By.className("v-button-wrap"));
+        WebElement icon = wrapper.findElement(By.className("v-icon"));
+        int leftSpace = icon.getLocation().getX()
+                - wrapper.getLocation().getX();
+        int rightSpace = wrapper.getLocation().getX()
+                + wrapper.getSize().getWidth() - icon.getLocation().getX()
+                - icon.getSize().getWidth();
+
+        Assert.assertTrue("Icon element is not centered inside button.",
+                Math.abs(rightSpace - leftSpace) <= 1);
+    }
+}