CSS: Fix support test results for initially hidden iframes

If the iframe is not initially visible, the `scrollboxSize` support test is
failing. jQuery then cached this value and and applied the wrong result
undefinitely.

This breaks jQuery UI's Dialogs inside initially invisible iframes.

Closes gh-5317
Ref jquery/jquery-ui#2176
This commit is contained in:
Stephen Sigwart 2023-11-02 05:48:08 -04:00 committed by GitHub
parent e84886aa37
commit ac68b21fa0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 1 deletions

View File

@ -29,6 +29,12 @@ define( [
var divStyle = window.getComputedStyle( div ); var divStyle = window.getComputedStyle( div );
pixelPositionVal = divStyle.top !== "1%"; pixelPositionVal = divStyle.top !== "1%";
// Don't run until window is visible (https://github.com/jquery/jquery-ui/issues/2176)
if ( div.offsetWidth === 0 ) {
documentElement.removeChild( container );
return;
}
// Support: Android 4.0 - 4.3 only, Firefox <=3 - 44 // Support: Android 4.0 - 4.3 only, Firefox <=3 - 44
reliableMarginLeftVal = roundPixelMeasures( divStyle.marginLeft ) === 12; reliableMarginLeftVal = roundPixelMeasures( divStyle.marginLeft ) === 12;

View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
#test {
position: absolute;
border: 10px solid black;
width: 400px;
}
</style>
</head>
<body>
<div id="test"></div>
<script src="../../jquery.js"></script>
<script src="../iframeTest.js"></script>
<script>
var initialHeight = $('#test').outerHeight();
startIframeTest( initialHeight );
</script>
</body>
</html>

View File

@ -267,7 +267,7 @@ this.ajaxTest = function( title, expect, options ) {
} ); } );
}; };
this.testIframe = function( title, fileName, func, wrapper ) { this.testIframe = function( title, fileName, func, wrapper, iframeStyles ) {
if ( !wrapper ) { if ( !wrapper ) {
wrapper = QUnit.test; wrapper = QUnit.test;
} }
@ -277,6 +277,11 @@ this.testIframe = function( title, fileName, func, wrapper ) {
.css( { position: "absolute", top: "0", left: "-600px", width: "500px" } ) .css( { position: "absolute", top: "0", left: "-600px", width: "500px" } )
.attr( { id: "qunit-fixture-iframe", src: url( fileName ) } ); .attr( { id: "qunit-fixture-iframe", src: url( fileName ) } );
// Add other iframe styles
if ( iframeStyles ) {
$iframe.css( iframeStyles );
}
// Test iframes are expected to invoke this via startIframeTest (cf. iframeTest.js) // Test iframes are expected to invoke this via startIframeTest (cf. iframeTest.js)
window.iframeCallback = function() { window.iframeCallback = function() {
var args = Array.prototype.slice.call( arguments ); var args = Array.prototype.slice.call( arguments );

View File

@ -1401,6 +1401,21 @@ testIframe(
} }
); );
testIframe(
"Test computeStyleTests for hidden iframe",
"css/cssComputeStyleTests.html",
function( assert, jQuery, window, document, initialHeight ) {
assert.expect( 2 );
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" );
},
undefined,
{ "display": "none" }
);
( function() { ( function() {
var supportsFractionalGBCR, var supportsFractionalGBCR,
qunitFixture = document.getElementById( "qunit-fixture" ), qunitFixture = document.getElementById( "qunit-fixture" ),