Fix #8498. Add cssHooks[prop].expand for use by animate().

2 files changed, 67 insertions, 0 deletions

diff --git a/test/unit/css.js b/test/unit/css.js
index 2021d897d..0eec26774 100644
--- a/test/unit/css.js
+++ b/test/unit/css.js
@@ -549,4 +549,44 @@ test("outerWidth(true) and css('margin') returning % instead of px in Webkit, se
 		el = jQuery( "<div/>" ).css({ width: "50%", marginRight: "50%" }).appendTo( container );
 
 	equal( el.outerWidth(true), 400, "outerWidth(true) and css('margin') returning % instead of px in Webkit, see #10639" );
+});
+
+test( "cssHooks - expand", function() {
+	expect( 15 );
+	var result,
+		properties = {
+			margin: [ "marginTop", "marginRight", "marginBottom", "marginLeft" ],
+			borderWidth: [ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
+			padding: [ "paddingTop", "paddingRight", "paddingBottom", "paddingLeft" ]
+		};
+
+	jQuery.each( properties, function( property, keys ) {
+		var hook = jQuery.cssHooks[ property ],
+			expected = {};
+		jQuery.each( keys, function( _, key ) {
+			expected[ key ] = 10;
+		});
+		result = hook.expand( 10 );
+		deepEqual( result, expected, property + " expands properly with a number" );
+
+		jQuery.each( keys, function( _, key ) {
+			expected[ key ] = "10px";
+		});
+		result = hook.expand( "10px" );
+		deepEqual( result, expected, property + " expands properly with '10px'" );
+
+		expected[ keys[1] ] = expected[ keys[3] ] = "20px";
+		result = hook.expand( "10px 20px" );
+		deepEqual( result, expected, property + " expands properly with '10px 20px'" );
+
+		expected[ keys[2] ] = "30px";
+		result = hook.expand( "10px 20px 30px" );
+		deepEqual( result, expected, property + " expands properly with '10px 20px 30px'" );
+
+		expected[ keys[3] ] = "40px";
+		result = hook.expand( "10px 20px 30px 40px" );
+		deepEqual( result, expected, property + " expands properly with '10px 20px 30px 40px'" );
+
+	});
+
 });
\ No newline at end of file
diff --git a/test/unit/effects.js b/test/unit/effects.js
index 82067cb8b..1728cf8f9 100644
--- a/test/unit/effects.js
+++ b/test/unit/effects.js
@@ -1271,3 +1271,30 @@ asyncTest( "callbacks that throw exceptions will be removed (#5684)", function()
 		start();
 	}, 1);
 });
+
+test("animate will scale margin properties individually", function() {
+	expect( 2 );
+	stop();
+
+	var foo = jQuery( "#foo" ).css({
+		margin: 0,
+		marginLeft: 100
+	});
+
+	ok( foo.css( "marginLeft" ) !== foo.css( "marginRight" ), "Sanity Check" );
+
+	foo.animate({
+		margin: 200
+	}).stop();
+
+	ok( foo.css( "marginLeft") !== foo.css( "marginRight" ), "The margin properties are different");
+
+	// clean up for next test
+	foo.css({
+		marginLeft: '',
+		marginRight: '',
+		marginTop: '',
+		marginBottom: ''
+	});
+	start();
+});