Skip to content

Commit 26415e0

Browse files
mgolmgol
authored
CSS: Workaround buggy getComputedStyle on table rows in IE/Edge
Fixes gh-4490 Closes gh-4506
1 parent ed66d5a commit 26415e0

File tree

4 files changed

+84
-9
lines changed

4 files changed

+84
-9
lines changed

‎src/css.js

+18-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
define( [
22
"./core",
33
"./core/access",
4+
"./core/nodeName",
45
"./var/rcssNum",
56
"./var/isIE",
67
"./css/var/rnumnonpx",
@@ -11,13 +12,14 @@ define( [
1112
"./css/var/swap",
1213
"./css/curCSS",
1314
"./css/adjustCSS",
15+
"./css/support",
1416
"./css/finalPropName",
1517

1618
"./core/init",
1719
"./core/ready",
1820
"./selector" // contains
19-
], function( jQuery, access, rcssNum, isIE, rnumnonpx, cssExpand, isAutoPx,
20-
cssCamelCase, getStyles, swap, curCSS, adjustCSS, finalPropName ) {
21+
], function( jQuery, access, nodeName, rcssNum, isIE, rnumnonpx, cssExpand, isAutoPx,
22+
cssCamelCase, getStyles, swap, curCSS, adjustCSS, support, finalPropName ) {
2123

2224
"use strict";
2325

@@ -138,14 +140,21 @@ function getWidthOrHeight( elem, dimension, extra ) {
138140
}
139141

140142

141-
// Fall back to offsetWidth/offsetHeight when value is "auto"
142-
// This happens for inline elements with no explicit setting (gh-3571)
143-
//
144143
// Support: IE 9 - 11+
145-
// Also use offsetWidth/offsetHeight for when box sizing is unreliable
146-
// We use getClientRects() to check for hidden/disconnected.
147-
// In those cases, the computed value can be trusted to be border-box
148-
if ( ( isIE && isBorderBox || val === "auto" ) &&
144+
// Use offsetWidth/offsetHeight for when box sizing is unreliable.
145+
// In those cases, the computed value can be trusted to be border-box.
146+
if ( ( isIE && isBorderBox ||
147+
148+
// Support: IE 10 - 11+, Edge 15 - 18+
149+
// IE/Edge misreport `getComputedStyle` of table rows with width/height
150+
// set in CSS while `offset*` properties report correct values.
151+
!support.reliableTrDimensions() && nodeName( elem, "tr" ) ||
152+
153+
// Fall back to offsetWidth/offsetHeight when value is "auto"
154+
// This happens for inline elements with no explicit setting (gh-3571)
155+
val === "auto" ) &&
156+
157+
// Make sure the element is visible & connected
149158
elem.getClientRects().length ) {
150159

151160
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";

‎src/css/support.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
define( [
2+
"../var/document",
3+
"../var/documentElement",
4+
"../var/support"
5+
], function( document, documentElement, support ) {
6+
7+
"use strict";
8+
9+
var reliableTrDimensionsVal;
10+
11+
// Support: IE 11+, Edge 15 - 18+
12+
// IE/Edge misreport `getComputedStyle` of table rows with width/height
13+
// set in CSS while `offset*` properties report correct values.
14+
support.reliableTrDimensions = function() {
15+
var table, tr, trChild;
16+
if ( reliableTrDimensionsVal == null ) {
17+
table = document.createElement( "table" );
18+
tr = document.createElement( "tr" );
19+
trChild = document.createElement( "div" );
20+
21+
table.style.cssText = "position:absolute;left:-11111px";
22+
tr.style.height = "1px";
23+
trChild.style.height = "9px";
24+
25+
documentElement
26+
.appendChild( table )
27+
.appendChild( tr )
28+
.appendChild( trChild );
29+
30+
var trStyle = window.getComputedStyle( tr );
31+
reliableTrDimensionsVal = parseInt( trStyle.height ) > 3;
32+
33+
documentElement.removeChild( table );
34+
}
35+
return reliableTrDimensionsVal;
36+
};
37+
38+
return support;
39+
40+
} );

‎test/unit/css.js

+20
Original file line numberDiff line numberDiff line change
@@ -1352,6 +1352,26 @@ QUnit.test( "css('width') and css('height') should respect box-sizing, see #1100
13521352
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" );
13531353
} );
13541354

1355+
QUnit.test( "table rows width/height should be unaffected by inline styles", function( assert ) {
1356+
assert.expect( 2 );
1357+
1358+
var table = jQuery(
1359+
"<table>\n" +
1360+
" <tr id=\"row\" style=\"height: 1px; width: 1px;\">\n" +
1361+
" <td>\n" +
1362+
" <div style=\"height: 100px; width: 100px;\"></div>\n" +
1363+
" </div>\n" +
1364+
" </tr>\n" +
1365+
"</table>"
1366+
);
1367+
var tr = table.find( "tr" );
1368+
1369+
table.appendTo( "#qunit-fixture" );
1370+
1371+
assert.ok( parseInt( tr.css( "width" ) ) > 10, "tr width unaffected by inline style" );
1372+
assert.ok( parseInt( tr.css( "height" ) ) > 10, "tr height unaffected by inline style" );
1373+
} );
1374+
13551375
testIframe(
13561376
"css('width') should work correctly before document ready (#14084)",
13571377
"css/cssWidthBeforeDocReady.html",

‎test/unit/support.js

+6
Original file line numberDiff line numberDiff line change
@@ -59,21 +59,27 @@ testIframe(
5959
userAgent = window.navigator.userAgent,
6060
expectedMap = {
6161
edge: {
62+
reliableTrDimensions: false,
6263
scope: undefined
6364
},
6465
ie_11: {
66+
reliableTrDimensions: false,
6567
scope: undefined
6668
},
6769
chrome: {
70+
reliableTrDimensions: true,
6871
scope: true
6972
},
7073
safari: {
74+
reliableTrDimensions: true,
7175
scope: true
7276
},
7377
firefox: {
78+
reliableTrDimensions: true,
7479
scope: true
7580
},
7681
ios: {
82+
reliableTrDimensions: true,
7783
scope: true
7884
}
7985
};

0 commit comments

Comments
 (0)