Skip to content

Commit 00a9c2e

Browse files
mgolmgol
committed
CSS: Don't automatically add "px" to properties with a few exceptions
Fixes gh-2795 Closes gh-4055 Ref gh-4009
1 parent c4f2fa2 commit 00a9c2e

File tree

5 files changed

+133
-37
lines changed

5 files changed

+133
-37
lines changed

‎src/css.js

+5-30
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ define( [
55
"./var/rcssNum",
66
"./css/var/rnumnonpx",
77
"./css/var/cssExpand",
8+
"./css/isAutoPx",
89
"./css/var/getStyles",
910
"./css/var/swap",
1011
"./css/curCSS",
@@ -16,7 +17,7 @@ define( [
1617
"./core/init",
1718
"./core/ready",
1819
"./selector" // contains
19-
], function( jQuery, access, camelCase, rcssNum, rnumnonpx, cssExpand,
20+
], function( jQuery, access, camelCase, rcssNum, rnumnonpx, cssExpand, isAutoPx,
2021
getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) {
2122

2223
"use strict";
@@ -198,30 +199,6 @@ jQuery.extend( {
198199
}
199200
},
200201

201-
// Don't automatically add "px" to these possibly-unitless properties
202-
cssNumber: {
203-
"animationIterationCount": true,
204-
"columnCount": true,
205-
"fillOpacity": true,
206-
"flexGrow": true,
207-
"flexShrink": true,
208-
"fontWeight": true,
209-
"gridArea": true,
210-
"gridColumn": true,
211-
"gridColumnEnd": true,
212-
"gridColumnStart": true,
213-
"gridRow": true,
214-
"gridRowEnd": true,
215-
"gridRowStart": true,
216-
"lineHeight": true,
217-
"opacity": true,
218-
"order": true,
219-
"orphans": true,
220-
"widows": true,
221-
"zIndex": true,
222-
"zoom": true
223-
},
224-
225202
// Add in properties whose names you wish to fix before
226203
// setting or getting the value
227204
cssProps: {},
@@ -267,11 +244,9 @@ jQuery.extend( {
267244
return;
268245
}
269246

270-
// If a number was passed in, add the unit (except for certain CSS properties)
271-
// The isCustomProp check can be removed in jQuery 4.0 when we only auto-append
272-
// "px" to a few hardcoded values.
273-
if ( type === "number" && !isCustomProp ) {
274-
value += ret && ret[ 3 ] || ( jQuery.cssNumber[ origName ] ? "" : "px" );
247+
// If the value is a number, add `px` for certain CSS properties
248+
if ( type === "number" ) {
249+
value += ret && ret[ 3 ] || ( isAutoPx( origName ) ? "px" : "" );
275250
}
276251

277252
// background-* props affect original clone's values

‎src/css/adjustCSS.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
define( [
22
"../core",
3+
"./isAutoPx",
34
"../var/rcssNum"
4-
], function( jQuery, rcssNum ) {
5+
], function( jQuery, isAutoPx, rcssNum ) {
56

67
"use strict";
78

@@ -16,11 +17,11 @@ function adjustCSS( elem, prop, valueParts, tween ) {
1617
return jQuery.css( elem, prop, "" );
1718
},
1819
initial = currentValue(),
19-
unit = valueParts && valueParts[ 3 ] || ( jQuery.cssNumber[ prop ] ? "" : "px" ),
20+
unit = valueParts && valueParts[ 3 ] || ( isAutoPx( prop ) ? "px" : "" ),
2021

2122
// Starting value computation is required for potential unit mismatches
2223
initialInUnit = elem.nodeType &&
23-
( jQuery.cssNumber[ prop ] || unit !== "px" && +initial ) &&
24+
( !isAutoPx( prop ) || unit !== "px" && +initial ) &&
2425
rcssNum.exec( jQuery.css( elem, prop ) );
2526

2627
if ( initialInUnit && initialInUnit[ 3 ] !== unit ) {

‎src/css/isAutoPx.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
define( function() {
2+
3+
"use strict";
4+
5+
var ralphaStart = /^[a-z]/,
6+
7+
// The regex visualized:
8+
//
9+
// /----------\
10+
// | | /-------\
11+
// | / Top \ | | |
12+
// /--- Border ---+-| Right |-+---+- Width -+---\
13+
// | | Bottom | |
14+
// | \ Left / |
15+
// | |
16+
// | /----------\ |
17+
// | /-------------\ | | |- END
18+
// | | | | / Top \ | |
19+
// | | / Margin \ | | | Right | | |
20+
// |---------+-| |-+---+-| Bottom |-+----|
21+
// | \ Padding / \ Left / |
22+
// BEGIN -| |
23+
// | /---------\ |
24+
// | | | |
25+
// | | / Min \ | / Width \ |
26+
// \--------------+-| |-+---| |---/
27+
// \ Max / \ Height /
28+
rautoPx = /^(?:Border(?:Top|Right|Bottom|Left)?(?:Width|)|(?:Margin|Padding)?(?:Top|Right|Bottom|Left)?|(?:Min|Max)?(?:Width|Height))$/;
29+
30+
function isAutoPx( prop ) {
31+
32+
// The first test is used to ensure that:
33+
// 1. The prop starts with a lowercase letter (as we uppercase it for the second regex).
34+
// 2. The prop is not empty.
35+
return ralphaStart.test( prop ) &&
36+
rautoPx.test( prop[ 0 ].toUpperCase() + prop.slice( 1 ) );
37+
};
38+
39+
return isAutoPx;
40+
41+
} );

‎src/effects/Tween.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
define( [
22
"../core",
3+
"../css/isAutoPx",
34
"../css/finalPropName",
45

56
"../css"
6-
], function( jQuery, finalPropName ) {
7+
], function( jQuery, isAutoPx, finalPropName ) {
78

89
"use strict";
910

@@ -21,7 +22,7 @@ Tween.prototype = {
2122
this.options = options;
2223
this.start = this.now = this.cur();
2324
this.end = end;
24-
this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
25+
this.unit = unit || ( isAutoPx( prop ) ? "px" : "" );
2526
},
2627
cur: function() {
2728
var hooks = Tween.propHooks[ this.prop ];

‎test/unit/css.js

+80-2
Original file line numberDiff line numberDiff line change
@@ -1198,14 +1198,17 @@ if ( jQuery.fn.offset ) {
11981198
}
11991199

12001200
QUnit.test( "Do not append px (#9548, #12990, #2792)", function( assert ) {
1201-
assert.expect( 3 );
1201+
assert.expect( 4 );
12021202

12031203
var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
12041204

12051205
$div.css( "fill-opacity", 1 );
1206-
12071206
assert.equal( $div.css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" );
12081207

1208+
$div.css( "font-size", "27px" );
1209+
$div.css( "line-height", 2 );
1210+
assert.equal( $div.css( "line-height" ), "54px", "Do not append px to 'line-height'" );
1211+
12091212
$div.css( "column-count", 1 );
12101213
if ( $div.css( "column-count" ) !== undefined ) {
12111214
assert.equal( $div.css( "column-count" ), 1, "Do not append px to 'column-count'" );
@@ -1273,6 +1276,81 @@ QUnit[
12731276
}
12741277
} );
12751278

1279+
QUnit.test( "Do not append px to most properties not accepting integer values", function( assert ) {
1280+
assert.expect( 3 );
1281+
1282+
var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1283+
1284+
$div.css( "font-size", "27px" );
1285+
1286+
$div.css( "font-size", 2 );
1287+
assert.equal( $div.css( "font-size" ), "27px", "Do not append px to 'font-size'" );
1288+
1289+
$div.css( "fontSize", 2 );
1290+
assert.equal( $div.css( "fontSize" ), "27px", "Do not append px to 'fontSize'" );
1291+
1292+
$div.css( "letter-spacing", "2px" );
1293+
$div.css( "letter-spacing", 3 );
1294+
assert.equal( $div.css( "letter-spacing" ), "2px", "Do not append px to 'letter-spacing'" );
1295+
} );
1296+
1297+
QUnit.test( "Append px to whitelisted properties", function( assert ) {
1298+
var prop,
1299+
$div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
1300+
whitelist = {
1301+
margin: "marginTop",
1302+
marginTop: undefined,
1303+
marginRight: undefined,
1304+
marginBottom: undefined,
1305+
marginLeft: undefined,
1306+
padding: "paddingTop",
1307+
paddingTop: undefined,
1308+
paddingRight: undefined,
1309+
paddingBottom: undefined,
1310+
paddingLeft: undefined,
1311+
top: undefined,
1312+
right: undefined,
1313+
bottom: undefined,
1314+
left: undefined,
1315+
width: undefined,
1316+
height: undefined,
1317+
minWidth: undefined,
1318+
minHeight: undefined,
1319+
maxWidth: undefined,
1320+
maxHeight: undefined,
1321+
border: "borderTopWidth",
1322+
borderWidth: "borderTopWidth",
1323+
borderTop: "borderTopWidth",
1324+
borderTopWidth: undefined,
1325+
borderRight: "borderRightWidth",
1326+
borderRightWidth: undefined,
1327+
borderBottom: "borderBottomWidth",
1328+
borderBottomWidth: undefined,
1329+
borderLeft: "borderLeftWidth",
1330+
borderLeftWidth: undefined
1331+
};
1332+
1333+
assert.expect( ( Object.keys( whitelist ).length ) * 2 );
1334+
1335+
for ( prop in whitelist ) {
1336+
var propToCheck = whitelist[ prop ] || prop,
1337+
kebabProp = prop.replace( /[A-Z]/g, function( match ) {
1338+
return "-" + match.toLowerCase();
1339+
} ),
1340+
kebabPropToCheck = propToCheck.replace( /[A-Z]/g, function( match ) {
1341+
return "-" + match.toLowerCase();
1342+
} );
1343+
$div.css( prop, 3 )
1344+
.css( "position", "absolute" )
1345+
.css( "border-style", "solid" );
1346+
assert.equal( $div.css( propToCheck ), "3px", "Append px to '" + prop + "'" );
1347+
$div.css( kebabProp, 3 )
1348+
.css( "position", "absolute" )
1349+
.css( "border-style", "solid" );
1350+
assert.equal( $div.css( kebabPropToCheck ), "3px", "Append px to '" + kebabProp + "'" );
1351+
}
1352+
} );
1353+
12761354
QUnit.test( "css('width') and css('height') should respect box-sizing, see #11004", function( assert ) {
12771355
assert.expect( 4 );
12781356

0 commit comments

Comments
 (0)