CSS: Workaround buggy getComputedStyle on table rows in IE/Edge

Fixes gh-4490
Closes gh-4503

diff --git a/src/css.js b/src/css.js
index d4c34dbb79b7de6ce59fbdacef9dc783c110b85e..a7a70614fec0ad1a6d45d04eda969df45ac4fd38 100644 (file)
--- a/src/css.js
+++ b/src/css.js
@@ -2,6 +2,7 @@ define( [
        "./core",
        "./core/access",
        "./core/camelCase",
+       "./core/nodeName",
        "./var/rcssNum",
        "./css/var/rnumnonpx",
        "./css/var/cssExpand",
@@ -16,7 +17,7 @@ define( [
        "./core/init",
        "./core/ready",
        "./selector" // contains
-], function( jQuery, access, camelCase, rcssNum, rnumnonpx, cssExpand,
+], function( jQuery, access, camelCase, nodeName, rcssNum, rnumnonpx, cssExpand,
        getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) {
 
 "use strict";
@@ -139,17 +140,26 @@ function getWidthOrHeight( elem, dimension, extra ) {
        }
 
 
-       // Fall back to offsetWidth/offsetHeight when value is "auto"
-       // This happens for inline elements with no explicit setting (gh-3571)
-       // Support: Android <=4.1 - 4.3 only
-       // Also use offsetWidth/offsetHeight for misreported inline dimensions (gh-3602)
-       // Support: IE 9-11 only
-       // Also use offsetWidth/offsetHeight for when box sizing is unreliable
-       // We use getClientRects() to check for hidden/disconnected.
-       // In those cases, the computed value can be trusted to be border-box
+       // Support: IE 9 - 11 only
+       // Use offsetWidth/offsetHeight for when box sizing is unreliable.
+       // In those cases, the computed value can be trusted to be border-box.
        if ( ( !support.boxSizingReliable() && isBorderBox ||
+
+               // Support: IE 10 - 11+, Edge 15 - 18+
+               // IE/Edge misreport `getComputedStyle` of table rows with width/height
+               // set in CSS while `offset*` properties report correct values.
+               // Interestingly, in some cases IE 9 doesn't suffer from this issue.
+               !support.reliableTrDimensions() && nodeName( elem, "tr" ) ||
+
+               // Fall back to offsetWidth/offsetHeight when value is "auto"
+               // This happens for inline elements with no explicit setting (gh-3571)
                val === "auto" ||
+
+               // Support: Android <=4.1 - 4.3 only
+               // Also use offsetWidth/offsetHeight for misreported inline dimensions (gh-3602)
                !parseFloat( val ) && jQuery.css( elem, "display", false, styles ) === "inline" ) &&
+
+               // Make sure the element is visible & connected
                elem.getClientRects().length ) {
 
                isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";

diff --git a/src/css/support.js b/src/css/support.js
index 9c4da57d9353d01181aa0c1430dbe28bcff20668..6d9561def16dccc47c2c612bd7b7b350ae07ba18 100644 (file)
--- a/src/css/support.js
+++ b/src/css/support.js
@@ -60,7 +60,7 @@ define( [
        }
 
        var pixelPositionVal, boxSizingReliableVal, scrollboxSizeVal, pixelBoxStylesVal,
-               reliableMarginLeftVal,
+               reliableTrDimensionsVal, reliableMarginLeftVal,
                container = document.createElement( "div" ),
                div = document.createElement( "div" );
 
@@ -95,6 +95,35 @@ define( [
                scrollboxSize: function() {
                        computeStyleTests();
                        return scrollboxSizeVal;
+               },
+
+               // Support: IE 9 - 11+, Edge 15 - 18+
+               // IE/Edge misreport `getComputedStyle` of table rows with width/height
+               // set in CSS while `offset*` properties report correct values.
+               // Behavior in IE 9 is more subtle than in newer versions & it passes
+               // some versions of this test; make sure not to make it pass there!
+               reliableTrDimensions: function() {
+                       var table, tr, trChild;
+                       if ( reliableTrDimensionsVal == null ) {
+                               table = document.createElement( "table" );
+                               tr = document.createElement( "tr" );
+                               trChild = document.createElement( "div" );
+
+                               table.style.cssText = "position:absolute;left:-11111px";
+                               tr.style.height = "1px";
+                               trChild.style.height = "9px";
+
+                               documentElement
+                                       .appendChild( table )
+                                       .appendChild( tr )
+                                       .appendChild( trChild );
+
+                               var trStyle = window.getComputedStyle( tr );
+                               reliableTrDimensionsVal = parseInt( trStyle.height ) > 3;
+
+                               documentElement.removeChild( table );
+                       }
+                       return reliableTrDimensionsVal;
                }
        } );
 } )();

diff --git a/test/unit/css.js b/test/unit/css.js
index 13de4704bfb27645125e838fbfd387a4d2ed2a94..190e6d169d24fa4bb3b373b41916d32a7346a49e 100644 (file)
--- a/test/unit/css.js
+++ b/test/unit/css.js
@@ -1293,6 +1293,26 @@ QUnit.test( "css('width') and css('height') should respect box-sizing, see #1100
        assert.equal( el_dis.css( "height" ), el_dis.css( "height", el_dis.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing for disconnected element, see #11004" );
 } );
 
+QUnit.test( "table rows width/height should be unaffected by inline styles", function( assert ) {
+       assert.expect( 2 );
+
+       var table = jQuery(
+               "<table>\n" +
+               "  <tr id=\"row\" style=\"height: 1px; width: 1px;\">\n" +
+               "    <td>\n" +
+               "      <div style=\"height: 100px; width: 100px;\"></div>\n" +
+               "    </div>\n" +
+               "  </tr>\n" +
+               "</table>"
+       );
+       var tr = table.find( "tr" );
+
+       table.appendTo( "#qunit-fixture" );
+
+       assert.ok( parseInt( tr.css( "width" ) ) > 10, "tr width unaffected by inline style" );
+       assert.ok( parseInt( tr.css( "height" ) ) > 10, "tr height unaffected by inline style" );
+} );
+
 testIframe(
        "css('width') should work correctly before document ready (#14084)",
        "css/cssWidthBeforeDocReady.html",

diff --git a/test/unit/support.js b/test/unit/support.js
index b280e364eb2a77db56aa98a43e02db367355a2a3..be1d89c9df7103d9b9d0194f2873d30c94155479 100644 (file)
--- a/test/unit/support.js
+++ b/test/unit/support.js
@@ -73,6 +73,7 @@ testIframe(
                                "pixelPosition": true,
                                "radioValue": true,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": false,
                                "scrollboxSize": true
                        },
                        ie_10_11: {
@@ -90,6 +91,7 @@ testIframe(
                                "pixelPosition": true,
                                "radioValue": false,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": false,
                                "scrollboxSize": true
                        },
                        ie_9: {
@@ -107,6 +109,7 @@ testIframe(
                                "pixelPosition": true,
                                "radioValue": false,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": false,
                                "scrollboxSize": false
                        },
                        chrome: {
@@ -124,6 +127,7 @@ testIframe(
                                "pixelPosition": true,
                                "radioValue": true,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": true,
                                "scrollboxSize": true
                        },
                        safari: {
@@ -141,6 +145,7 @@ testIframe(
                                "pixelPosition": true,
                                "radioValue": true,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": true,
                                "scrollboxSize": true
                        },
                        safari_9_10: {
@@ -158,6 +163,7 @@ testIframe(
                                "pixelPosition": false,
                                "radioValue": true,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": true,
                                "scrollboxSize": true
                        },
                        firefox: {
@@ -175,6 +181,7 @@ testIframe(
                                "pixelPosition": true,
                                "radioValue": true,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": true,
                                "scrollboxSize": true
                        },
                        firefox_60: {
@@ -192,6 +199,7 @@ testIframe(
                                "pixelPosition": true,
                                "radioValue": true,
                                "reliableMarginLeft": false,
+                               "reliableTrDimensions": true,
                                "scrollboxSize": true
                        },
                        ios: {
@@ -209,6 +217,7 @@ testIframe(
                                "pixelPosition": true,
                                "radioValue": true,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": true,
                                "scrollboxSize": true
                        },
                        ios_9_10: {
@@ -226,6 +235,7 @@ testIframe(
                                "pixelPosition": false,
                                "radioValue": true,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": true,
                                "scrollboxSize": true
                        },
                        ios_8: {
@@ -243,6 +253,7 @@ testIframe(
                                "pixelPosition": false,
                                "radioValue": true,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": true,
                                "scrollboxSize": true
                        },
                        ios_7: {
@@ -260,6 +271,7 @@ testIframe(
                                "pixelPosition": false,
                                "radioValue": true,
                                "reliableMarginLeft": true,
+                               "reliableTrDimensions": true,
                                "scrollboxSize": true
                        },
                        android: {
@@ -277,6 +289,7 @@ testIframe(
                                "pixelPosition": false,
                                "radioValue": true,
                                "reliableMarginLeft": false,
+                               "reliableTrDimensions": true,
                                "scrollboxSize": true
                        }
                };