Dimensions: Add offset prop fallback to FF for unreliable TR dimensions

Firefox incorrectly (or perhaps correctly) includes table borders in computed
dimensions, but they are the only one. Workaround this by testing for it and
falling back to offset properties

Fixes gh-4529
Closes gh-4808

diff --git a/src/css.js b/src/css.js
index 126d12a17dd092d55b3fdbfcdce7e1dcae1dd960..c82a08c545489cc30c951e0133ebbc7e50990429 100644 (file)
--- a/src/css.js
+++ b/src/css.js
@@ -12,6 +12,7 @@ import swap from "./css/var/swap.js";
 import curCSS from "./css/curCSS.js";
 import adjustCSS from "./css/adjustCSS.js";
 import finalPropName from "./css/finalPropName.js";
+import support from "./css/support.js";
 
 import "./core/init.js";
 import "./core/ready.js";
@@ -134,23 +135,24 @@ function getWidthOrHeight( elem, dimension, extra ) {
        }
 
 
-       if ( ( isIE &&
-               (
-
-                       // Support: IE 9 - 11+
-                       // Use offsetWidth/offsetHeight for when box sizing is unreliable.
-                       // In those cases, the computed value can be trusted to be border-box.
-                       isBorderBox ||
-
-                       // Support: IE 10 - 11+
-                       // IE misreports `getComputedStyle` of table rows with width/height
-                       // set in CSS while `offset*` properties report correct values.
-                       nodeName( elem, "tr" )
-               ) ||
+       if ( (
 
                // Fall back to offsetWidth/offsetHeight when value is "auto"
                // This happens for inline elements with no explicit setting (gh-3571)
-               val === "auto" ) &&
+               val === "auto" ||
+
+               // Support: IE 9 - 11+
+               // Use offsetWidth/offsetHeight for when box sizing is unreliable.
+               // In those cases, the computed value can be trusted to be border-box.
+               ( isIE && isBorderBox ) ||
+
+               // Support: IE 10 - 11+
+               // IE misreports `getComputedStyle` of table rows with width/height
+               // set in CSS while `offset*` properties report correct values.
+               // Support: Firefox 70+
+               // Firefox includes border widths
+               // in computed dimensions for table rows. (gh-4529)
+               ( !support.reliableTrDimensions() && nodeName( elem, "tr" ) ) ) &&
 
                // Make sure the element is visible & connected
                elem.getClientRects().length ) {

diff --git a/src/css/support.js b/src/css/support.js
new file mode 100644 (file)
index 0000000..9e6a915
--- /dev/null
+++ b/src/css/support.js
@@ -0,0 +1,52 @@
+import document from "../var/document.js";
+import documentElement from "../var/documentElement.js";
+import support from "../var/support.js";
+
+( function() {
+
+var reliableTrDimensionsVal,
+       div = document.createElement( "div" );
+
+// Finish early in limited (non-browser) environments
+if ( !div.style ) {
+       return;
+}
+
+// Support: IE 10 - 11+
+// IE misreports `getComputedStyle` of table rows with width/height
+// set in CSS while `offset*` properties report correct values.
+// Support: Firefox 70+
+// Only Firefox includes border widths
+// in computed dimensions. (gh-4529)
+support.reliableTrDimensions = function() {
+       var table, tr, trStyle;
+       if ( reliableTrDimensionsVal == null ) {
+               table = document.createElement( "table" );
+               tr = document.createElement( "tr" );
+
+               table.style.cssText = "position:absolute;left:-11111px;border-collapse:separate";
+               tr.style.cssText = "border:1px solid";
+
+               // Support: Chrome 86+
+               // Height set through cssText does not get applied.
+               // Computed height then comes back as 0.
+               tr.style.height = "1px";
+               div.style.height = "9px";
+
+               documentElement
+                       .appendChild( table )
+                       .appendChild( tr )
+                       .appendChild( div );
+
+               trStyle = window.getComputedStyle( tr );
+               reliableTrDimensionsVal = ( parseInt( trStyle.height, 10 ) +
+                               parseInt( trStyle.borderTopWidth, 10 ) +
+                               parseInt( trStyle.borderBottomWidth, 10 ) ) === tr.offsetHeight;
+
+               documentElement.removeChild( table );
+       }
+       return reliableTrDimensionsVal;
+};
+} )();
+
+export default support;

diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
index 280a54ebc8bfce7f34d849570ae3aedd9df51346..a4485791057c527989fae6bc8fd1ada31754a8de 100644 (file)
--- a/test/unit/dimensions.js
+++ b/test/unit/dimensions.js
@@ -627,13 +627,7 @@ QUnit.test( "width/height on an inline element with percentage dimensions (gh-36
        }
 );
 
-// Support: Firefox 70+
-// Firefox 70 & newer fail this test but the issue there is more profound - Firefox doesn't
-// subtract borders from table row computed widths.
-// See https://github.com/jquery/jquery/issues/4529
-// See https://bugzilla.mozilla.org/show_bug.cgi?id=1590837
-// See https://github.com/w3c/csswg-drafts/issues/4444
-QUnit[ /firefox/i.test( navigator.userAgent ) ? "skip" : "test" ](
+QUnit.test(
        "width/height on a table row with phantom borders (gh-3698)", function( assert ) {
        assert.expect( 4 );
 

diff --git a/test/unit/support.js b/test/unit/support.js
index 008453085868fce0a113c82c0695029867b6de1b..f0755cbf636f0b44c4d7236c7c9c833ad8044b9f 100644 (file)
--- a/test/unit/support.js
+++ b/test/unit/support.js
@@ -58,11 +58,21 @@ testIframe(
        var expected,
                userAgent = window.navigator.userAgent,
                expectedMap = {
-                       ie_11: {},
-                       chrome: {},
-                       safari: {},
-                       firefox: {},
-                       ios: {}
+                       ie_11: {
+                               "reliableTrDimensions": false
+                       },
+                       chrome: {
+                               "reliableTrDimensions": true
+                       },
+                       safari: {
+                               "reliableTrDimensions": true
+                       },
+                       firefox: {
+                               "reliableTrDimensions": false
+                       },
+                       ios: {
+                               "reliableTrDimensions": true
+                       }
                };
 
        if ( document.documentMode ) {