CSS: Don't automatically add "px" to properties with a few exceptions

mgol · mgol · commit 096afcf23469 · 2018-04-24T10:41:40.000+02:00
Fixes gh-2795 Ref gh-4009
diff --git a/src/css.js b/src/css.js
@@ -7,6 +7,7 @@ define( [
 	"./var/rcssNum",
 	"./css/var/rnumnonpx",
 	"./css/var/cssExpand",
+	"./css/var/isAutoPx",
 	"./css/var/getStyles",
 	"./css/var/swap",
 	"./css/curCSS",
@@ -19,7 +20,7 @@ define( [
 	"./core/ready",
 	"./selector" // contains
 ], function( jQuery, pnum, access, camelCase, document, rcssNum, rnumnonpx, cssExpand,
-	getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) {
+	isAutoPx, getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) {
 
 "use strict";
 
@@ -183,23 +184,6 @@ jQuery.extend( {
 		}
 	},
 
-	// Don't automatically add "px" to these possibly-unitless properties
-	cssNumber: {
-		"animationIterationCount": true,
-		"columnCount": true,
-		"fillOpacity": true,
-		"flexGrow": true,
-		"flexShrink": true,
-		"fontWeight": true,
-		"lineHeight": true,
-		"opacity": true,
-		"order": true,
-		"orphans": true,
-		"widows": true,
-		"zIndex": true,
-		"zoom": true
-	},
-
 	// Add in properties whose names you wish to fix before
 	// setting or getting the value
 	cssProps: {},
@@ -247,7 +231,7 @@ jQuery.extend( {
 
 			// If a number was passed in, add the unit (except for certain CSS properties)
 			if ( type === "number" ) {
-				value += ret && ret[ 3 ] || ( jQuery.cssNumber[ origName ] ? "" : "px" );
+				value += ret && ret[ 3 ] || ( isAutoPx( origName ) ? "px" : "" );
 			}
 
 			// background-* props affect original clone's values
diff --git a/src/css/adjustCSS.js b/src/css/adjustCSS.js
@@ -1,7 +1,8 @@
 define( [
 	"../core",
+	"./var/isAutoPx",
 	"../var/rcssNum"
-], function( jQuery, rcssNum ) {
+], function( jQuery, isAutoPx, rcssNum ) {
 
 "use strict";
 
@@ -16,10 +17,11 @@ function adjustCSS( elem, prop, valueParts, tween ) {
 				return jQuery.css( elem, prop, "" );
 			},
 		initial = currentValue(),
-		unit = valueParts && valueParts[ 3 ] || ( jQuery.cssNumber[ prop ] ? "" : "px" ),
+		unit = valueParts && valueParts[ 3 ] || ( isAutoPx( prop ) ? "px" : "" ),
 
 		// Starting value computation is required for potential unit mismatches
-		initialInUnit = ( jQuery.cssNumber[ prop ] || unit !== "px" && +initial ) &&
+		initialInUnit = elem.nodeType &&
+			( !isAutoPx( prop ) || unit !== "px" && +initial ) &&
 			rcssNum.exec( jQuery.css( elem, prop ) );
 
 	if ( initialInUnit && initialInUnit[ 3 ] !== unit ) {
diff --git a/src/css/var/isAutoPx.js b/src/css/var/isAutoPx.js
@@ -0,0 +1,31 @@
+define( function() {
+
+"use strict";
+
+return function( prop ) {
+
+	// The second regex visualized:
+	//
+	//         /--------------------------------\
+	//        |                                  |
+	//        |                    /----------\  |
+	//        |  /-------------\  |            | |  /------------\
+	//        | |               | |  / Top  \  | | |              |
+	//        | |  / Margin  \  | | | Right  | | | |  / Width  \  |
+	//        |-+-|  Border   |-+-+-| Bottom |-+-|-+-|          |-+-END
+	//        |    \ Padding /       \ Left /    |    \ Height /
+	//        |                                  |
+	// BEGIN -|            /---------\           |
+	//        |           |           |          |
+	//        |           |  / Min \  |          |
+	//         \----------+-|       |-+---------/
+	//                       \ Max /
+
+	// The first test is used both to ensure the prop starts a lowercase letter (as we
+	// uppercase it for the second regex) and that it doesn't start with a dash as then
+	// we may be dealing with a CSS variable which shouldn't be touched.
+	return /[a-z]/.test( prop[ 0 ] ) &&
+		/^(?:(?:Margin|Border|Padding)?(?:Top|Right|Bottom|Left)?|(?:Min|Max)?)?(?:Width|Height)?$/.test( prop[ 0 ].toUpperCase() + prop.substr( 1 ) );
+};
+
+} );
diff --git a/src/effects/Tween.js b/src/effects/Tween.js
@@ -1,9 +1,10 @@
 define( [
 	"../core",
+	"../css/var/isAutoPx",
 	"../css/finalPropName",
 
 	"../css"
-], function( jQuery, finalPropName ) {
+], function( jQuery, isAutoPx, finalPropName ) {
 
 "use strict";
 
@@ -21,7 +22,7 @@ Tween.prototype = {
 		this.options = options;
 		this.start = this.now = this.cur();
 		this.end = end;
-		this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
+		this.unit = unit || ( isAutoPx( prop ) ? "px" : "" );
 	},
 	cur: function() {
 		var hooks = Tween.propHooks[ this.prop ];
