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

Fixes gh-3611
Closes gh-3741

diff --git a/src/css.js b/src/css.js
index 2395f42b4e4fd1ac58b370b1788285cf769d6e51..107d85a93286d7fe80651a62e1e436706fd5addf 100644 (file)
--- a/src/css.js
+++ b/src/css.js
@@ -153,9 +153,13 @@ function getWidthOrHeight( elem, dimension, extra ) {
                isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
                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 ) ) {
-               return val;
+               if ( !extra ) {
+                       return val;
+               }
+               val = "auto";
        }
 
        // Check for style in case a browser which returns unreliable values

diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
index 991a59113d7d958bd68c632e3410e9b54709f6ae..d7e5533690741b955e4e26fa8e37806a99b66dca 100644 (file)
--- a/test/unit/dimensions.js
+++ b/test/unit/dimensions.js
@@ -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 ) {
        assert.expect( 4 );