Draggable: Set explicit width/height instead of right/bottom css.

Fixes #7772

2 files changed, 34 insertions, 2 deletions

diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html
index c4b769f5c..50e612206 100644
--- a/tests/unit/draggable/draggable.html
+++ b/tests/unit/draggable/draggable.html
@@ -82,6 +82,7 @@
 		<div id="main">
 			<div id="draggable1" style="background: green; width: 200px; height: 100px; position: relative; top: 0; left: 0;">Relative</div>
 			<div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span><em>Absolute</em></span></div>
+			<div id="draggable3" style="background: green; position: absolute; right: 5px; bottom: 5px; padding: 7px; border: 3px solid black;"><span><em>Absolute right-bottom</em></span></div>
 			<div id="droppable" style="background: green; width: 200px; height: 100px; position: absolute; top: 110px; left: 110px;"><span>Absolute</span></div>
 			<div id="main-forceScrollable"></div>
 		</div>
diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js
index 3e8e7e0f5..8bc48f14c 100644
--- a/tests/unit/draggable/draggable_core.js
+++ b/tests/unit/draggable/draggable_core.js
@@ -25,6 +25,13 @@ test( "element types", function() {
 			el.append("<tr><td>content</td></tr>");
 		}
 
+		// intrinsic height is incorrect in FF for buttons with no content
+		// https://bugzilla.mozilla.org/show_bug.cgi?id=471763
+		// Support: FF
+		if ( typeName === "button" ) {
+			el.text( "button" );
+		}
+
 		el.draggable({ cancel: "" });
 		offsetBefore = el.offset();
 		el.simulate( "drag", {
@@ -35,8 +42,8 @@ test( "element types", function() {
 
 		// Support: FF, Chrome, and IE9,
 		// there are some rounding errors in so we can't say equal, we have to settle for close enough
-		closeEnough( offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + ">" );
-		closeEnough( offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + ">" );
+		closeEnough( offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + "> left" );
+		closeEnough( offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + "> top" );
 		el.draggable("destroy");
 		el.remove();
 	});
@@ -317,4 +324,28 @@ test( "ui-draggable-handle managed correctly in nested draggables", function() {
 	ok( child.hasClass( "ui-draggable-handle" ), "child retains class name on destroy" );
 });
 
+// http://bugs.jqueryui.com/ticket/7772
+// when css 'right' is set, element resizes on drag
+test( "setting right/bottom css shouldn't cause resize", function() {
+	expect( 3 );
+
+	var finalOffset,
+		element = $( "#draggable3" ),
+		origWidth = element.width(),
+		origHeight = element.height(),
+		origOffset = element.offset();
+
+	element.draggable();
+
+	TestHelpers.draggable.move( element, -50, -50 );
+
+	finalOffset = element.offset();
+	finalOffset.left += 50;
+	finalOffset.top += 50;
+
+	equal( element.width(), origWidth, "element retains width" );
+	equal( element.height(), origHeight, "element retains height" );
+	deepEqual( finalOffset, origOffset, "element moves the correct distance" );
+});
+
 })( jQuery );