]> 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: e84886a)
CSS: Fix support test results for initially hidden iframes
authorStephen Sigwart <ssigwart@gmail.com>
Thu, 2 Nov 2023 09:48:08 +0000 (05:48 -0400)
committerGitHub <noreply@github.com>
Thu, 2 Nov 2023 09:48:08 +0000 (10:48 +0100)
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

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 6f6f63ad852394f68805167013d4c7a2f4a217f5..3057c8c2534b8a375a49ba38f17bb9a61d9081a5 100644 (file)
--- 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
new file mode 100644 (file)
index 0000000..47a207e
--- /dev/null
+++ 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
index d0205488a9b147e6ed676011108cf951ee6cb6a7..9b134d99973a6bbfe184c3291118db3963b8e4fe 100644 (file)
--- 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
index 47c689f6fd618f59a61def04721735af6c2af9b1..fc5929b95b6d970bd42b495e4ea262b1c367235d 100644 (file)
--- 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" ),
jQuery JavaScript Library: https://github.com/jquery/jquery