diff options
| -rw-r--r-- | src/css.js | 30 | ||||
| -rw-r--r-- | src/css/support.js | 52 | ||||
| -rw-r--r-- | test/unit/dimensions.js | 8 | ||||
| -rw-r--r-- | test/unit/support.js | 20 |
4 files changed, 84 insertions, 26 deletions
diff --git a/src/css.js b/src/css.js index 126d12a17..c82a08c54 100644 --- 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 index 000000000..9e6a915d2 --- /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 280a54ebc..a44857910 100644 --- 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 008453085..f0755cbf6 100644 --- 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 ) { |