Skip to content

Commit 75b3cdd

Browse files
timmywiltimmywil
committed
Dimensions: properly manipulate non-px values
Fixes gh-1712 Close gh-2695
1 parent 22449eb commit 75b3cdd

File tree

2 files changed

+54
-39
lines changed

2 files changed

+54
-39
lines changed

‎src/css.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ var
2727
// except "table", "table-cell", or "table-caption"
2828
// See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
2929
rdisplayswap = /^(none|table(?!-c[ea]).+)/,
30-
rnumsplit = new RegExp( "^(" + pnum + ")(.*)$", "i" ),
31-
3230
cssShow = { position: "absolute", visibility: "hidden", display: "block" },
3331
cssNormalTransform = {
3432
letterSpacing: "0",
@@ -59,11 +57,14 @@ function vendorPropName( name ) {
5957
}
6058

6159
function setPositiveNumber( elem, value, subtract ) {
62-
var matches = rnumsplit.exec( value );
60+
61+
// Any relative (+/-) values have already been
62+
// normalized at this point
63+
var matches = rcssNum.exec( value );
6364
return matches ?
6465

6566
// Guard against undefined "subtract", e.g., when used as in cssHooks
66-
Math.max( 0, matches[ 1 ] - ( subtract || 0 ) ) + ( matches[ 2 ] || "px" ) :
67+
Math.max( 0, matches[ 2 ] - ( subtract || 0 ) ) + ( matches[ 3 ] || "px" ) :
6768
value;
6869
}
6970

@@ -336,16 +337,25 @@ jQuery.each( [ "height", "width" ], function( i, name ) {
336337
},
337338

338339
set: function( elem, value, extra ) {
339-
var styles = extra && getStyles( elem );
340-
return setPositiveNumber( elem, value, extra ?
341-
augmentWidthOrHeight(
340+
var matches,
341+
styles = extra && getStyles( elem ),
342+
subtract = extra && augmentWidthOrHeight(
342343
elem,
343344
name,
344345
extra,
345346
jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
346347
styles
347-
) : 0
348-
);
348+
);
349+
350+
// Convert to pixels if value adjustment is needed
351+
if ( subtract && ( matches = rcssNum.exec( value ) ) &&
352+
( matches[ 3 ] || "px" ) !== "px" ) {
353+
354+
elem.style[ name ] = value;
355+
value = jQuery.css( elem, name );
356+
}
357+
358+
return setPositiveNumber( elem, value, subtract );
349359
}
350360
};
351361
} );

‎test/unit/dimensions.js‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -418,36 +418,41 @@ QUnit.test( "getters on non elements should return null", function( assert ) {
418418
} );
419419

