Update sizes when the IE8 window is resized #12323

Change-Id: I5ee2e0d7e4b4bc11df78e24c2a29e94e4c379e25

client/src/com/vaadin/client/extensions/ResponsiveConnector.java

@@ -21,6 +21,7 @@ import java.util.logging.Logger;
 
 import com.google.gwt.core.client.JavaScriptObject;
 import com.google.gwt.dom.client.Element;
+import com.vaadin.client.BrowserInfo;
 import com.vaadin.client.LayoutManager;
 import com.vaadin.client.ServerConnector;
 import com.vaadin.client.ui.AbstractComponentConnector;
@@ -308,30 +309,56 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements
     private String currentHeightRanges;
 
     @Override
-    public void onElementResize(ElementResizeEvent e) {
-        int width = e.getLayoutManager().getOuterWidth(e.getElement());
-        int height = e.getLayoutManager().getOuterHeight(e.getElement());
+    public void onElementResize(ElementResizeEvent event) {
+        int width = event.getLayoutManager().getOuterWidth(event.getElement());
+        int height = event.getLayoutManager()
+                .getOuterHeight(event.getElement());
+
+        com.google.gwt.user.client.Element element = this.target.getWidget()
+                .getElement();
+        boolean forceRedraw = false;
 
         // Loop through breakpoints and see which one applies to this width
-        currentWidthRanges = resolveBreakpoint("width", width, e.getElement());
+        currentWidthRanges = resolveBreakpoint("width", width,
+                event.getElement());
 
         if (!"".equals(currentWidthRanges)) {
             this.target.getWidget().getElement()
                     .setAttribute("width-range", currentWidthRanges);
+            forceRedraw = true;
         } else {
-            this.target.getWidget().getElement().removeAttribute("width-range");
+            element.removeAttribute("width-range");
         }
 
         // Loop through breakpoints and see which one applies to this height
         currentHeightRanges = resolveBreakpoint("height", height,
-                e.getElement());
+                event.getElement());
 
         if (!"".equals(currentHeightRanges)) {
             this.target.getWidget().getElement()
                     .setAttribute("height-range", currentHeightRanges);
+            forceRedraw = true;
         } else {
-            this.target.getWidget().getElement()
-                    .removeAttribute("height-range");
+            element.removeAttribute("height-range");
+        }
+
+        if (forceRedraw) {
+            forceRedrawIfIE8(element);
+        }
+    }
+
+    /**
+     * Forces IE8 to reinterpret CSS rules.
+     * {@link com.vaadin.client.Util#forceIE8Redraw(com.google.gwt.dom.client.Element)}
+     * doesn't work in this case.
+     * 
+     * @param element
+     *            the element to redraw
+     */
+    private void forceRedrawIfIE8(Element element) {
+        if (BrowserInfo.get().isIE8()) {
+            element.addClassName("foo");
+            element.removeClassName("foo");
         }
     }
 

uitest/src/com/vaadin/tests/extensions/ResponsiveUITest.java

@@ -22,6 +22,8 @@ import org.junit.Before;
 import org.junit.Test;
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.interactions.Actions;
+import org.openqa.selenium.support.ui.ExpectedConditions;
+import org.openqa.selenium.support.ui.WebDriverWait;
 
 import com.vaadin.testbench.By;
 import com.vaadin.tests.tb3.MultiBrowserTest;
@@ -44,6 +46,11 @@ public class ResponsiveUITest extends MultiBrowserTest {
     public void testResizingSplitPanelReflowsLayout() throws Exception {
         openTestURL();
 
+        // IE sometimes has trouble waiting long enough.
+        new WebDriverWait(getDriver(), 30).until(ExpectedConditions
+                .presenceOfElementLocated(By
+                        .cssSelector(".v-csslayout-grid.first")));
+
         assertEquals("401px-600px",
                 $(".v-csslayout-grid.first").getAttribute("width-range"));
         assertEquals("501px-",
@@ -75,4 +82,28 @@ public class ResponsiveUITest extends MultiBrowserTest {
         new Actions(getDriver()).clickAndHold($(".v-splitpanel-hsplitter"))
                 .moveByOffset(xOffset, 0).release().build().perform();
     }
+
+    @Test
+    public void testResizingWindowReflowsLayout() throws Exception {
+        openTestURL();
+
+        assertEquals("401px-600px",
+                $(".v-csslayout-grid.first").getAttribute("width-range"));
+        assertEquals("501px-",
+                $(".v-csslayout-grid.second").getAttribute("width-range"));
+
+        testBench().resizeViewPortTo(1224, 768);
+
+        assertEquals("601-800",
+                $(".v-csslayout-grid.first").getAttribute("width-range"));
+        assertEquals("501px-",
+                $(".v-csslayout-grid.second").getAttribute("width-range"));
+
+        testBench().resizeViewPortTo(674, 768);
+
+        assertEquals("201px-400px",
+                $(".v-csslayout-grid.first").getAttribute("width-range"));
+        assertEquals("301px-400px",
+                $(".v-csslayout-grid.second").getAttribute("width-range"));
+    }
 }