CSS: elements are hidden when either offsetWidth or offsetHeight is zero

- Note: this is a breaking change that has been delayed for several versions.

Fixes #10406
Fixes #13132

2 files changed, 15 insertions, 11 deletions

diff --git a/src/css/hiddenVisibleSelectors.js b/src/css/hiddenVisibleSelectors.js
index c7f1c7ee7..2b1eb8155 100644
--- a/src/css/hiddenVisibleSelectors.js
+++ b/src/css/hiddenVisibleSelectors.js
@@ -6,7 +6,9 @@ define([
 jQuery.expr.filters.hidden = function( elem ) {
 	// Support: Opera <= 12.12
 	// Opera reports offsetWidths and offsetHeights less than zero on some elements
-	return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
+	// Use OR instead of AND as the element is not visible if either is true
+	// See tickets #10406 and #13132
+	return elem.offsetWidth <= 0 || elem.offsetHeight <= 0;
 };
 jQuery.expr.filters.visible = function( elem ) {
 	return !jQuery.expr.filters.hidden( elem );
diff --git a/test/unit/css.js b/test/unit/css.js
index 58f43143a..8337f7df7 100644
--- a/test/unit/css.js
+++ b/test/unit/css.js
@@ -886,15 +886,17 @@ test( "css opacity consistency across browsers (#12685)", function() {
 });
 
 test( ":visible/:hidden selectors", function() {
-	expect( 13 );
+	expect( 16 );
+
+	var $newDiv, $br, $table;
 
 	ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible" );
 	jQuery("#nothiddendiv").css({ display: "none" });
 	ok( !jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is hidden" );
-	jQuery("#nothiddendiv").css({"display": "block"});
+	jQuery("#nothiddendiv").css({ "display": "block" });
 	ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible");
-	ok( jQuery(window).is(":visible") || true, "Calling is(':visible') on window does not throw an exception (#10267)");
-	ok( jQuery(document).is(":visible") || true, "Calling is(':visible') on document does not throw an exception (#10267)");
+	ok( !jQuery(window).is(":visible"), "Calling is(':visible') on window does not throw an exception (#10267).");
+	ok( !jQuery(document).is(":visible"), "Calling is(':visible') on document does not throw an exception (#10267).");
 
 	ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible");
 	jQuery("#nothiddendiv").css("display", "none");
@@ -902,13 +904,13 @@ 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)" );
-	// var $newDiv = jQuery("<div><span></span></div>").appendTo("#qunit-fixture");
-	// equal( $newDiv.find(":visible").length, 0, "Span with no content not visible (#13132)" );
-	// var $br = jQuery("<br/>").appendTo("#qunit-fixture");
-	// ok( !$br.is(":visible"), "br element not visible (#10406)");
+	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)");
 
-	var $table = jQuery("#table");
+	$table = jQuery("#table");
 	$table.html("<tr><td style='display:none'>cell</td><td>cell</td></tr>");
 	equal(jQuery("#table td:visible").length, 1, "hidden cell is not perceived as visible (#4512). Works on table elements");
 	$table.css("display", "none").html("<tr><td>cell</td><td>cell</td></tr>");