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

mgol · mgol · commit c834f76268bc · 2018-04-30T19:01:56.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: {},
@@ -245,9 +229,9 @@ jQuery.extend( {
 				return;
 			}
 
-			// If a number was passed in, add the unit (except for certain CSS properties)
+			// If the value is a number, add `px` 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,11 +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 = elem.nodeType &&
-			( jQuery.cssNumber[ prop ] || unit !== "px" && +initial ) &&
+			( !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,36 @@
+define( function() {
+
+"use strict";
+
+return function( prop ) {
+
+	// The second regex visualized:
+	//
+	//                                       /----------\
+	//                   /-------------\    |            |
+	//                  |               |   |  / Top  \  |
+	//                  |  / Margin  \  |   | | Right  | |
+	//         /--------+-|           |-+---+-| Bottom |-+---\
+	//        |            \ Padding /         \ Left /       |
+	//        |                                               |
+	//        |                /---------\                    |
+	//        |               |           |                   |- END
+	//        |               |  / Min \  |    / Width  \     |
+	//        |---------------+-|       |-+---|          |----|
+	//        |                  \ Max /       \ Height /     |
+	// BEGIN -|                                               |
+	//        |                /----------\                   |
+	//        |               |            |    /-------\     |
+	//        |               |  / Top  \  |   |         |    |
+	//         \--- Border ---+-| Right  |-+---+- Width -+---/
+	//                          | Bottom |
+	//                           \ Left /
+
+	// The first test is used to ensure that:
+	// 1. The prop starts with a lowercase letter (as we uppercase it for the second regex).
+	// 2. The prop is not empty.
+	return /^[a-z]$/.test( prop[ 0 ] ) &&
+		/^(?:((?:Margin|Padding)?(?:Top|Right|Bottom|Left)?)|(?:Min|Max)?(?:Width|Height)|Border(?:Top|Right|Bottom|Left)?(?:Width)?)$/.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 ];
