Add scrollbars to ComboBox suggestion popup if low on screen estate (#11929)

Change-Id: I8563f1e2cfc66ca89399590401fd77ec67e50e82

2 files changed, 172 insertions, 0 deletions

diff --git a/uitest/src/com/vaadin/tests/components/combobox/ComboBoxOnSmallScreen.java b/uitest/src/com/vaadin/tests/components/combobox/ComboBoxOnSmallScreen.java
new file mode 100644
index 0000000000..c50e483c44
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/combobox/ComboBoxOnSmallScreen.java
@@ -0,0 +1,64 @@
+/*
+ * 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.combobox;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.VerticalLayout;
+
+/**
+ * Test UI for issue #11929 where ComboBox suggestion popup hides the ComboBox
+ * itself obscuring the text input field.
+ * 
+ * @author Vaadin Ltd
+ */
+public class ComboBoxOnSmallScreen extends AbstractTestUI {
+
+    private static final String PID = "captionPID";
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        addComponents(createComboBox(), createComboBox());
+        VerticalLayout vl = getLayout();
+        vl.setHeight(300, Unit.PIXELS);
+        vl.setComponentAlignment(vl.getComponent(1), Alignment.BOTTOM_LEFT);
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Combobox hides what you are typing on small screen";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 11929;
+    }
+
+    private ComboBox createComboBox() {
+        ComboBox cb = new ComboBox();
+        cb.addContainerProperty(PID, String.class, "");
+        cb.setItemCaptionPropertyId(PID);
+
+        for (int i = 1; i < 21; ++i) {
+            final String v = "Item #" + i;
+            cb.getItem(cb.addItem()).getItemProperty(PID).setValue(v);
+        }
+
+        return cb;
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/components/combobox/ComboBoxOnSmallScreenTest.java b/uitest/src/com/vaadin/tests/components/combobox/ComboBoxOnSmallScreenTest.java
new file mode 100644
index 0000000000..c45168aa6d
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/combobox/ComboBoxOnSmallScreenTest.java
@@ -0,0 +1,108 @@
+/*
+ * 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.combobox;
+
+import static org.hamcrest.MatcherAssert.assertThat;
+import static org.hamcrest.Matchers.is;
+
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.Dimension;
+import org.openqa.selenium.WebDriver.Window;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.client.ui.VFilterSelect;
+import com.vaadin.testbench.elements.ComboBoxElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+/**
+ * ComboBox suggestion popup should not obscure the text input box.
+ * 
+ * @author Vaadin Ltd
+ */
+public class ComboBoxOnSmallScreenTest extends MultiBrowserTest {
+
+    private static final Dimension TARGETSIZE = new Dimension(600, 300);
+    private static final String POPUPCLASSNAME = VFilterSelect.CLASSNAME
+            + "-suggestpopup";
+
+    @Override
+    public void setup() throws Exception {
+        super.setup();
+
+        openTestURL();
+
+        getWindow().setSize(TARGETSIZE);
+    }
+
+    @Test
+    public void testUpperSuggestionPopupOverlayPosition() {
+        ComboBoxElement cb = getComboBoxAndOpenPopup(0);
+        assertOverlayPosition(cb, getPopup());
+    }
+
+    @Test
+    public void testUpperSuggestionPopupOverlaySize() {
+        ComboBoxElement cb = getComboBoxAndOpenPopup(0);
+        assertOverlaySize(cb, getPopup());
+    }
+
+    @Test
+    public void testLowerSuggestionPopupOverlayPosition() {
+        ComboBoxElement cb = getComboBoxAndOpenPopup(1);
+        assertOverlayPosition(cb, getPopup());
+    }
+
+    @Test
+    public void testLowerSuggestionPopupOverlaySize() {
+        ComboBoxElement cb = getComboBoxAndOpenPopup(1);
+        assertOverlaySize(cb, getPopup());
+    }
+
+    private void assertOverlayPosition(WebElement combobox, WebElement popup) {
+        final int popupTop = popup.getLocation().y;
+        final int popupBottom = popupTop + popup.getSize().getHeight();
+        final int cbTop = combobox.getLocation().y;
+        final int cbBottom = cbTop + combobox.getSize().getHeight();
+
+        assertThat("Popup overlay does not overlap with the textbox",
+                popupTop >= cbBottom || popupBottom <= cbTop, is(true));
+    }
+
+    private void assertOverlaySize(WebElement combobox, WebElement popup) {
+        final int popupTop = popup.getLocation().y;
+        final int popupBottom = popupTop + popup.getSize().getHeight();
+        final int rootHeight = findElement(By.tagName("body")).getSize().height;
+
+        assertThat("Popup overlay inside the viewport", popupTop < 0
+                || popupBottom > rootHeight, is(false));
+    }
+
+    private ComboBoxElement getComboBoxAndOpenPopup(int comboboxIndex) {
+        ComboBoxElement cb = $(ComboBoxElement.class).get(comboboxIndex);
+        cb.openPopup();
+        return cb;
+    }
+
+    private WebElement getPopup() {
+        return findElement(By.className(POPUPCLASSNAME));
+    }
+
+    private Window getWindow() {
+        return getDriver().manage().window();
+    }
+
+}