Skip to content
Permalink
Browse files

Ensure display: inline-block when animating width/height on inline el…

…ements. Fixes #14344.
  • Loading branch information...
timmywil committed Sep 10, 2013
1 parent ac60f10 commit 73fe17299a840a8a7f3ffffcac15e32a88bd3d66
Showing with 17 additions and 6 deletions.
  1. +10 −3 src/effects.js
  2. +7 −3 test/unit/effects.js
@@ -5,7 +5,9 @@ var
pnum = require( "./var/pnum" ), pnum = require( "./var/pnum" ),
cssExpand = require( "./css/var/cssExpand" ), cssExpand = require( "./css/var/cssExpand" ),
isHidden = require( "./css/var/isHidden" ), isHidden = require( "./css/var/isHidden" ),
defaultDisplay = require( "./css/defaultDisplay" ),
data_priv = require( "./data/var/data_priv" ), data_priv = require( "./data/var/data_priv" ),

fxNow, timerId, fxNow, timerId,
rfxtypes = /^(?:toggle|show|hide)$/, rfxtypes = /^(?:toggle|show|hide)$/,
rfxnum = new RegExp( "^(?:([+-])=|)(" + pnum + ")([a-z%]*)$", "i" ), 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 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 // 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 ) { for( ; i < 4 ; i += 2 - includeWidth ) {
which = cssExpand[ i ]; which = cssExpand[ i ];
attrs[ "margin" + which ] = attrs[ "padding" + which ] = type; attrs[ "margin" + which ] = attrs[ "padding" + which ] = type;
@@ -115,7 +117,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,
anim = this, anim = this,
orig = {}, orig = {},
style = elem.style, style = elem.style,
@@ -158,7 +160,12 @@ 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" );
// Get default display if display is currently "none"
if ( display === "none" ) {
display = defaultDisplay( elem.nodeName );
}
if ( display === "inline" &&
jQuery.css( elem, "float" ) === "none" ) { jQuery.css( elem, "float" ) === "none" ) {


style.display = "inline-block"; style.display = "inline-block";
@@ -131,13 +131,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",

0 comments on commit 73fe172

Please sign in to comment.
You can’t perform that action at this time.