library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-11-23 02:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Dimensions: Don't trust non-pixel computed width/height

Browse Source 
Fixes gh-3611
Closes gh-3741
This commit is contained in:
Richard Gibson 2017-08-07 12:26:03 -04:00 committed by GitHub
parent f3c5776b82
commit 3cf1d14ccc
2 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/css.js
View File

@ -153,10 +153,14 @@ function getWidthOrHeight( elem, dimension, extra ) {
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box", isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
valueIsBorderBox = isBorderBox; valueIsBorderBox = isBorderBox;
// Computed unit is not pixels. Stop here and return. // Support: Firefox <=54
// Return a confounding non-pixel value or feign ignorance, as appropriate.
if ( rnumnonpx.test( val ) ) { if ( rnumnonpx.test( val ) ) {
if ( !extra ) {
return val; return val;
} }
val = "auto";
}
// Check for style in case a browser which returns unreliable values // Check for style in case a browser which returns unreliable values
// for getComputedStyle silently falls back to the reliable elem.style // for getComputedStyle silently falls back to the reliable elem.style

23
test/unit/dimensions.js
View File

@ -544,6 +544,29 @@ QUnit.test( "width/height on an inline element with no explicitly-set dimensions
} ); } );
} ); } );
QUnit.test( "width/height on an inline element with percentage dimensions (gh-3611)",
function( assert ) {
assert.expect( 4 );
jQuery( "<div id='gh3611' style='width: 100px;'>" +
"<span style='width: 100%; padding: 0 5px'>text</span>" +
"</div>" ).appendTo( "#qunit-fixture" );
var $elem = jQuery( "#gh3611 span" ),
actualWidth = $elem[ 0 ].getBoundingClientRect().width,
marginWidth = $elem.outerWidth( true ),
borderWidth = $elem.outerWidth(),
paddingWidth = $elem.innerWidth(),
contentWidth = $elem.width();
assert.equal( Math.round( borderWidth ), Math.round( actualWidth ),
".outerWidth(): " + borderWidth + " approximates " + actualWidth );
assert.equal( marginWidth, borderWidth, ".outerWidth(true) matches .outerWidth()" );
assert.equal( paddingWidth, borderWidth, ".innerWidth() matches .outerWidth()" );
assert.equal( contentWidth, borderWidth - 10, ".width() excludes padding" );
}
);
QUnit.test( "width/height on a table row with phantom borders (gh-3698)", function( assert ) { QUnit.test( "width/height on a table row with phantom borders (gh-3698)", function( assert ) {
assert.expect( 4 ); assert.expect( 4 );