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 ) {
/* 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;

10
test/unit/effects.js vendored
View File

@ -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",