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

diff --git a/src/effects.js b/src/effects.js
index d5baaca997bd56dd1935ba25867280bad51cfb4a..292f31af656aef650f7563cb36f2f49c5930bbe9 100644 (file)
--- a/src/effects.js
+++ b/src/effects.js
@@ -118,7 +118,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, dDisplay,
                anim = this,
                orig = {},
                style = elem.style,
@@ -161,12 +161,17 @@ 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" );
+               dDisplay = defaultDisplay( elem.nodeName );
+               if ( display === "none" ) {
+                       display = dDisplay;
+               }
+               if ( display === "inline" &&
                                jQuery.css( elem, "float" ) === "none" ) {
 
                        // inline-level elements accept inline-block;
                        // block-level elements need to be inline with layout
-                       if ( !support.inlineBlockNeedsLayout || defaultDisplay( elem.nodeName ) === "inline" ) {
+                       if ( !support.inlineBlockNeedsLayout || dDisplay === "inline" ) {
                                style.display = "inline-block";
                        } else {
                                style.zoom = 1;

diff --git a/test/unit/effects.js b/test/unit/effects.js
index be2867e74d4fb3b7881810f4fa66048b90318142..2a5ff402b3935b46491c353d532c1a41c315ac81 100644 (file)
--- a/test/unit/effects.js
+++ b/test/unit/effects.js
@@ -135,13 +135,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",