From ac68b21fa0554bb63e69a81cf635428ec19c5fa8 Mon Sep 17 00:00:00 2001 From: Stephen Sigwart Date: Thu, 2 Nov 2023 05:48:08 -0400 Subject: [PATCH] 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 --- src/css/support.js | 6 ++++++ test/data/css/cssComputeStyleTests.html | 25 +++++++++++++++++++++++++ test/data/testinit.js | 7 ++++++- test/unit/css.js | 15 +++++++++++++++ 4 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 test/data/css/cssComputeStyleTests.html diff --git a/src/css/support.js b/src/css/support.js index 6f6f63ad8..3057c8c25 100644 --- 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 index 000000000..47a207e5c --- /dev/null +++ b/test/data/css/cssComputeStyleTests.html @@ -0,0 +1,25 @@ + + + + + + + +

+ + + + + diff --git a/test/data/testinit.js b/test/data/testinit.js index d0205488a..9b134d999 100644 --- 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 47c689f6f..fc5929b95 100644 --- 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" ), -- 2.39.5