From: Timmy Willison Date: Fri, 8 May 2015 22:27:54 +0000 (-0700) Subject: CSS: fix :visible/:hidden selectors for inline element w/ content X-Git-Tag: 3.0.0-alpha1+compat~58 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=dd816dbac19d8a83f9b1e9c7d09bc0db436a74b0;p=jquery.git CSS: fix :visible/:hidden selectors for inline element w/ content - Reverts behavior from 10399dd, which we never released. BR and inline elements are considered visible. - The possibility of dropping .offsetWidth and .offsetHeight was debunked by this perf: http://jsperf.com/visible-hidden-and-getclientrects Fixes gh-2227 Close gh-2281 --- diff --git a/src/css/hiddenVisibleSelectors.js b/src/css/hiddenVisibleSelectors.js index 9f27b8b9e..e340b16e6 100644 --- a/src/css/hiddenVisibleSelectors.js +++ b/src/css/hiddenVisibleSelectors.js @@ -6,15 +6,13 @@ define([ ], function( jQuery, support ) { jQuery.expr.filters.hidden = function( elem ) { - // Use OR instead of AND as the element is not visible if either is true - // See tickets #10406 and #13132 - return !elem.offsetWidth || !elem.offsetHeight || - (!support.reliableHiddenOffsets() && - ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none"); + return !jQuery.expr.filters.visible( elem ); }; jQuery.expr.filters.visible = function( elem ) { - return !jQuery.expr.filters.hidden( elem ); + return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ) && + ( support.reliableHiddenOffsets() || + ( ( elem.style && elem.style.display ) || jQuery.css( elem, "display" ) ) !== "none" ); }; }); diff --git a/test/unit/css.js b/test/unit/css.js index 9e7949f70..a673b4e51 100644 --- a/test/unit/css.js +++ b/test/unit/css.js @@ -982,9 +982,9 @@ test( "css opacity consistency across browsers (#12685)", function() { }); test( ":visible/:hidden selectors", function() { - expect( 16 ); + expect( 18 ); - var $newDiv, $br, $table; + var $div, $br, $table, $a; ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible" ); jQuery("#nothiddendiv").css({ display: "none" }); @@ -1000,11 +1000,14 @@ test( ":visible/:hidden selectors", function() { jQuery("#nothiddendiv").css("display", "block"); ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible"); - ok( !jQuery("#siblingspan").is(":visible"), "Span with no content not visible (#13132)" ); - $newDiv = jQuery("
").appendTo("#qunit-fixture"); - equal( $newDiv.find(":visible").length, 0, "Span with no content not visible (#13132)" ); - $br = jQuery("
").appendTo("#qunit-fixture"); - ok( !$br.is(":visible"), "br element not visible (#10406)"); + ok( jQuery( "#siblingspan" ).is( ":visible" ), "Span with no content is visible" ); + $div = jQuery( "
" ).appendTo( "#qunit-fixture" ); + equal( $div.find( ":visible" ).length, 1, "Span with no content is visible" ); + $div.css( { width: 0, height: 0, overflow: "hidden" } ); + ok( $div.is( ":visible" ), "Div with width and height of 0 is still visible (gh-2227)" ); + + $br = jQuery( "
" ).appendTo( "#qunit-fixture" ); + ok( $br.is( ":visible" ), "br element is visible" ); $table = jQuery("#table"); $table.html("cellcell"); @@ -1015,6 +1018,9 @@ test( ":visible/:hidden selectors", function() { t( "Is Visible", "#qunit-fixture div:visible:lt(2)", ["foo", "nothiddendiv"] ); t( "Is Not Hidden", "#qunit-fixture:hidden", [] ); t( "Is Hidden", "#form input:hidden", ["hidden1","hidden2"] ); + + $a = jQuery( "

Header

" ).appendTo( "#qunit-fixture" ); + ok( $a.is( ":visible" ), "Anchor tag with flow content is visible (gh-2227)" ); }); test( "Keep the last style if the new one isn't recognized by the browser (#14836)", function() {