CSS: fix :visible/:hidden selectors for inline element w/ content

timmywil · timmywil · commit dd816dbac19d · 2015-05-12T10:06:42.000-04:00
- 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
@@ -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
@@ -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("<div><span></span></div>").appendTo("#qunit-fixture");
-	equal( $newDiv.find(":visible").length, 0, "Span with no content not visible (#13132)" );
-	$br = jQuery("<br/>").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( "<div><span></span></div>" ).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( "<br/>" ).appendTo( "#qunit-fixture" );
+	ok( $br.is( ":visible" ), "br element is visible" );
 
 	$table = jQuery("#table");
 	$table.html("<tr><td style='display:none'>cell</td><td>cell</td></tr>");
@@ -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( "<a href='#'><h1>Header</h1></a>" ).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() {
