mirror of
https://github.com/jquery/jquery.git
synced 2024-10-05 11:34:18 +00:00
CSS: Workaround buggy getComputedStyle on table rows in IE/Edge
Fixes gh-4490 Closes gh-4503
This commit is contained in:
Michał Gołębiowski-Owczarek
GitHub
parent
ac2da4e6b9
commit
6d31477a35
28
src/css.js
28
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";
|
||||
|
||||
@ -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;
|
||||
}
|
||||
} );
|
||||
} )();
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user