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

This commit is contained in:
Timmy Willison 2013-09-10 15:09:58 -05:00
parent 89ddf1040a
commit 812319093a
2 changed files with 15 additions and 6 deletions

11
src/effects.js vendored
View File

@ -118,7 +118,7 @@ function createTween( value, prop, animation ) {
function defaultPrefilter( elem, props, opts ) { function defaultPrefilter( elem, props, opts ) {
/* jshint validthis: true */ /* jshint validthis: true */
var prop, value, toggle, tween, hooks, oldfire, var prop, value, toggle, tween, hooks, oldfire, display, dDisplay,
anim = this, anim = this,
orig = {}, orig = {},
style = elem.style, style = elem.style,
@ -161,12 +161,17 @@ function defaultPrefilter( elem, props, opts ) {
// Set display property to inline-block for height/width // Set display property to inline-block for height/width
// animations on inline elements that are having width/height animated // 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" ) { jQuery.css( elem, "float" ) === "none" ) {
// inline-level elements accept inline-block; // inline-level elements accept inline-block;
// block-level elements need to be inline with layout // 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"; style.display = "inline-block";
} else { } else {
style.zoom = 1; style.zoom = 1;

10
test/unit/effects.js vendored
View File

@ -135,13 +135,17 @@ test("show(Number) - other displays", function() {
num = 0; num = 0;
jQuery("#test-table").remove(); 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 = { test = {
"div" : "block", "div" : "block",
"p" : "block", "p" : "block",
"a" : "inline", "a" : "inline-block",
"code" : "inline", "code" : "inline-block",
"pre" : "block", "pre" : "block",
"span" : "inline", "span" : "inline-block",
"table" : old ? "block" : "table", "table" : old ? "block" : "table",
"thead" : old ? "block" : "table-header-group", "thead" : old ? "block" : "table-header-group",
"tbody" : old ? "block" : "table-row-group", "tbody" : old ? "block" : "table-row-group",