Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Treat an element as hidden if either offsetWidth or offsetHeight is 0…

…. Fixes #13132, #10406.
  • Loading branch information...
commit 372e04e78e81cc8eb868c5fc97f271a695569aa5 1 parent 1c77259
Timmy Willison authored January 21, 2013
2  src/css.js
@@ -532,7 +532,7 @@ jQuery(function() {
532 532
 
533 533
 if ( jQuery.expr && jQuery.expr.filters ) {
534 534
 	jQuery.expr.filters.hidden = function( elem ) {
535  
-		return elem.offsetWidth === 0 && elem.offsetHeight === 0;
  535
+		return elem.offsetWidth === 0 || elem.offsetHeight === 0;
536 536
 	};
537 537
 
538 538
 	jQuery.expr.filters.visible = function( elem ) {
83  test/unit/css.js
@@ -3,22 +3,14 @@ if ( jQuery.css ) {
3 3
 module("css", { teardown: moduleTeardown });
4 4
 
5 5
 test("css(String|Hash)", function() {
6  
-	expect( 45 );
  6
+	expect( 40 );
7 7
 
8 8
 	equal( jQuery("#qunit-fixture").css("display"), "block", "Check for css property \"display\"" );
9 9
 
10  
-	ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible" );
11  
-	jQuery("#nothiddendiv").css({ display: "none" });
12  
-	ok( !jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is hidden" );
13 10
 	var $child = jQuery("#nothiddendivchild").css({ "width": "20%", "height": "20%" });
14 11
 	notEqual( $child.css("width"), "20px", "Retrieving a width percentage on the child of a hidden div returns percentage" );
15 12
 	notEqual( $child.css("height"), "20px", "Retrieving a height percentage on the child of a hidden div returns percentage" );
16 13
 
17  
-	jQuery("#nothiddendiv").css({"display": "block"});
18  
-	ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible");
19  
-	ok( jQuery(window).is(":visible"), "Calling is(':visible') on window does not throw an error in IE.");
20  
-	ok( jQuery(document).is(":visible"), "Calling is(':visible') on document does not throw an error in IE.");
21  
-
22 14
 	var div = jQuery( "<div>" );
23 15
 
24 16
 	// These should be "auto" (or some better value)
@@ -203,13 +195,7 @@ test("css() explicit and relative values", function() {
203 195
 });
204 196
 
205 197
 test("css(String, Object)", function() {
206  
-	expect(22);
207  
-
208  
-	ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible");
209  
-	jQuery("#nothiddendiv").css("display", "none");
210  
-	ok( !jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is hidden");
211  
-	jQuery("#nothiddendiv").css("display", "block");
212  
-	ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible");
  198
+	expect( 19 );
213 199
 
214 200
 	jQuery("#nothiddendiv").css("top", "-1em");
215 201
 	ok( jQuery("#nothiddendiv").css("top"), -16, "Check negative number in EMs." );
@@ -638,19 +624,6 @@ test("jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", funct
638 624
 	ok( ! jQuery(":checkbox:last", $checkedtest).attr("checked"), "Check last checkbox still NOT checked." );
639 625
 });
640 626
 
641  
-test(":visible selector works properly on table elements (bug #4512)", function () {
642  
-	expect(1);
643  
-
644  
-	jQuery("#table").html("<tr><td style='display:none'>cell</td><td>cell</td></tr>");
645  
-	equal(jQuery("#table td:visible").length, 1, "hidden cell is not perceived as visible");
646  
-});
647  
-
648  
-test(":visible selector works properly on children with a hidden parent (bug #4512)", function () {
649  
-	expect(1);
650  
-	jQuery("#table").css("display", "none").html("<tr><td>cell</td><td>cell</td></tr>");
651  
-	equal(jQuery("#table td:visible").length, 0, "hidden cell children not perceived as visible");
652  
-});
653  
-
654 627
 test("internal ref to elem.runtimeStyle (bug #7608)", function () {
655 628
 	expect(1);
656 629
 	var result = true;
@@ -870,17 +843,47 @@ test( "cssHooks - expand", function() {
870 843
 test( "css opacity consistency across browsers (#12685)", function() {
871 844
 	expect( 4 );
872 845
 
873  
-		var fixture = jQuery("#qunit-fixture"),
874  
-				style = jQuery("<style>.opacityWithSpaces_t12685 { opacity: 0.1; filter: alpha(opacity = 10); } .opacityNoSpaces_t12685 { opacity: 0.2; filter: alpha(opacity=20); }</style>").appendTo(fixture),
875  
-				el = jQuery("<div class='opacityWithSpaces_t12685'></div>").appendTo(fixture);
876  
-
877  
-		equal( Math.round( el.css("opacity") * 100 ), 10, "opacity from style sheet (filter:alpha with spaces)" );
878  
-		el.removeClass("opacityWithSpaces_t12685").addClass("opacityNoSpaces_t12685");
879  
-		equal( Math.round( el.css("opacity") * 100 ), 20, "opacity from style sheet (filter:alpha without spaces)" );
880  
-		el.css( "opacity", 0.3 );
881  
-		equal( Math.round( el.css("opacity") * 100 ), 30, "override opacity" );
882  
-		el.css( "opacity", "" );
883  
-		equal( Math.round( el.css("opacity") * 100 ), 20, "remove opacity override" );
  846
+	var fixture = jQuery("#qunit-fixture"),
  847
+		style = jQuery("<style>.opacityWithSpaces_t12685 { opacity: 0.1; filter: alpha(opacity = 10); } .opacityNoSpaces_t12685 { opacity: 0.2; filter: alpha(opacity=20); }</style>").appendTo(fixture),
  848
+		el = jQuery("<div class='opacityWithSpaces_t12685'></div>").appendTo(fixture);
  849
+
  850
+	equal( Math.round( el.css("opacity") * 100 ), 10, "opacity from style sheet (filter:alpha with spaces)" );
  851
+	el.removeClass("opacityWithSpaces_t12685").addClass("opacityNoSpaces_t12685");
  852
+	equal( Math.round( el.css("opacity") * 100 ), 20, "opacity from style sheet (filter:alpha without spaces)" );
  853
+	el.css( "opacity", 0.3 );
  854
+	equal( Math.round( el.css("opacity") * 100 ), 30, "override opacity" );
  855
+	el.css( "opacity", "" );
  856
+	equal( Math.round( el.css("opacity") * 100 ), 20, "remove opacity override" );
  857
+});
  858
+
  859
+test( ":visible/:hidden selectors", function() {
  860
+	expect( 13 );
  861
+
  862
+	ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible" );
  863
+	jQuery("#nothiddendiv").css({ display: "none" });
  864
+	ok( !jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is hidden" );
  865
+	jQuery("#nothiddendiv").css({"display": "block"});
  866
+	ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible");
  867
+	ok( jQuery(window).is(":visible"), "Calling is(':visible') on window does not throw an error in IE.");
  868
+	ok( jQuery(document).is(":visible"), "Calling is(':visible') on document does not throw an error in IE.");
  869
+
  870
+	ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible");
  871
+	jQuery("#nothiddendiv").css("display", "none");
  872
+	ok( !jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is hidden");
  873
+	jQuery("#nothiddendiv").css("display", "block");
  874
+	ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible");
  875
+
  876
+	ok( !jQuery("#siblingspan").is(":visible"), "Span with no content not visible (#13132)" );
  877
+	var $newDiv = jQuery("<div><span></span></div>").appendTo("#qunit-fixture");
  878
+	equal( $newDiv.find(":visible").length, 0, "Span with no content not visible (#13132)" );
  879
+	var $br = jQuery("<br/>").appendTo("#qunit-fixture");
  880
+	ok( !$br.is(":visible"), "br element not visible (#10406)");
  881
+
  882
+	var $table = jQuery("#table");
  883
+	$table.html("<tr><td style='display:none'>cell</td><td>cell</td></tr>");
  884
+	equal(jQuery("#table td:visible").length, 1, "hidden cell is not perceived as visible (#4512). Works on table elements");
  885
+	$table.css("display", "none").html("<tr><td>cell</td><td>cell</td></tr>");
  886
+	equal(jQuery("#table td:visible").length, 0, "hidden cell children not perceived as visible (#4512)");
884 887
 });
885 888
 
886 889
 asyncTest( "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)", 24, function() {

0 notes on commit 372e04e

Dave Methvin

Looks like this is causing fails for cases where the container has height==0 but does have width: http://jsfiddle.net/dmethvin/FZvav/

Timmy Willison
Collaborator

That's the idea.

Please sign in to comment.
Something went wrong with that request. Please try again.