Fix to LayoutManager size calculations during transform. (#12138)

* Fix to LayoutManager size calculations during transform.

- ComputedStyle is slower but more reliable than using
getBoundingClientRect, which does not work as expected if a transform
has been applied to the element or one of its parents. This is a problem
e.g. with PopupView, where getBoundingClientRect will return too small
size (or even zero size) for all the popup contents while the opening
animation is active. ComputedStyle ignores the transform and returns the
expected value.
- The presence of the element in DOM must be checked before the size is
requested from ComputedStyle, if the element has disappeared from DOM
without a warning and calculation is attempted anyway, the browser gets
stuck.
- Possibility to configure LayoutManager to use the less reliable
calculations for applications where the slight performance difference is
more important than layout issues within elements that have transform
animations.
- Manual test, problem isn't reproducible by TestBench.

Fixes: #11187

1 files changed, 65 insertions, 0 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/components/popupview/PopupViewContentWithExpandRatio.java b/uitest/src/main/java/com/vaadin/tests/components/popupview/PopupViewContentWithExpandRatio.java
new file mode 100644
index 0000000000..fd34d34430
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/components/popupview/PopupViewContentWithExpandRatio.java
@@ -0,0 +1,65 @@
+package com.vaadin.tests.components.popupview;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.tests.util.LoremIpsum;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.JavaScript;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.PopupView;
+import com.vaadin.ui.VerticalLayout;
+
+public class PopupViewContentWithExpandRatio extends AbstractTestUI {
+    private PopupView popup;
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        popup = new PopupView("Open popup", createPopupContent());
+        popup.setHideOnMouseOut(false);
+        popup.setPopupVisible(false);
+        addComponent(popup);
+    }
+
+    private VerticalLayout createPopupContent() {
+        Label label = new Label(
+                "Placeholder content that should take up most of the available space");
+        label.setValue(LoremIpsum.get(56));
+        label.setSizeFull();
+        label.setId("label");
+
+        Button refreshBtn = new Button("Force layout", e -> {
+            JavaScript.eval("vaadin.forceLayout()");
+        });
+        refreshBtn.setId("refresh");
+
+        Button submitBtn = new Button("Close popup");
+        submitBtn.addClickListener(clickEvent -> {
+            popup.setPopupVisible(false);
+        });
+        submitBtn.setId("close");
+
+        VerticalLayout content = new VerticalLayout();
+        content.setHeight("300px");
+        content.setSpacing(true);
+        content.setMargin(true);
+
+        content.addComponent(label);
+        content.addComponent(refreshBtn);
+        content.addComponent(submitBtn);
+        content.setExpandRatio(label, 2.0f);
+        return content;
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 11187;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Expand ratio shouldn't cause contents to overflow "
+                + "from popup view. The popup should be opened at least "
+                + "20 times without SuperDevMode or TestBench or other "
+                + "configurations that might slow down the processing.";
+    }
+}