Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit00a9c2e

Browse files
committed
CSS: Don't automatically add "px" to properties with a few exceptions
Fixesgh-2795Closesgh-4055Refgh-4009
1 parentc4f2fa2 commit00a9c2e

File tree

5 files changed

+133
-37
lines changed

5 files changed

+133
-37
lines changed

‎src/css.js

Lines changed: 5 additions & 30 deletions
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

Lines changed: 4 additions & 3 deletions
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
returnjQuery.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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
define(function(){
2+
3+
"use strict";
4+
5+
varralphaStart=/^[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+
functionisAutoPx(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+
returnralphaStart.test(prop)&&
36+
rautoPx.test(prop[0].toUpperCase()+prop.slice(1));
37+
};
38+
39+
returnisAutoPx;
40+
41+
});

‎src/effects/Tween.js

Lines changed: 3 additions & 2 deletions
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
varhooks=Tween.propHooks[this.prop];

‎test/unit/css.js

Lines changed: 80 additions & 2 deletions
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+
varprop,
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(propinwhitelist){
1336+
varpropToCheck=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)
[8]ページ先頭
©2009-2025 Movatter.jp