]> source.dussan.org Git - jquery.git/commitdiff
projects / jquery.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: f47c6a8)
CSS: Fix reliableTrDimensions support test for initially hidden iframes
authorMichał Gołębiowski-Owczarek <m.goleb@gmail.com>
Mon, 6 Nov 2023 23:35:52 +0000 (00:35 +0100)
committerGitHub <noreply@github.com>
Mon, 6 Nov 2023 23:35:52 +0000 (00:35 +0100)
Closes gh-5358
Ref gh-5317
Ref gh-5359

src/css/support.js patch | blob | history
test/data/css/cssComputeStyleTests.html [new file with mode: 0644] patch | blob
test/data/testinit.js patch | blob | history
test/unit/css.js patch | blob | history

diff --git a/src/css/support.js b/src/css/support.js
index 5f9b37d7f4bff96b65691df843934dba621ec74c..c7229e93a4737a503e89cb519d193aeb821b8f2b 100644 (file)
--- 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
new file mode 100644 (file)
index 0000000..9010d70
--- /dev/null
+++ 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
index aafe2902c18c1ed9f923b0c9b741919c457c5853..23cea8a4053ed7801af96832d168dc93f6eea80a 100644 (file)
--- 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
index 146dcd9daad67a399ddc7751fbe76b27f330fd16..5567b7437eeef2132041624f80090ed59cee1e71 100644 (file)
--- 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 );
 
jQuery JavaScript Library: https://github.com/jquery/jquery