CSS: Fix reliableTrDimensions support test for initially hidden iframes

Closes gh-5358 Ref gh-5317 Ref gh-5359
jquery · Nov 6, 2023 · b1e66a5 · b1e66a5
1 parent f47c6a8
commit b1e66a5
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 1 deletion.
diff --git a/src/css/support.js b/src/css/support.js
@@ -47,6 +47,12 @@ support.reliableTrDimensions = function() {
 			.appendChild( tr )
 			.appendChild( div );
 
+		// Don't run until window is visible
+		if ( table.offsetWidth === 0 ) {
+			documentElement.removeChild( table );
+			return;
+		}
+
 		trStyle = window.getComputedStyle( tr );
 		reliableTrDimensionsVal = ( parseInt( trStyle.height, 10 ) +
 				parseInt( trStyle.borderTopWidth, 10 ) +

diff --git a/test/data/css/cssComputeStyleTests.html b/test/data/css/cssComputeStyleTests.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Test computeStyleTests for hidden iframe</title>
+	<meta charset="utf-8">
+	<style>
+		* {
+			box-sizing: border-box;
+		}
+		#test {
+			position: absolute;
+			border: 10px solid black;
+			width: 400px;
+		}
+		#test-table {
+			position: absolute;
+			width: 100.7px;
+			border-spacing: 0;
+		}
+	</style>
+</head>
+<body>
+<div id="test"></div>
+<table id="test-table">
+	<tr id="test-tr"></tr>
+</table>
+<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
@@ -243,7 +243,7 @@ this.ajaxTest = function( title, expect, options, wrapper ) {
 	} );
 };
 
-this.testIframe = function( title, fileName, func, wrapper ) {
+this.testIframe = function( title, fileName, func, wrapper, iframeStyles ) {
 	if ( !wrapper ) {
 		wrapper = QUnit.test;
 	}
@@ -253,6 +253,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
@@ -1386,6 +1386,47 @@ testIframe(
 	}
 );
 
+( function() {
+	var supportsFractionalTrWidth,
+		epsilon = 0.1,
+		table = jQuery( "<table><tr></tr></table>" ),
+		tr = table.find( "tr" );
+
+	table
+		.appendTo( "#qunit-fixture" )
+		.css( {
+			width: "100.7px",
+			borderSpacing: 0
+		} );
+
+	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" }
+	);
+} )();
+
 QUnit.testUnlessIE( "css('width') and css('height') should return fractional values for nodes in the document", function( assert ) {
 	assert.expect( 2 );