CSS: Restore cascade-override behavior in .show

Fixes jquerygh-2654 Fixes jquerygh-2308 Close jquerygh-2810 Ref 86419b1
yoshio-kinoshita · Jan 13, 2016 · dba93f7 · dba93f7
1 parent a268f52
commit dba93f7
Show file tree

Hide file tree

Showing 5 changed files with 391 additions and 116 deletions.
diff --git a/src/css/showHide.js b/src/css/showHide.js
@@ -4,6 +4,31 @@ define( [
 	"../css/var/isHidden"
 ], function( jQuery, dataPriv, isHidden ) {
 
+var defaultDisplayMap = {};
+
+function getDefaultDisplay( elem ) {
+	var temp,
+		doc = elem.ownerDocument,
+		nodeName = elem.nodeName,
+		display = defaultDisplayMap[ nodeName ];
+
+	if ( display ) {
+		return display;
+	}
+
+	temp = doc.body.appendChild( doc.createElement( nodeName ) ),
+	display = jQuery.css( temp, "display" );
+
+	temp.parentNode.removeChild( temp );
+
+	if ( display === "none" ) {
+		display = "block";
+	}
+	defaultDisplayMap[ nodeName ] = display;
+
+	return display;
+}
+
 function showHide( elements, show ) {
 	var display, elem,
 		values = [],
@@ -19,23 +44,30 @@ function showHide( elements, show ) {
 
 		display = elem.style.display;
 		if ( show ) {
-			if ( display === "none" ) {
 
-				// Restore a pre-hide() value if we have one
-				values[ index ] = dataPriv.get( elem, "display" ) || "";
+			// Since we force visibility upon cascade-hidden elements, an immediate (and slow)
+			// check is required in this first loop unless we have a nonempty display value (either
+			// inline or about-to-be-restored)
+			if ( display === "none" ) {
+				values[ index ] = dataPriv.get( elem, "display" ) || null;
+				if ( !values[ index ] ) {
+					elem.style.display = "";
+				}
+			}
+			if ( elem.style.display === "" && jQuery.css( elem, "display" ) === "none" ) {
+				values[ index ] = getDefaultDisplay( elem );
 			}
 		} else {
 			if ( display !== "none" ) {
 				values[ index ] = "none";
 
-				// Remember the value we're replacing
+				// Remember what we're overwriting
 				dataPriv.set( elem, "display", display );
 			}
 		}
 	}
 
-	// Set the display of the elements in a second loop
-	// to avoid the constant reflow
+	// Set the display of the elements in a second loop to avoid constant reflow
 	for ( index = 0; index < length; index++ ) {
 		if ( values[ index ] != null ) {
 			elements[ index ].style.display = values[ index ];

diff --git a/src/effects.js b/src/effects.js
@@ -154,9 +154,16 @@ function defaultPrefilter( elem, props, opts ) {
 		}
 		display = jQuery.css( elem, "display" );
 		if ( display === "none" ) {
-			display = restoreDisplay || swap( elem, { "display": "" }, function() {
-				return jQuery.css( elem, "display" );
-			} );
+			if ( restoreDisplay ) {
+				display = restoreDisplay;
+			} else {
+
+				// Get nonempty value(s) by temporarily forcing visibility
+				showHide( [ elem ], true );
+				restoreDisplay = elem.style.display || restoreDisplay;
+				display = jQuery.css( elem, "display" );
+				showHide( [ elem ] );
+			}
 		}
 
 		// Animate inline elements as inline-block

diff --git a/test/data/testsuite.css b/test/data/testsuite.css
@@ -20,10 +20,6 @@ div#fx-tests div.overflow {
 	overflow: visible;
 }
 
-div.inline {
-	display: inline;
-}
-
 div.autoheight {
 	height: auto;
 }
@@ -68,11 +64,6 @@ div.noopacity {
 	opacity: 0;
 }
 
-div.hidden,
-span.hidden {
-	display: none;
-}
-
 div#fx-tests div.widewidth {
 	background-repeat: repeat-x;
 }
@@ -134,3 +125,8 @@ section { background:#f0f; display:block; }
 #span-14824 { display: block; }
 
 #display { display: list-item !important; }
+
+.block { display: block; }
+.inline { display: inline; }
+.list-item { display: list-item; }
+.hidden, .none { display: none; }