Effects: 1.8 Animation Rewrite - thanks @mikesherov and @gibson042

src/css.js

@@ -1,10 +1,12 @@
 (function( jQuery ) {
 
+jQuery.cssExpand = [ "Top", "Right", "Bottom", "Left" ];
+
 var ralpha = /alpha\([^)]*\)/i,
 	ropacity = /opacity=([^)]*)/,
 	// fixed for IE9, see #8346
 	rupper = /([A-Z]|^ms)/g,
-	rnum = /^[\-+]?(?:\d*\.)?\d+$/i,
+	rnumsplit = /^([\-+]?(?:\d*\.)?\d+)(.*)$/i,
 	rnumnonpx = /^-?(?:\d*\.)?\d+(?!px)[^\d\s]+$/i,
 	rrelNum = /^([\-+])=([\-+.\de]+)/,
 	rmargin = /^margin/,
@@ -12,7 +14,7 @@ var ralpha = /alpha\([^)]*\)/i,
 	cssShow = { position: "absolute", visibility: "hidden", display: "block" },
 
 	// order is important!
-	cssExpand = [ "Top", "Right", "Bottom", "Left" ],
+	cssExpand = jQuery.cssExpand,
 	cssPrefixes = [ "O", "Webkit", "Moz", "ms" ],
 
 	curCSS;
@@ -264,6 +266,13 @@ if ( document.defaultView && document.defaultView.getComputedStyle ) {
 	};
 }
 
+function setPositiveNumber( elem, value ) {
+	var matches = rnumsplit.exec( value );
+	return matches ?
+			Math.max( 0, matches[ 1 ] ) + ( matches [ 2 ] || "px" )
+			: value;
+}
+
 function getWidthOrHeight( elem, name, extra ) {
 
 	// Start with offset property, which is equivalent to the border-box value
@@ -348,11 +357,7 @@ jQuery.each([ "height", "width" ], function( i, name ) {
 			}
 		},
 
-		set: function( elem, value ) {
+		set: setPositiveNumber
-			return rnum.test( value ) ?
-				value + "px" :
-				value;
-		}
 	};
 });
 
@@ -436,7 +441,6 @@ jQuery.each({
 	padding: "",
 	border: "Width"
 }, function( prefix, suffix ) {
-
 	jQuery.cssHooks[ prefix + suffix ] = {
 		expand: function( value ) {
 			var i,
@@ -453,6 +457,10 @@ jQuery.each({
 			return expanded;
 		}
 	};
+
+	if ( !rmargin.test( prefix ) ) {
+		jQuery.cssHooks[ prefix + suffix ].set = setPositiveNumber;
+	}
 });
 
 })( jQuery );

test/unit/css.js

@@ -37,13 +37,13 @@ test("css(String|Hash)", function() {
 
 	div2.remove();
 
-	// handle negative numbers by ignoring #1599, #4216
+	// handle negative numbers by setting to zero #11604
 	jQuery("#nothiddendiv").css( {width: 1, height: 1} );
 
 	var width = parseFloat(jQuery("#nothiddendiv").css("width")), height = parseFloat(jQuery("#nothiddendiv").css("height"));
 	jQuery("#nothiddendiv").css({ width: -1, height: -1 });
-	equal( parseFloat(jQuery("#nothiddendiv").css("width")), width, "Test negative width ignored");
+	equal( parseFloat(jQuery("#nothiddendiv").css("width")), 0, "Test negative width set to 0");
-	equal( parseFloat(jQuery("#nothiddendiv").css("height")), height, "Test negative height ignored");
+	equal( parseFloat(jQuery("#nothiddendiv").css("height")), 0, "Test negative height set to 0");
 
 	equal( jQuery("<div style='display: none;'>").css("display"), "none", "Styles on disconnected nodes");
 

test/unit/effects.js

@@ -792,7 +792,7 @@ jQuery.checkOverflowDisplay = function(){
 	start();
 };
 
-test( "jQuery.fx.prototype.cur()", 6, function() {
+test( "jQuery.fx.prototype.cur() - <1.8 Back Compat", 7, function() {
 	var div = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" ).css({
 			color: "#ABC",
 			border: "5px solid black",
@@ -814,6 +814,8 @@ test( "jQuery.fx.prototype.cur()", 6, function() {
 
 	// backgroundPosition actually returns 0% 0% in most browser
 	// this fakes a "" return
+	// hook now gets called twice because Tween will grab the current
+	// value as it is being newed
 	jQuery.cssHooks.backgroundPosition = {
 		get: function() {
 			ok( true, "hook used" );
@@ -1387,3 +1389,62 @@ test("animate will scale margin properties individually", function() {
 	});
 	start();
 });
+
+// Start 1.8 Animation tests
+asyncTest( "jQuery.Animation( object, props, opts )", 1, function() {
+	var testObject = {
+			foo: 0,
+			bar: 1,
+			width: 100
+		},
+		testDest = {
+			foo: 1,
+			bar: 0,
+			width: 200
+		};
+
+	jQuery.Animation( testObject, testDest, { duration: 1 })
+		.done( function() {
+			deepEqual( testObject, testDest, "Animated foo and bar" );
+			start();
+		});
+});
+
+asyncTest( "Animate Option: step: function( percent, tween )", 1, function() {
+	var counter = {};
+	jQuery( "#foo" ).animate({
+		prop1: 1,
+		prop2: 2,
+		prop3: 3
+	}, {
+		duration: 1,
+		step: function( value, tween ) {
+			calls = counter[ tween.prop ] = counter[ tween.prop ] || [];
+			calls.push( value );
+		}
+	}).queue( function( next ) {
+		deepEqual( counter, {
+			prop1: [0, 1],
+			prop2: [0, 2],
+			prop3: [0, 3]
+		}, "Step function was called once at 0% and once at 100% for each property");
+		next();
+		start();
+	});
+});
+
+
+asyncTest( "Animate callbacks have correct context", 2, function() {
+	var foo = jQuery( "#foo" );
+	foo.animate({
+		height: 10
+	}, 10, function() {
+		equal( foo[ 0 ], this, "Complete callback after stop(true) `this` is element" );
+	}).stop( true, true );
+	foo.animate({
+		height: 100
+	}, 10, function() {
+		equal( foo[ 0 ], this, "Complete callback `this` is element" );
+		start();
+	});
+});