Set explicit calculated size for drag image element (#14617).

Change-Id: I6bfcd0a5ad78bd79aad2fa2357a7e33a00b3c33d

4 files changed, 121 insertions, 1 deletions

diff --git a/client/src/com/vaadin/client/ui/dd/VDragEvent.java b/client/src/com/vaadin/client/ui/dd/VDragEvent.java
index 6291a38e42..45f89bdb87 100644
--- a/client/src/com/vaadin/client/ui/dd/VDragEvent.java
+++ b/client/src/com/vaadin/client/ui/dd/VDragEvent.java
@@ -244,6 +244,11 @@ public class VDragEvent {
     public void createDragImage(com.google.gwt.user.client.Element element,
             boolean alignImageToEvent) {
         Element cloneNode = (Element) element.cloneNode(true);
+
+        // Set size explicitly for cloned node to avoid stretching #14617.
+        cloneNode.getStyle().setWidth(element.getOffsetWidth(), Unit.PX);
+        cloneNode.getStyle().setHeight(element.getOffsetHeight(), Unit.PX);
+
         syncContent(element, cloneNode);
         if (BrowserInfo.get().isIE()) {
             if (cloneNode.getTagName().toLowerCase().equals("tr")) {
diff --git a/uitest/src/com/vaadin/tests/components/draganddropwrapper/DragAndDropRelativeWidth.java b/uitest/src/com/vaadin/tests/components/draganddropwrapper/DragAndDropRelativeWidth.java
new file mode 100644
index 0000000000..90ec704a8c
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/draganddropwrapper/DragAndDropRelativeWidth.java
@@ -0,0 +1,58 @@
+/*
+ * 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.draganddropwrapper;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.DragAndDropWrapper;
+import com.vaadin.ui.DragAndDropWrapper.DragStartMode;
+import com.vaadin.ui.Label;
+
+/**
+ * Test UI for DnD image element size
+ * 
+ * @author Vaadin Ltd
+ */
+public class DragAndDropRelativeWidth extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        CssLayout layout = new CssLayout();
+        layout.setWidth(300, Unit.PIXELS);
+
+        Label label = new Label("drag source");
+        label.addStyleName("drag-source");
+        label.setWidth(100, Unit.PERCENTAGE);
+        DragAndDropWrapper wrapper = new DragAndDropWrapper(label);
+        wrapper.setWidth(100, Unit.PERCENTAGE);
+        wrapper.setDragStartMode(DragStartMode.COMPONENT);
+
+        layout.addComponent(wrapper);
+        addComponent(layout);
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Set explicit size for drag image element using calclulated size from the source";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 14617;
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/components/draganddropwrapper/DragAndDropRelativeWidthTest.java b/uitest/src/com/vaadin/tests/components/draganddropwrapper/DragAndDropRelativeWidthTest.java
new file mode 100644
index 0000000000..9cb7a63046
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/draganddropwrapper/DragAndDropRelativeWidthTest.java
@@ -0,0 +1,57 @@
+/*
+ * 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.draganddropwrapper;
+
+import org.junit.Assert;
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.Dimension;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.interactions.Actions;
+
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+/**
+ * Test to check size of drag image element.
+ * 
+ * @author Vaadin Ltd
+ */
+public class DragAndDropRelativeWidthTest extends MultiBrowserTest {
+
+    @Test
+    public void testDragImageElementSize() {
+        openTestURL();
+
+        WebElement label = getDriver().findElement(By.className("drag-source"));
+        Dimension size = label.getSize();
+        int height = size.getHeight();
+        int width = size.getWidth();
+        Actions actions = new Actions(getDriver());
+        actions.moveToElement(label);
+        actions.clickAndHold();
+        actions.moveByOffset(100, 100);
+        actions.build().perform();
+
+        WebElement dragImage = getDriver().findElement(
+                By.className("v-drag-element"));
+
+        Assert.assertEquals("Drag image element height is unexpected", height,
+                dragImage.getSize().getHeight());
+        Assert.assertEquals("Drag image element width is unexpected", width,
+                dragImage.getSize().getWidth());
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/components/draganddropwrapper/DragStartModesTest.java b/uitest/src/com/vaadin/tests/components/draganddropwrapper/DragStartModesTest.java
index ba27ee293e..4e60b43ea2 100644
--- a/uitest/src/com/vaadin/tests/components/draganddropwrapper/DragStartModesTest.java
+++ b/uitest/src/com/vaadin/tests/components/draganddropwrapper/DragStartModesTest.java
@@ -40,7 +40,7 @@ public class DragStartModesTest extends MultiBrowserTest {
         new Actions(driver).moveToElement(draggable, 10, 10).clickAndHold()
                 .moveByOffset(5, 0).perform();
         new Actions(driver).moveToElement(dropTarget, 12, 10).perform();
-        compareScreen("dragMode" + dragMode);
+        compareScreen("dragImageMode" + dragMode);
         new Actions(driver).release().perform();
     }