diff options
| author | Stephen Sigwart <ssigwart@gmail.com> | 2023-11-02 05:48:08 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-11-02 10:48:08 +0100 |
| commit | ac68b21fa0554bb63e69a81cf635428ec19c5fa8 (patch) | |
| tree | d33703c399faa2dcdb27c26beaee037e0029f84e | |
| parent | e84886aa37107f35d61b3bde9406c78c13f77cee (diff) | |
| download | jquery-ac68b21fa0554bb63e69a81cf635428ec19c5fa8.tar.gz jquery-ac68b21fa0554bb63e69a81cf635428ec19c5fa8.zip | |
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
| -rw-r--r-- | src/css/support.js | 6 | ||||
| -rw-r--r-- | test/data/css/cssComputeStyleTests.html | 25 | ||||
| -rw-r--r-- | test/data/testinit.js | 7 | ||||
| -rw-r--r-- | test/unit/css.js | 15 |
4 files changed, 52 insertions, 1 deletions
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 @@ +<!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 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" ), |