From: Timmy Willison <timmywillisn@gmail.com>
Date: Tue, 10 Sep 2013 19:57:14 +0000 (-0500)
Subject: Ensure display: inline-block when animating width/height on inline elements. Fixes... 
X-Git-Tag: 2.1.0-beta1~28
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=73fe17299a840a8a7f3ffffcac15e32a88bd3d66;p=jquery.git

Ensure display: inline-block when animating width/height on inline elements. Fixes #14344.
---

diff --git a/src/effects.js b/src/effects.js
index e61e576cb..b2d206850 100644
--- a/src/effects.js
+++ b/src/effects.js
@@ -5,7 +5,9 @@ var
 	pnum = require( "./var/pnum" ),
 	cssExpand = require( "./css/var/cssExpand" ),
 	isHidden = require( "./css/var/isHidden" ),
+	defaultDisplay = require( "./css/defaultDisplay" ),
 	data_priv = require( "./data/var/data_priv" ),
+
 	fxNow, timerId,
 	rfxtypes = /^(?:toggle|show|hide)$/,
 	rfxnum = new RegExp( "^(?:([+-])=|)(" + pnum + ")([a-z%]*)$", "i" ),
@@ -86,7 +88,7 @@ function genFx( type, includeWidth ) {
 
 	// if we include width, step value is 1 to do all cssExpand values,
 	// if we don't include width, step value is 2 to skip over Left and Right
-	includeWidth = includeWidth? 1 : 0;
+	includeWidth = includeWidth ? 1 : 0;
 	for( ; i < 4 ; i += 2 - includeWidth ) {
 		which = cssExpand[ i ];
 		attrs[ "margin" + which ] = attrs[ "padding" + which ] = type;
@@ -115,7 +117,7 @@ function createTween( value, prop, animation ) {
 
 function defaultPrefilter( elem, props, opts ) {
 	/* jshint validthis: true */
-	var prop, value, toggle, tween, hooks, oldfire,
+	var prop, value, toggle, tween, hooks, oldfire, display,
 		anim = this,
 		orig = {},
 		style = elem.style,
@@ -158,7 +160,12 @@ function defaultPrefilter( elem, props, opts ) {
 
 		// Set display property to inline-block for height/width
 		// animations on inline elements that are having width/height animated
-		if ( jQuery.css( elem, "display" ) === "inline" &&
+		display = jQuery.css( elem, "display" );
+		// Get default display if display is currently "none"
+		if ( display === "none" ) {
+			display = defaultDisplay( elem.nodeName );
+		}
+		if ( display === "inline" &&
 				jQuery.css( elem, "float" ) === "none" ) {
 
 			style.display = "inline-block";
diff --git a/test/unit/effects.js b/test/unit/effects.js
index 078f29b6f..4738cb245 100644
--- a/test/unit/effects.js
+++ b/test/unit/effects.js
@@ -131,13 +131,17 @@ test("show(Number) - other displays", function() {
 		num = 0;
 	jQuery("#test-table").remove();
 
+	// Note: inline elements are expected to be inline-block
+	// because we're showing width/height
+	// Can't animate width/height inline
+	// See #14344
 	test = {
 		"div"      : "block",
 		"p"        : "block",
-		"a"        : "inline",
-		"code"     : "inline",
+		"a"        : "inline-block",
+		"code"     : "inline-block",
 		"pre"      : "block",
-		"span"     : "inline",
+		"span"     : "inline-block",
 		"table"    : old ? "block" : "table",
 		"thead"    : old ? "block" : "table-header-group",
 		"tbody"    : old ? "block" : "table-row-group",