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
jquery · Nov 2, 2023 · ac68b21 · ac68b21
1 parent e84886a
commit ac68b21
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 1 deletion.
diff --git a/src/css/support.js b/src/css/support.js
@@ -29,6 +29,12 @@ define( [
 		var divStyle = window.getComputedStyle( div );
 		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
 		reliableMarginLeftVal = roundPixelMeasures( divStyle.marginLeft ) === 12;
 

diff --git a/test/data/css/cssComputeStyleTests.html b/test/data/css/cssComputeStyleTests.html
@@ -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>
diff --git a/test/data/testinit.js b/test/data/testinit.js
@@ -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 ) {
 		wrapper = QUnit.test;
 	}
@@ -277,6 +277,11 @@ this.testIframe = function( title, fileName, func, wrapper ) {
 				.css( { position: "absolute", top: "0", left: "-600px", width: "500px" } )
 				.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)
 		window.iframeCallback = function() {
 			var args = Array.prototype.slice.call( arguments );

diff --git a/test/unit/css.js b/test/unit/css.js
@@ -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() {
 	var supportsFractionalGBCR,
 		qunitFixture = document.getElementById( "qunit-fixture" ),