library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2025-01-10 18:24:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

CSS: Fix reliableTrDimensions test for initially hidden iframes (3.x)

Browse Source 
Also, account for the fact old Firefox (<61) has `null` computed style
for elements in such iframes.

Closes gh-5359
Ref gh-5317
Ref gh-5358
This commit is contained in:
Michał Gołębiowski-Owczarek 2023-11-07 00:35:56 +01:00 committed by GitHub
parent ac68b21fa0
commit 4e98980523
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 63 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/css.js
View File

@ -153,6 +153,9 @@ function getWidthOrHeight( elem, dimension, extra ) {
// IE/Edge misreport `getComputedStyle` of table rows with width/height // IE/Edge misreport `getComputedStyle` of table rows with width/height
// set in CSS while `offset*` properties report correct values. // set in CSS while `offset*` properties report correct values.
// Interestingly, in some cases IE 9 doesn't suffer from this issue. // Interestingly, in some cases IE 9 doesn't suffer from this issue.
// Support: Firefox 70+
// Firefox includes border widths
// in computed dimensions for table rows. (gh-4529)
!support.reliableTrDimensions() && nodeName( elem, "tr" ) || !support.reliableTrDimensions() && nodeName( elem, "tr" ) ||
// Fall back to offsetWidth/offsetHeight when value is "auto" // Fall back to offsetWidth/offsetHeight when value is "auto"

11
src/css/support.js
View File

@ -27,7 +27,10 @@ define( [
documentElement.appendChild( container ).appendChild( div ); documentElement.appendChild( container ).appendChild( div );
var divStyle = window.getComputedStyle( div ); var divStyle = window.getComputedStyle( div );
pixelPositionVal = divStyle.top !== "1%";
// Support: Firefox <=48 - 61 only
// Inside hidden iframes computed style is null in old Firefox.
pixelPositionVal = divStyle && divStyle.top !== "1%";
// Don't run until window is visible (https://github.com/jquery/jquery-ui/issues/2176) // Don't run until window is visible (https://github.com/jquery/jquery-ui/issues/2176)
if ( div.offsetWidth === 0 ) { if ( div.offsetWidth === 0 ) {
@ -141,6 +144,12 @@ define( [
.appendChild( tr ) .appendChild( tr )
.appendChild( trChild ); .appendChild( trChild );
// Don't run until window is visible
if ( table.offsetWidth === 0 ) {
documentElement.removeChild( table );
return;
}
trStyle = window.getComputedStyle( tr ); trStyle = window.getComputedStyle( tr );
reliableTrDimensionsVal = ( parseInt( trStyle.height, 10 ) + reliableTrDimensionsVal = ( parseInt( trStyle.height, 10 ) +
parseInt( trStyle.borderTopWidth, 10 ) + parseInt( trStyle.borderTopWidth, 10 ) +

11
test/data/css/cssComputeStyleTests.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Test computeStyleTests for hidden iframe</title>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
* { * {
@ -11,14 +12,22 @@
border: 10px solid black; border: 10px solid black;
width: 400px; width: 400px;
} }
#test-table {
position: absolute;
width: 100.7px;
border-spacing: 0;
}
</style> </style>
</head> </head>
<body> <body>
<div id="test"></div> <div id="test"></div>
<table id="test-table">
<tr id="test-tr"></tr>
</table>
<script src="../../jquery.js"></script> <script src="../../jquery.js"></script>
<script src="../iframeTest.js"></script> <script src="../iframeTest.js"></script>
<script> <script>
var initialHeight = $('#test').outerHeight(); var initialHeight = $( "#test" ).outerHeight();
startIframeTest( initialHeight ); startIframeTest( initialHeight );
</script> </script>
</body> </body>

54
test/unit/css.js
View File

@ -1401,20 +1401,46 @@ testIframe(
} }
); );
testIframe( ( function() {
"Test computeStyleTests for hidden iframe", var supportsFractionalTrWidth,
"css/cssComputeStyleTests.html", epsilon = 0.1,
function( assert, jQuery, window, document, initialHeight ) { table = jQuery( "<table><tr></tr></table>" ),
assert.expect( 2 ); tr = table.find( "tr" );
assert.strictEqual( initialHeight === 0 ? 20 : initialHeight, 20,
"hidden-frame content sizes should be zero or accurate" ); table
window.parent.jQuery( "#qunit-fixture-iframe" ).css( { "display": "block" } ); .appendTo( "#qunit-fixture" )
jQuery( "#test" ).width( 600 ); .css( {
assert.strictEqual( jQuery( "#test" ).width(), 600, "width should be 600" ); width: "100.7px",
}, borderSpacing: 0
undefined, } );
{ "display": "none" }
); supportsFractionalTrWidth = Math.abs( tr.width() - 100.7 ) < epsilon;
testIframe(
"Test computeStyleTests for hidden iframe",
"css/cssComputeStyleTests.html",
function( assert, jQuery, window, document, initialHeight ) {
assert.expect( 3 );
assert.strictEqual( initialHeight === 0 ? 20 : initialHeight, 20,
"hidden-frame content sizes should be zero or accurate" );
window.parent.jQuery( "#qunit-fixture-iframe" ).css( { "display": "block" } );
jQuery( "#test" ).width( 600 );
assert.strictEqual( jQuery( "#test" ).width(), 600, "width should be 600" );
if ( supportsFractionalTrWidth ) {
assert.ok(
Math.abs( jQuery( "#test-tr" ).width() - 100.7 ) < epsilon,
"tr width should be fractional" );
} else {
assert.strictEqual( jQuery( "#test-tr" ).width(), 101, "tr width as expected" );
}
},
undefined,
{ "display": "none" }
);
} )();
( function() { ( function() {
var supportsFractionalGBCR, var supportsFractionalGBCR,