diff options
3 files changed, 200 insertions, 0 deletions
diff --git a/client/src/main/java/com/vaadin/client/ui/absolutelayout/AbsoluteLayoutConnector.java b/client/src/main/java/com/vaadin/client/ui/absolutelayout/AbsoluteLayoutConnector.java index 0e82397261..857d13c4b5 100644 --- a/client/src/main/java/com/vaadin/client/ui/absolutelayout/AbsoluteLayoutConnector.java +++ b/client/src/main/java/com/vaadin/client/ui/absolutelayout/AbsoluteLayoutConnector.java @@ -71,6 +71,10 @@ public class AbsoluteLayoutConnector extends AbstractComponentContainerConnector getWidget().setWidgetWrapperStyleNames(child.getWidget(), childStyles.toArray(new String[childStyles.size()])); } + + if (stateChangeEvent.hasPropertyChanged("height") || stateChangeEvent.hasPropertyChanged("width")) { + setChildWidgetPosition(child); + } } }; diff --git a/uitest/src/main/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponents.java b/uitest/src/main/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponents.java new file mode 100644 index 0000000000..fc9753bc22 --- /dev/null +++ b/uitest/src/main/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponents.java @@ -0,0 +1,85 @@ +package com.vaadin.tests.components.absolutelayout; + +import com.vaadin.server.VaadinRequest; +import com.vaadin.tests.components.AbstractReindeerTestUI; +import com.vaadin.ui.AbsoluteLayout; +import com.vaadin.ui.Button; +import com.vaadin.ui.Component; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.Panel; + +/** + * Test UI with different cases for component size changes + */ +public class AbsoluteLayoutResizeComponents extends AbstractReindeerTestUI { + + @Override + protected void setup(VaadinRequest request) { + AbsoluteLayout layout = new AbsoluteLayout(); + + addStartWithFullWidth(layout); + addStartWithDefinedWidth(layout); + addStartWithDefinedWidthAbsoluteLayout(layout); + + setContent(layout); + } + + /** + * Build test layout for #8255 + */ + private void addStartWithFullWidth(AbsoluteLayout layout) { + final Panel full = new Panel(new CssLayout(new Label("Start Width 100%"))); + full.setWidth("100%"); + full.setId("expanding-panel"); + + layout.addComponent(full, "right:0;top:10px;"); + layout.addComponent(expandButton(full), "left: 10x; top: 50px;"); + } + + /** + * Build test layout for #8256 + */ + private void addStartWithDefinedWidth(AbsoluteLayout layout) { + final Panel small = new Panel(new CssLayout(new Label("Start Width 250px"))); + small.setWidth("250px"); + small.setId("small-panel"); + + layout.addComponent(small, "right:0;top:100px;"); + layout.addComponent(expandButton(small), "left: 10x; top: 150px;"); + } + + + /** + * Build test layout for #8257 + */ + private void addStartWithDefinedWidthAbsoluteLayout(AbsoluteLayout layout) { + AbsoluteLayout layoutExpading = new AbsoluteLayout(); + layoutExpading.setWidth("250px"); + layoutExpading.addComponent(new Panel(new CssLayout(new Label("Start Width 250px")))); + layoutExpading.setId("absolute-expanding"); + + layout.addComponent(layoutExpading, "right:0;top:200px;"); + layout.addComponent(expandButton(layoutExpading), "left: 10x; top: 250px;"); + } + + /** + * Create size change button for component + * + * @param component Component to controll with button + * @return Created Expand Button + */ + private Button expandButton(Component component) { + Button button = new Button("Change Size", clickEvent -> resizeComponent(component)); + button.setId(component.getId() + "-button"); + return button; + } + + private void resizeComponent(Component component) { + if (component.getWidthUnits().equals(Unit.PERCENTAGE)) { + component.setWidth("250px"); + } else { + component.setWidth("100%"); + } + } +} diff --git a/uitest/src/test/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponentsTest.java b/uitest/src/test/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponentsTest.java new file mode 100644 index 0000000000..6efee81a04 --- /dev/null +++ b/uitest/src/test/java/com/vaadin/tests/components/absolutelayout/AbsoluteLayoutResizeComponentsTest.java @@ -0,0 +1,111 @@ +package com.vaadin.tests.components.absolutelayout; + +import com.vaadin.testbench.elements.ButtonElement; +import com.vaadin.tests.tb3.MultiBrowserTest; +import org.junit.Assert; +import org.junit.Test; +import org.openqa.selenium.By; +import org.openqa.selenium.WebElement; + +import java.util.Optional; + + +/** + * Tests for component positioning after width changes from defined to relative and relative to defined + */ +public class AbsoluteLayoutResizeComponentsTest extends MultiBrowserTest { + + @Test + public void testFullWithComponentWithRightAlignmentShouldMoveRightWhenSettingAbsoluteWidth() { + openTestURL(); + + String componentId = "expanding-panel"; + + Optional<WebElement> panelWrapper = getComponentWrapper(componentId); + + Assert.assertTrue("No wrapper element found for expanding panel [ID: " + componentId + "]", panelWrapper.isPresent()); + + String left = panelWrapper.get().getCssValue("left"); + Assert.assertEquals("Component wrapper was missing left:0; from its css positioning", "0px", left); + + WebElement panelComponent = findElement(By.id(componentId)); + Assert.assertEquals("Panel is not on the left side of the screen", 0, panelComponent.getLocation().getX()); + + // Click button to change component size + $(ButtonElement.class).id(componentId + "-button").click(); + + left = panelWrapper.get().getCssValue("left"); + Assert.assertEquals("Component wrapper did not have its left positioning reset to auto", "auto", left); + Assert.assertNotEquals("Panel is still on the left side of the screen", 0, panelComponent.getLocation().getX()); + } + + @Test + public void testDefinedWidthComponentShouldExpandToFullWidth() { + openTestURL(); + + String componentId = "small-panel"; + + Optional<WebElement> panelWrapper = getComponentWrapper(componentId); + + Assert.assertTrue("No wrapper element found for panel [ID: " + componentId + "]", panelWrapper.isPresent()); + + String left = panelWrapper.get().getCssValue("left"); + Assert.assertEquals("Component wrapper has a set Left marker", "auto", left); + + WebElement panelComponent = findElement(By.id(componentId)); + Assert.assertNotEquals("Panel is positioned to the left side of the screen", 0, panelComponent.getLocation().getX()); + + // Click button to change component size + $(ButtonElement.class).id(componentId + "-button").click(); + + + left = panelWrapper.get().getCssValue("left"); + Assert.assertEquals("Component wrapper was missing left:0; from its css positioning", "0px", left); + + Assert.assertEquals("Panel is not on the left side of the screen", 0, panelComponent.getLocation().getX()); + } + + @Test + public void testDefinedWidthAbsoluteLayoutToFullWidthShouldBeFullWidth() { + openTestURL(); + + String componentId = "absolute-expanding"; + + Optional<WebElement> panelWrapper = getComponentWrapper(componentId); + + Assert.assertTrue("No wrapper element found for AbsoluteLayout [ID: " + componentId + "].", panelWrapper.isPresent()); + + String left = panelWrapper.get().getCssValue("left"); + Assert.assertEquals("Component wrapper did not have its left positioning reset to auto", "auto", left); + + WebElement panelComponent = findElement(By.id(componentId)); + Assert.assertNotEquals("Panel is positioned to the left side of the screen", 0, panelComponent.getLocation().getX()); + + // Click button to change component size + $(ButtonElement.class).id(componentId + "-button").click(); + + left = panelWrapper.get().getCssValue("left"); + Assert.assertEquals("Component wrapper was missing left:0; from its css positioning", "0px", left); + + Assert.assertEquals("Panel is not on the left side of the screen", 0, panelComponent.getLocation().getX()); + } + + /** + * Search for the AbsoluteLayout wrapper element that contains component for componentId + * + * @param componentId Id of component contained in Wrapper component + * @return WrapperComponent or null + */ + private Optional<WebElement> getComponentWrapper(String componentId) { + WebElement panelWrapper = null; + + for (WebElement wrapper : findElements(By.className("v-absolutelayout-wrapper"))) { + // Check if this wrapper contains element with the wanted id. + if (!wrapper.findElements(By.id(componentId)).isEmpty()) { + panelWrapper = wrapper; + break; + } + } + return Optional.ofNullable(panelWrapper); + } +} |