diff options
| -rw-r--r-- | client/src/com/vaadin/client/extensions/ResponsiveConnector.java | 43 | ||||
| -rw-r--r-- | uitest/src/com/vaadin/tests/extensions/ResponsiveUITest.java | 31 |
2 files changed, 66 insertions, 8 deletions
diff --git a/client/src/com/vaadin/client/extensions/ResponsiveConnector.java b/client/src/com/vaadin/client/extensions/ResponsiveConnector.java index fb1919e6c2..500e4a0916 100644 --- a/client/src/com/vaadin/client/extensions/ResponsiveConnector.java +++ b/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"); } } diff --git a/uitest/src/com/vaadin/tests/extensions/ResponsiveUITest.java b/uitest/src/com/vaadin/tests/extensions/ResponsiveUITest.java index 76babed333..9b86350ebc 100644 --- a/uitest/src/com/vaadin/tests/extensions/ResponsiveUITest.java +++ b/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")); + } } |