Fix for Wrong background color in a Window in IE8 (#15322)

Change-Id: Ie25c7142bc111829be829f4ba98ed639ad1f5126

3 files changed, 67 insertions, 3 deletions

diff --git a/WebContent/VAADIN/themes/chameleon/common/common.scss b/WebContent/VAADIN/themes/chameleon/common/common.scss
index 7bee2f529c..82e0810bc2 100644
--- a/WebContent/VAADIN/themes/chameleon/common/common.scss
+++ b/WebContent/VAADIN/themes/chameleon/common/common.scss
@@ -34,7 +34,9 @@ $chameleon-line-height: 1.4;
 		}
 	
 	.v-sa & .v-tooltip {
-		outline: 1px solid rgba(0,0,0,.2);
+		outline-color: #000000; /* Fallback for browsers that does not support RGBA such as IE8 */
+		outline-color: rgba(0,0,0,.2);
+		outline: 1px solid;
 		-webkit-border-radius: 0;
 		-moz-border-radius: 0;
 		border: none;
@@ -92,6 +94,7 @@ $chameleon-line-height: 1.4;
 	.v-Notification,
 	.v-menubar-submenu {
 		border: 1px solid #adadad;
+		border-color: #000000; /* Fallback for browsers that does not support RGBA such as IE8 */
 		border-color: rgba(0,0,0,.4);
 		border-radius: 4px;
 		-webkit-border-radius: 4px;
@@ -104,8 +107,10 @@ $chameleon-line-height: 1.4;
 	.v-datefield-popup,
 	.v-contextmenu,
 	.v-menubar-submenu{
-    	background: rgba(232,232,232,.90) url(../img/grad-light-top.png) repeat-x;
-    	}
+		background: #e8e8e8; /* Fallback for browsers that does not support RGBA such as IE8 */
+		background: rgba(232,232,232,.90);
+		background-image: url(../img/grad-light-top.png) repeat-x;
+		}
 	.v-filterselect-suggestpopup,
 	.v-contextmenu,
 	.v-menubar-submenu {
diff --git a/uitest/src/com/vaadin/tests/components/window/WindowBGColorChameleonIE8.java b/uitest/src/com/vaadin/tests/components/window/WindowBGColorChameleonIE8.java
new file mode 100644
index 0000000000..121d6300bc
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/window/WindowBGColorChameleonIE8.java
@@ -0,0 +1,27 @@
+package com.vaadin.tests.components.window;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.UI;
+import com.vaadin.ui.Window;
+
+@SuppressWarnings("serial")
+@Theme("chameleon")
+public class WindowBGColorChameleonIE8 extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+
+        final Window window = new Window();
+        window.setCaption("Window");
+        window.setModal(true);
+        window.setClosable(true);
+        window.setDraggable(true);
+        window.setWidth("400px");
+        window.setHeight("300px");
+        window.center();
+        final UI ui = UI.getCurrent();
+        ui.addWindow(window);
+    }
+}
\ No newline at end of file
diff --git a/uitest/src/com/vaadin/tests/components/window/WindowBGColorChameleonIE8Test.java b/uitest/src/com/vaadin/tests/components/window/WindowBGColorChameleonIE8Test.java
new file mode 100644
index 0000000000..18cb012cb2
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/window/WindowBGColorChameleonIE8Test.java
@@ -0,0 +1,32 @@
+package com.vaadin.tests.components.window;
+
+import java.io.IOException;
+import java.util.Arrays;
+import java.util.List;
+
+import org.junit.Test;
+import org.openqa.selenium.remote.DesiredCapabilities;
+
+import com.vaadin.tests.tb3.MultiBrowserTest;
+import com.vaadin.tests.tb3.SingleBrowserTest;
+
+public class WindowBGColorChameleonIE8Test extends SingleBrowserTest {
+
+    /*
+     * We care about IE8 here only (Or any very very old browsers)
+     * 
+     * @see com.vaadin.tests.tb3.SingleBrowserTest#getBrowsersToTest()
+     */
+    @Override
+    public List<DesiredCapabilities> getBrowsersToTest() {
+
+        return Arrays.asList(MultiBrowserTest.Browser.IE8
+                .getDesiredCapabilities());
+    }
+
+    @Test
+    public void testWindowColor() throws IOException {
+        openTestURL();
+        compareScreen("grey-background-window");
+    }
+}