library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-10-05 11:34:18 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Timmy Willison 2015-05-08 15:27:54 -07:00
parent 7855a1a7d8
commit 79bcb29132
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/css/hiddenVisibleSelectors.js
View File

@ -4,12 +4,10 @@ define([
], function( jQuery ) {
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;
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 );
};
});

20
test/unit/css.js
View File

@ -924,9 +924,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" });
@ -942,11 +942,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>");
@ -957,6 +960,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() {