CSS: disconnected elements should be hidden

Fixes gh-3043

2 files changed, 11 insertions, 2 deletions

diff --git a/src/css/hiddenVisibleSelectors.js b/src/css/hiddenVisibleSelectors.js
index 899b9eca4..e75ff5fc3 100644
--- a/src/css/hiddenVisibleSelectors.js
+++ b/src/css/hiddenVisibleSelectors.js
@@ -1,15 +1,21 @@
 define( [
 	"../core",
+	"../var/document",
 	"./support",
 	"../selector",
 	"../css"
-], function( jQuery, support ) {
+], function( jQuery, document, support ) {
 
 function getDisplay( elem ) {
 	return elem.style && elem.style.display || jQuery.css( elem, "display" );
 }
 
 function filterHidden( elem ) {
+
+	// Disconnected elements are considered hidden
+	if ( !jQuery.contains( elem.ownerDocument || document, elem ) ) {
+		return true;
+	}
 	while ( elem && elem.nodeType === 1 ) {
 		if ( getDisplay( elem ) === "none" || elem.type === "hidden" ) {
 			return true;
diff --git a/test/unit/css.js b/test/unit/css.js
index 58e9e1364..69463e74b 100644
--- a/test/unit/css.js
+++ b/test/unit/css.js
@@ -1059,7 +1059,7 @@ QUnit.test( "css opacity consistency across browsers (#12685)", function( assert
 } );
 
 QUnit.test( ":visible/:hidden selectors", function( assert ) {
-	assert.expect( 17 );
+	assert.expect( 19 );
 
 	var $div, $table, $a;
 
@@ -1100,6 +1100,9 @@ QUnit.test( ":visible/:hidden selectors", function( assert ) {
 
 	$a = jQuery( "<a href='#'><h1>Header</h1></a>" ).appendTo( "#qunit-fixture" );
 	assert.ok( $a.is( ":visible" ), "Anchor tag with flow content is visible (gh-2227)" );
+
+	assert.ok( !jQuery( "<div>Test</div>" ).is( ":visible" ), "Disconnected element is not visible" );
+	assert.ok( !jQuery( "<div><div>Test</div></div>" ).find("div").is( ":visible" ), "Disconnected element child is not visible" );
 } );
 
 QUnit.test( "Keep the last style if the new one isn't recognized by the browser (#14836)", function( assert ) {