420420
QUnit.test( "setters with and without box-sizing:border-box", function( assert ) {
421-
assert.expect( 20 );
422-
423-
// Support: Android 2.3 (-webkit-box-sizing).
424-
var el_bb = jQuery( "<div style='width:114px;height:114px;margin:5px;padding:3px;border:4px solid white;-webkit-box-sizing:border-box;box-sizing:border-box;'>test</div>" ).appendTo( "#qunit-fixture" ),
425-
el = jQuery( "<div style='width:100px;height:100px;margin:5px;padding:3px;border:4px solid white;'>test</div>" ).appendTo( "#qunit-fixture" ),
426-
expected = 100;
427-
428-
assert.equal( el_bb.width( 101 ).width(), expected + 1, "test border-box width(int) by roundtripping" );
429-
assert.equal( el_bb.innerWidth( 108 ).width(), expected + 2, "test border-box innerWidth(int) by roundtripping" );
430-
assert.equal( el_bb.outerWidth( 117 ).width(), expected + 3, "test border-box outerWidth(int) by roundtripping" );
431-
assert.equal( el_bb.outerWidth( 118, false ).width(), expected + 4, "test border-box outerWidth(int, false) by roundtripping" );
432-
assert.equal( el_bb.outerWidth( 129, true ).width(), expected + 5, "test border-box innerWidth(int, true) by roundtripping" );
433-
434-
assert.equal( el_bb.height( 101 ).height(), expected + 1, "test border-box height(int) by roundtripping" );
435-
assert.equal( el_bb.innerHeight( 108 ).height(), expected + 2, "test border-box innerHeight(int) by roundtripping" );
436-
assert.equal( el_bb.outerHeight( 117 ).height(), expected + 3, "test border-box outerHeight(int) by roundtripping" );
437-
assert.equal( el_bb.outerHeight( 118, false ).height(), expected + 4, "test border-box outerHeight(int, false) by roundtripping" );
438-
assert.equal( el_bb.outerHeight( 129, true ).height(), expected + 5, "test border-box innerHeight(int, true) by roundtripping" );
439-
440-
assert.equal( el.width( 101 ).width(), expected + 1, "test border-box width(int) by roundtripping" );
441-
assert.equal( el.innerWidth( 108 ).width(), expected + 2, "test border-box innerWidth(int) by roundtripping" );
442-
assert.equal( el.outerWidth( 117 ).width(), expected + 3, "test border-box outerWidth(int) by roundtripping" );
443-
assert.equal( el.outerWidth( 118, false ).width(), expected + 4, "test border-box outerWidth(int, false) by roundtripping" );
444-
assert.equal( el.outerWidth( 129, true ).width(), expected + 5, "test border-box innerWidth(int, true) by roundtripping" );
445-
446-
assert.equal( el.height( 101 ).height(), expected + 1, "test border-box height(int) by roundtripping" );
447-
assert.equal( el.innerHeight( 108 ).height(), expected + 2, "test border-box innerHeight(int) by roundtripping" );
448-
assert.equal( el.outerHeight( 117 ).height(), expected + 3, "test border-box outerHeight(int) by roundtripping" );
449-
assert.equal( el.outerHeight( 118, false ).height(), expected + 4, "test border-box outerHeight(int, false) by roundtripping" );
450-
assert.equal( el.outerHeight( 129, true ).height(), expected + 5, "test border-box innerHeight(int, true) by roundtripping" );
421+
assert.expect( 60 );
422+
423+
var parent = jQuery( "#foo" ).css({ width: "200px", height: "200px", "font-size": "16px" }),
424+
el_bb = jQuery( "<div style='margin:5px;padding:1px;border:2px solid black;box-sizing:border-box;'></div>" ).appendTo( parent ),
425+
el = jQuery( "<div style='margin:5px;padding:1px;border:2px solid black;'></div>" ).appendTo( parent );
426+
427+
jQuery.each( {
428+
"number": { set: 100, expected: 100 },
429+
"em": { set: "10em", expected: 160 },
430+
"percentage": { set: "50%", expected: 100 }
431+
}, function( units, values ) {
432+
assert.equal( el_bb.width( values.set ).width(), values.expected, "test border-box width(" + units + ") by roundtripping" );
433+
assert.equal( el_bb.innerWidth( values.set ).width(), values.expected - 2, "test border-box innerWidth(" + units + ") by roundtripping" );
434+
assert.equal( el_bb.outerWidth( values.set ).width(), values.expected - 6, "test border-box outerWidth(" + units + ") by roundtripping" );
435+
assert.equal( el_bb.outerWidth( values.set, false ).width(), values.expected - 6, "test border-box outerWidth(" + units + ", false) by roundtripping" );
436+
assert.equal( el_bb.outerWidth( values.set, true ).width(), values.expected - 16, "test border-box innerWidth(" + units + ", true) by roundtripping" );
437+
438+
assert.equal( el_bb.height( values.set ).height(), values.expected, "test border-box height(" + units + ") by roundtripping" );
439+
assert.equal( el_bb.innerHeight( values.set ).height(), values.expected - 2, "test border-box innerHeight(" + units + ") by roundtripping" );
440+
assert.equal( el_bb.outerHeight( values.set ).height(), values.expected - 6, "test border-box outerHeight(" + units + ") by roundtripping" );
441+
assert.equal( el_bb.outerHeight( values.set, false ).height(), values.expected - 6, "test border-box outerHeight(" + units + ", false) by roundtripping" );
442+
assert.equal( el_bb.outerHeight( values.set, true ).height(), values.expected - 16, "test border-box innerHeight(" + units + ", true) by roundtripping" );
443+
444+
assert.equal( el.width( values.set ).width(), values.expected, "test non-border-box width(" + units + ") by roundtripping" );
445+
assert.equal( el.innerWidth( values.set ).width(), values.expected - 2, "test non-border-box innerWidth(" + units + ") by roundtripping" );
446+
assert.equal( el.outerWidth( values.set ).width(), values.expected - 6, "test non-border-box outerWidth(" + units + ") by roundtripping" );
447+
assert.equal( el.outerWidth( values.set, false ).width(), values.expected - 6, "test non-border-box outerWidth(" + units + ", false) by roundtripping" );
448+
assert.equal( el.outerWidth( values.set, true ).width(), values.expected - 16, "test non-border-box innerWidth(" + units + ", true) by roundtripping" );
449+
450+
assert.equal( el.height( values.set ).height(), values.expected, "test non-border-box height(" + units + ") by roundtripping" );
451+
assert.equal( el.innerHeight( values.set ).height(), values.expected - 2, "test non-border-box innerHeight(" + units + ") by roundtripping" );
452+
assert.equal( el.outerHeight( values.set ).height(), values.expected - 6, "test non-border-box outerHeight(" + units + ") by roundtripping" );
453+
assert.equal( el.outerHeight( values.set, false ).height(), values.expected - 6, "test non-border-box outerHeight(" + units + ", false) by roundtripping" );
454+
assert.equal( el.outerHeight( values.set, true ).height(), values.expected - 16, "test non-border-box innerHeight(" + units + ", true) by roundtripping" );
455+
} );
451456
} );
452457

453458
testIframe(

0 commit comments

Comments
 (0)