Commit 7b9b98d6 authored by Timmy Willison's avatar Timmy Willison

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

Conflicts:
	src/css/hiddenVisibleSelectors.js
parent 181b4516
...@@ -8,7 +8,9 @@ define([ ...@@ -8,7 +8,9 @@ define([
jQuery.expr.filters.hidden = function( elem ) { jQuery.expr.filters.hidden = function( elem ) {
// Support: Opera <= 12.12 // Support: Opera <= 12.12
// Opera reports offsetWidths and offsetHeights less than zero on some elements // 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 ||
(!support.reliableHiddenOffsets() && (!support.reliableHiddenOffsets() &&
((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none"); ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
}; };
......
...@@ -944,15 +944,17 @@ test( "css opacity consistency across browsers (#12685)", function() { ...@@ -944,15 +944,17 @@ test( "css opacity consistency across browsers (#12685)", function() {
}); });
test( ":visible/:hidden selectors", 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" ); ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible" );
jQuery("#nothiddendiv").css({ display: "none" }); jQuery("#nothiddendiv").css({ display: "none" });
ok( !jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is hidden" ); 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("#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(window).is(":visible"), "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(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"); ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible");
jQuery("#nothiddendiv").css("display", "none"); jQuery("#nothiddendiv").css("display", "none");
...@@ -960,13 +962,13 @@ test( ":visible/:hidden selectors", function() { ...@@ -960,13 +962,13 @@ test( ":visible/:hidden selectors", function() {
jQuery("#nothiddendiv").css("display", "block"); jQuery("#nothiddendiv").css("display", "block");
ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible"); ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible");
// ok( !jQuery("#siblingspan").is(":visible"), "Span with no content not visible (#13132)" ); ok( !jQuery("#siblingspan").is(":visible"), "Span with no content not visible (#13132)" );
// var $newDiv = jQuery("<div><span></span></div>").appendTo("#qunit-fixture"); $newDiv = jQuery("<div><span></span></div>").appendTo("#qunit-fixture");
// equal( $newDiv.find(":visible").length, 0, "Span with no content not visible (#13132)" ); equal( $newDiv.find(":visible").length, 0, "Span with no content not visible (#13132)" );
// var $br = jQuery("<br/>").appendTo("#qunit-fixture"); $br = jQuery("<br/>").appendTo("#qunit-fixture");
// ok( !$br.is(":visible"), "br element not visible (#10406)"); 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>"); $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"); 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>"); $table.css("display", "none").html("<tr><td>cell</td><td>cell</td></tr>");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment