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

diff --git a/src/effects.js b/src/effects.js
index e61e576cb995f5758225d687cca126db84282f24..b2d2068503e694d7f79bb09f7cf558aa996b215f 100644 (file)
--- 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 078f29b6fe86fc94bc3a42b6c49a3e65dbfd57e2..4738cb2450c818de800bf5fe84f139c983e034c4 100644 (file)
--- 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",