Skip to content

Commit c5e6c5f

Browse files
gibson042gibson042
committed
Effects: Abandon defaultDisplay
1 parent 2f0252f commit c5e6c5f

File tree

4 files changed

+126
-117
lines changed

4 files changed

+126
-117
lines changed

‎src/css.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ define([
1010
"./css/var/getStyles",
1111
"./css/curCSS",
1212
"./css/adjustCSS",
13-
"./css/defaultDisplay",
1413
"./css/addGetHookIf",
1514
"./css/support",
1615
"./data/var/dataPriv",
@@ -20,7 +19,7 @@ define([
2019
"./core/ready",
2120
"./selector" // contains
2221
], function( jQuery, pnum, access, rmargin, rcssNum, rnumnonpx, cssExpand, isHidden,
23-
getStyles, curCSS, adjustCSS, defaultDisplay, addGetHookIf, support, dataPriv ) {
22+
getStyles, curCSS, adjustCSS, addGetHookIf, support, dataPriv ) {
2423

2524
var
2625
// Swappable if display is none or starts with table

‎src/css/defaultDisplay.js‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎src/effects.js‎

Lines changed: 56 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,16 @@ define([
55
"./css/var/cssExpand",
66
"./css/var/isHidden",
77
"./css/adjustCSS",
8-
"./css/defaultDisplay",
98
"./data/var/dataPriv",
109

1110
"./core/init",
12-
"./effects/Tween",
1311
"./queue",
14-
"./css",
1512
"./deferred",
16-
"./traversing"
17-
], function( jQuery, document, rcssNum, cssExpand,
18-
isHidden, adjustCSS, defaultDisplay, dataPriv ) {
13+
"./traversing",
14+
"./manipulation",
15+
"./css",
16+
"./effects/Tween"
17+
], function( jQuery, document, rcssNum, cssExpand, isHidden, adjustCSS, dataPriv ) {
1918

2019
var
2120
fxNow, timerId,
@@ -82,7 +81,8 @@ function createTween( value, prop, animation ) {
8281

8382
function defaultPrefilter( elem, props, opts ) {
8483
/* jshint validthis: true */
85-
var prop, value, toggle, tween, hooks, oldfire, display, checkDisplay,
84+
var prop, value, toggle, tween, hooks, oldfire, display, restoreDisplay,
85+
isBox = "height" in props || "width" in props,
8686
anim = this,
8787
orig = {},
8888
style = elem.style,
@@ -114,32 +114,6 @@ function defaultPrefilter( elem, props, opts ) {
114114
});
115115
}
116116

117-
// Temporarily restrict "overflow" and "display" styles during height/width animations
118-
if ( elem.nodeType === 1 && ( "height" in props || "width" in props ) ) {
119-
// Support: IE 9 - 11
120-
// Record all 3 overflow attributes because IE does not infer the shorthand
121-
// from identically-valued overflowX and overflowY
122-
opts.overflow = [ style.overflow, style.overflowX, style.overflowY ];
123-
124-
// Animate inline elements as inline-block
125-
display = jQuery.css( elem, "display" );
126-
checkDisplay = display === "none" ?
127-
dataPriv.get( elem, "olddisplay" ) || defaultDisplay( elem.nodeName ) :
128-
display;
129-
if ( checkDisplay === "inline" && jQuery.css( elem, "float" ) === "none" ) {
130-
style.display = "inline-block";
131-
}
132-
}
133-
134-
if ( opts.overflow ) {
135-
style.overflow = "hidden";
136-
anim.always(function() {
137-
style.overflow = opts.overflow[ 0 ];
138-
style.overflowX = opts.overflow[ 1 ];
139-
style.overflowY = opts.overflow[ 2 ];
140-
});
141-
}
142-
143117
// Detect show/hide animations
144118
for ( prop in props ) {
145119
value = props[ prop ];
@@ -159,21 +133,66 @@ function defaultPrefilter( elem, props, opts ) {
159133
}
160134
}
161135
orig[ prop ] = dataShow && dataShow[ prop ] || jQuery.style( elem, prop );
136+
}
137+
}
162138

163-
// Any non-show/hide property stops us from reverting a display override
164-
} else {
165-
display = undefined;
139+
// Temporarily restrict "overflow" and "display" styles during box animations
140+
if ( isBox && elem.nodeType === 1 ) {
141+
// Support: IE 9 - 11
142+
// Record all 3 overflow attributes because IE does not infer the shorthand
143+
// from identically-valued overflowX and overflowY
144+
opts.overflow = [ style.overflow, style.overflowX, style.overflowY ];
145+
146+
// Identify a display type, preferring old show/hide data over the CSS cascade
147+
restoreDisplay = dataShow && dataShow.display;
148+
if ( restoreDisplay == null ) {
149+
restoreDisplay = dataPriv.get( elem, "olddisplay" );
150+
}
151+
display = jQuery.css( elem, "display" );
152+
if ( display === "none" ) {
153+
display = restoreDisplay || jQuery.swap( elem, { "display": "" }, function() {
154+
return jQuery.css( elem, "display" );
155+
} );
156+
}
157+
158+
// Animate inline elements as inline-block
159+
if ( display === "inline" || display === "inline-block" && restoreDisplay != null ) {
160+
if ( jQuery.css( elem, "float" ) === "none" ) {
161+
if ( !jQuery.isEmptyObject( props ) ) {
162+
style.display = "inline-block";
163+
164+
// Restore the original display value at the end of pure show/hide animations
165+
} else if ( !jQuery.isEmptyObject( orig ) ) {
166+
if ( restoreDisplay == null ) {
167+
display = style.display;
168+
restoreDisplay = display === "none" ? "" : display;
169+
}
170+
style.display = "inline-block";
171+
anim.done(function() {
172+
style.display = restoreDisplay;
173+
});
174+
}
175+
}
166176
}
167177
}
168178

179+
if ( opts.overflow ) {
180+
style.overflow = "hidden";
181+
anim.always(function() {
182+
style.overflow = opts.overflow[ 0 ];
183+
style.overflowX = opts.overflow[ 1 ];
184+
style.overflowY = opts.overflow[ 2 ];
185+
});
186+
}
187+
169188
// Implement show/hide animations
170189
if ( !jQuery.isEmptyObject( orig ) ) {
171190
if ( dataShow ) {
172191
if ( "hidden" in dataShow ) {
173192
hidden = dataShow.hidden;
174193
}
175194
} else {
176-
dataShow = dataPriv.access( elem, "fxshow", {} );
195+
dataShow = dataPriv.access( elem, "fxshow", { display: restoreDisplay } );
177196
}
178197

179198
// Store hidden/visible for toggle so `.stop().toggle()` "reverses"
@@ -186,9 +205,6 @@ function defaultPrefilter( elem, props, opts ) {
186205
}
187206

188207
anim.done(function() {
189-
if ( checkDisplay === "inline" && style.display === "inline-block" ) {
190-
style.display = dataPriv.get( elem, "olddisplay" ) || "";
191-
}
192208
if ( !hidden ) {
193209
jQuery( elem ).hide();
194210
}
@@ -209,10 +225,6 @@ function defaultPrefilter( elem, props, opts ) {
209225
}
210226
}
211227
}
212-
213-
// If this is a noop like .hide().hide(), revert a display override
214-
} else if ( (display === "none" ? defaultDisplay( elem.nodeName ) : display) === "inline" ) {
215-
style.display = display;
216228
}
217229
}
218230

‎test/unit/effects.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2216,4 +2216,73 @@ test( "Make sure initialized display value for disconnected nodes is correct (#1
22162216
this.clock.tick( 1000 );
22172217
});
22182218

2219+
test( "Show/hide/toggle and display: inline", function() {
2220+
expect( 40 );
2221+
2222+
var clock = this.clock;
2223+
2224+
jQuery( "<span/><div style='display:inline' title='inline div'/>" ).each(function() {
2225+
var completed, interrupted,
2226+
N = 100,
2227+
fixture = jQuery( "#qunit-fixture" ),
2228+
$el = jQuery( this ),
2229+
kind = this.title || this.nodeName.toLowerCase();
2230+
2231+
// Animations allowed to complete
2232+
completed = jQuery.map( [
2233+
$el.clone().data({ call: "hide", done: "none" }).appendTo( fixture ).hide( N ),
2234+
$el.clone().data({ call: "toggle", done: "none" }).appendTo( fixture ).toggle( N ),
2235+
$el.clone().data({ call: "hide+show", done: "inline" }).appendTo( fixture )
2236+
.hide().show( N ),
2237+
$el.clone().data({ call: "hide+toggle", done: "inline" }).appendTo( fixture )
2238+
.hide().toggle( N )
2239+
], function( $clone ) { return $clone[ 0 ]; } );
2240+
2241+
// Animations not allowed to complete
2242+
interrupted = jQuery.map( [
2243+
$el.clone().data({ call: "hide+stop" }).appendTo( fixture ).hide( N ),
2244+
$el.clone().data({ call: "toggle+stop" }).appendTo( fixture ).toggle( N ),
2245+
$el.clone().data({ call: "hide+show+stop" }).appendTo( fixture ).hide().show( N ),
2246+
$el.clone().data({ call: "hide+toggle+stop" }).appendTo( fixture ).hide().toggle( N )
2247+
], function( $clone ) { return $clone[ 0 ]; } );
2248+
2249+
// All elements should be inline-block during the animation
2250+
clock.tick( N / 2 );
2251+
jQuery( completed ).each(function() {
2252+
var $el = jQuery( this ),
2253+
call = $el.data( "call" );
2254+
strictEqual( $el.css( "display" ), "inline-block", kind + " display during " + call );
2255+
});
2256+
2257+
// Interrupted elements should remain inline-block
2258+
jQuery( interrupted ).stop();
2259+
clock.tick( N / 2 );
2260+
jQuery( interrupted ).each(function() {
2261+
var $el = jQuery( this ),
2262+
call = $el.data( "call" );
2263+
strictEqual( $el.css( "display" ), "inline-block", kind + " display after " + call );
2264+
});
2265+
2266+
// Completed elements should not remain inline-block
2267+
clock.tick( N / 2 );
2268+
jQuery( completed ).each(function() {
2269+
var $el = jQuery( this ),
2270+
call = $el.data( "call" ),
2271+
display = $el.data( "done" );
2272+
strictEqual( $el.css( "display" ), display, kind + " display after " + call );
2273+
});
2274+
2275+
// A post-animation toggle should not make any element inline-block
2276+
completed = jQuery( completed.concat( interrupted ) );
2277+
completed.toggle( N / 2 );
2278+
clock.tick( N );
2279+
completed.each(function() {
2280+
var $el = jQuery( this ),
2281+
call = $el.data( "call" );
2282+
ok( $el.css( "display" ) !== "inline-block",
2283+
kind + " display is not inline-block after " + call + "+toggle" );
2284+
});
2285+
});
2286+
});
2287+
22192288
})();

0 commit comments

Comments
 (0)