]> 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: ac68b21)
CSS: Fix reliableTrDimensions test for initially hidden iframes (3.x)
authorMichał Gołębiowski-Owczarek <m.goleb@gmail.com>
Mon, 6 Nov 2023 23:35:56 +0000 (00:35 +0100)
committerGitHub <noreply@github.com>
Mon, 6 Nov 2023 23:35:56 +0000 (00:35 +0100)
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

src/css.js patch | blob | history
src/css/support.js patch | blob | history
test/data/css/cssComputeStyleTests.html patch | blob | history
test/unit/css.js patch | blob | history

diff --git a/src/css.js b/src/css.js
index 1ec1aa8f434d9969945d546c259c70390cbda4ef..d4866f938016f74c9d1f3e4d76fc4810fb029b88 100644 (file)
--- a/src/css.js
+++ b/src/css.js
@@ -153,6 +153,9 @@ function getWidthOrHeight( elem, dimension, extra ) {
                // IE/Edge misreport `getComputedStyle` of table rows with width/height
                // set in CSS while `offset*` properties report correct values.
                // 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" ) ||
 
                // Fall back to offsetWidth/offsetHeight when value is "auto"
diff --git a/src/css/support.js b/src/css/support.js
index 3057c8c2534b8a375a49ba38f17bb9a61d9081a5..8838f0bc1cc13a592459bd34bb0c9acc9497c869 100644 (file)
--- a/src/css/support.js
+++ b/src/css/support.js
@@ -27,7 +27,10 @@ define( [
                documentElement.appendChild( container ).appendChild( 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)
                if ( div.offsetWidth === 0 ) {
@@ -141,6 +144,12 @@ define( [
                                        .appendChild( tr )
                                        .appendChild( trChild );
 
+                               // 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
index 47a207e5c0220cd5589190674ff728e1fea5f67d..9010d70fd2c90ad8228ae8a670cb0b911ac55a96 100644 (file)
--- a/test/data/css/cssComputeStyleTests.html
+++ b/test/data/css/cssComputeStyleTests.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+       <title>Test computeStyleTests for hidden iframe</title>
        <meta charset="utf-8">
        <style>
                * {
@@ -11,14 +12,22 @@
                        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();
+       var initialHeight = $( "#test" ).outerHeight();
        startIframeTest( initialHeight );
 </script>
 </body>
diff --git a/test/unit/css.js b/test/unit/css.js
index fc5929b95b6d970bd42b495e4ea262b1c367235d..a1c5267d75d2cda238caafa8f404b622e6543303 100644 (file)
--- a/test/unit/css.js
+++ b/test/unit/css.js
@@ -1401,20 +1401,46 @@ 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 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" }
+       );
+} )();
 
 ( function() {
        var supportsFractionalGBCR,
jQuery JavaScript Library: https://github.com/jquery/jquery