library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-11-23 02:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

CSS: Ignore the CSS cascade in show()/hide()/etc.

Browse Source 
Fixes gh-1767
Fixes gh-2071
Closes gh-2180
This commit is contained in:
Richard Gibson 2015-04-02 16:57:33 -04:00
parent 5c3101fee6
commit 86419b10bf
7 changed files with 381 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/css.js
View File

@ -11,16 +11,15 @@ define([
"./css/var/swap", "./css/var/swap",
"./css/curCSS", "./css/curCSS",
"./css/adjustCSS", "./css/adjustCSS",
"./css/defaultDisplay",
"./css/addGetHookIf", "./css/addGetHookIf",
"./css/support", "./css/support",
"./data/var/dataPriv", "./css/showHide",
"./core/init", "./core/init",
"./core/ready", "./core/ready",
"./selector" // contains "./selector" // contains
], function( jQuery, pnum, access, rmargin, rcssNum, rnumnonpx, cssExpand, isHidden, ], function( jQuery, pnum, access, rmargin, rcssNum, rnumnonpx, cssExpand, isHidden,
getStyles, swap, curCSS, adjustCSS, defaultDisplay, addGetHookIf, support, dataPriv ) { getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, showHide ) {
var var
// Swappable if display is none or starts with table // Swappable if display is none or starts with table
@ -151,65 +150,6 @@ function getWidthOrHeight( elem, name, extra ) {
) + "px"; ) + "px";
} }
function showHide( elements, show ) {
var display, elem, hidden,
values = [],
index = 0,
length = elements.length;
for ( ; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
values[ index ] = dataPriv.get( elem, "olddisplay" );
display = elem.style.display;
if ( show ) {
// Reset the inline display of this element to learn if it is
// being hidden by cascaded rules or not
if ( !values[ index ] && display === "none" ) {
elem.style.display = "";
}
// Set elements which have been overridden with display: none
// in a stylesheet to whatever the default browser style is
// for such an element
if ( elem.style.display === "" && isHidden( elem ) ) {
values[ index ] = dataPriv.access(
elem,
"olddisplay",
defaultDisplay(elem.nodeName)
);
}
} else {
hidden = isHidden( elem );
if ( display !== "none" || !hidden ) {
dataPriv.set(
elem,
"olddisplay",
hidden ? display : jQuery.css( elem, "display" )
);
}
}
}
// Set the display of most of the elements in a second loop
// to avoid the constant reflow
for ( index = 0; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
elem.style.display = show ? values[ index ] || "" : "none";
}
}
return elements;
}
jQuery.extend({ jQuery.extend({
// Add in style property hooks for overriding the default // Add in style property hooks for overriding the default

71
src/css/defaultDisplay.js
View File

@ -1,71 +0,0 @@
define([
"../core",
"../var/document",
"../manipulation" // appendTo
], function( jQuery, document ) {
var iframe,
elemdisplay = {
// Support: Firefox
// We have to pre-define these values for FF (#10227)
HTML: "block",
BODY: "block"
};
/**
* Retrieve the actual display of a element
* @param {String} name nodeName of the element
* @param {Object} doc Document object
*/
// Called only from within defaultDisplay
function actualDisplay( name, doc ) {
var elem = jQuery( doc.createElement( name ) ).appendTo( doc.body ),
display = jQuery.css( elem[ 0 ], "display" );
// We don't have any data stored on the element,
// so use "detach" method as fast way to get rid of the element
elem.detach();
return display;
}
/**
* Try to determine the default display value of an element
* @param {String} nodeName
*/
function defaultDisplay( nodeName ) {
var doc = document,
display = elemdisplay[ nodeName ];
if ( !display ) {
display = actualDisplay( nodeName, doc );
// If the simple way fails, read from inside an iframe
if ( display === "none" || !display ) {
// Use the already-created iframe if possible
iframe = (iframe || jQuery( "<iframe frameborder='0' width='0' height='0'/>" ))
.appendTo( doc.documentElement );
// Always write a new HTML skeleton so Webkit and Firefox don't choke on reuse
doc = iframe[ 0 ].contentDocument;
// Support: IE
doc.write();
doc.close();
display = actualDisplay( nodeName, doc );
iframe.detach();
}
// Store the correct default display
elemdisplay[ nodeName ] = display;
}
return display;
}
return defaultDisplay;
});

47
src/css/showHide.js Normal file
View File

@ -0,0 +1,47 @@
define([
"../data/var/dataPriv"
], function( dataPriv ) {
function showHide( elements, show ) {
var display, elem,
values = [],
index = 0,
length = elements.length;
// Determine new display value for elements that need to change
for ( ; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
display = elem.style.display;
if ( show ) {
if ( display === "none" ) {
// Restore a pre-hide() value if we have one
values[ index ] = dataPriv.get( elem, "display" ) || "";
}
} else {
if ( display !== "none" ) {
values[ index ] = "none";
// Remember the value we're replacing
dataPriv.set( elem, "display", display );
}
}
}
// Set the display of the elements in a second loop
// to avoid the constant reflow
for ( index = 0; index < length; index++ ) {
if ( values[ index ] != null ) {
elements[ index ].style.display = values[ index ];
}
}
return elements;
}
return showHide;
});

178
src/effects.js vendored
View File

@ -4,18 +4,19 @@ define([
"./var/rcssNum", "./var/rcssNum",
"./css/var/cssExpand", "./css/var/cssExpand",
"./css/var/isHidden", "./css/var/isHidden",
"./css/var/swap",
"./css/adjustCSS", "./css/adjustCSS",
"./css/defaultDisplay",
"./data/var/dataPriv", "./data/var/dataPriv",
"./css/showHide",
"./core/init", "./core/init",
"./effects/Tween",
"./queue", "./queue",
"./css",
"./deferred", "./deferred",
"./traversing" "./traversing",
], function( jQuery, document, rcssNum, cssExpand, "./manipulation",
isHidden, adjustCSS, defaultDisplay, dataPriv ) { "./css",
"./effects/Tween"
], function( jQuery, document, rcssNum, cssExpand, isHidden, swap, adjustCSS, dataPriv, showHide ) {
var var
fxNow, timerId, fxNow, timerId,
@ -82,14 +83,15 @@ 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, display, checkDisplay, var prop, value, toggle, hooks, oldfire, propTween, restoreDisplay, display,
isBox = "width" in props || "height" in props,
anim = this, anim = this,
orig = {}, orig = {},
style = elem.style, style = elem.style,
hidden = elem.nodeType && isHidden( elem ), hidden = elem.nodeType && isHidden( elem ),
dataShow = dataPriv.get( elem, "fxshow" ); dataShow = dataPriv.get( elem, "fxshow" );
// Handle queue: false promises // Queue-skipping animations hijack the fx hooks
if ( !opts.queue ) { if ( !opts.queue ) {
hooks = jQuery._queueHooks( elem, "fx" ); hooks = jQuery._queueHooks( elem, "fx" );
if ( hooks.unqueued == null ) { if ( hooks.unqueued == null ) {
@ -114,24 +116,69 @@ function defaultPrefilter( elem, props, opts ) {
}); });
} }
// Height/width overflow pass // Detect show/hide animations
if ( elem.nodeType === 1 && ( "height" in props || "width" in props ) ) { for ( prop in props ) {
// Make sure that nothing sneaks out value = props[ prop ];
// Record all 3 overflow attributes because IE9-10 do not if ( rfxtypes.test( value ) ) {
// change the overflow attribute when overflowX and delete props[ prop ];
// overflowY are set to the same value toggle = toggle || value === "toggle";
if ( value === ( hidden ? "hide" : "show" ) ) {
// Pretend to be hidden if this is a "show" and
// there is still data from a stopped show/hide
if ( value === "show" && dataShow && dataShow[ prop ] !== undefined ) {
hidden = true;
// Ignore all other no-op show/hide data
} else {
continue;
}
}
orig[ prop ] = dataShow && dataShow[ prop ] || jQuery.style( elem, prop );
}
}
// Bail out if this is a no-op like .hide().hide()
propTween = !jQuery.isEmptyObject( props );
if ( !propTween && jQuery.isEmptyObject( orig ) ) {
return;
}
// Restrict "overflow" and "display" styles during box animations
if ( isBox && elem.nodeType === 1 ) {
// Support: IE 9 - 11
// Record all 3 overflow attributes because IE does not infer the shorthand
// from identically-valued overflowX and overflowY
opts.overflow = [ style.overflow, style.overflowX, style.overflowY ]; opts.overflow = [ style.overflow, style.overflowX, style.overflowY ];
// Set display property to inline-block for height/width // Identify a display type, preferring old show/hide data over the CSS cascade
// animations on inline elements that are having width/height animated restoreDisplay = dataShow && dataShow.display;
if ( restoreDisplay == null ) {
restoreDisplay = dataPriv.get( elem, "display" );
}
display = jQuery.css( elem, "display" ); display = jQuery.css( elem, "display" );
if ( display === "none" ) {
display = restoreDisplay || swap( elem, { "display": "" }, function() {
return jQuery.css( elem, "display" );
} );
}
// Test default display if display is currently "none" // Animate inline elements as inline-block
checkDisplay = display === "none" ? if ( display === "inline" || display === "inline-block" && restoreDisplay != null ) {
dataPriv.get( elem, "olddisplay" ) || defaultDisplay( elem.nodeName ) : display; if ( jQuery.css( elem, "float" ) === "none" ) {
if ( checkDisplay === "inline" && jQuery.css( elem, "float" ) === "none" ) { // Restore the original display value at the end of pure show/hide animations
style.display = "inline-block"; if ( !propTween ) {
anim.done(function() {
style.display = restoreDisplay;
});
if ( restoreDisplay == null ) {
display = style.display;
restoreDisplay = display === "none" ? "" : display;
}
}
style.display = "inline-block";
}
} }
} }
@ -144,73 +191,52 @@ function defaultPrefilter( elem, props, opts ) {
}); });
} }
// show/hide pass // Implement show/hide animations
for ( prop in props ) { propTween = false;
value = props[ prop ]; for ( prop in orig ) {
if ( rfxtypes.exec( value ) ) {
delete props[ prop ];
toggle = toggle || value === "toggle";
if ( value === ( hidden ? "hide" : "show" ) ) {
// If there is dataShow left over from a stopped hide or show // General show/hide setup for this element animation
// and we are going to proceed with show, we should pretend to be hidden if ( !propTween ) {
if ( value === "show" && dataShow && dataShow[ prop ] !== undefined ) { if ( dataShow ) {
hidden = true; if ( "hidden" in dataShow ) {
} else { hidden = dataShow.hidden;
continue;
} }
} else {
dataShow = dataPriv.access( elem, "fxshow", { display: restoreDisplay } );
} }
orig[ prop ] = dataShow && dataShow[ prop ] || jQuery.style( elem, prop );
// Any non-fx value stops us from restoring the original display value // Store hidden/visible for toggle so `.stop().toggle()` "reverses"
} else { if ( toggle ) {
display = undefined; dataShow.hidden = !hidden;
}
}
if ( !jQuery.isEmptyObject( orig ) ) {
if ( dataShow ) {
if ( "hidden" in dataShow ) {
hidden = dataShow.hidden;
} }
} else {
dataShow = dataPriv.access( elem, "fxshow", {} );
}
// Store state if its toggle - enables .stop().toggle() to "reverse" // Show elements before animating them
if ( toggle ) { if ( hidden ) {
dataShow.hidden = !hidden; showHide( [ elem ], true );
} }
if ( hidden ) {
jQuery( elem ).show(); /* jshint -W083 */
} else {
anim.done(function() { anim.done(function() {
jQuery( elem ).hide(); // The final step of a "hide" animation is actually hiding the element
if ( !hidden ) {
showHide( [ elem ] );
}
dataPriv.remove( elem, "fxshow" );
for ( prop in orig ) {
jQuery.style( elem, prop, orig[ prop ] );
}
}); });
} }
anim.done(function() {
var prop;
dataPriv.remove( elem, "fxshow" ); // Per-property setup
for ( prop in orig ) { propTween = createTween( hidden ? dataShow[ prop ] : 0, prop, anim );
jQuery.style( elem, prop, orig[ prop ] ); if ( !( prop in dataShow ) ) {
} dataShow[ prop ] = propTween.start;
}); if ( hidden ) {
for ( prop in orig ) { propTween.end = propTween.start;
tween = createTween( hidden ? dataShow[ prop ] : 0, prop, anim ); propTween.start = prop === "width" || prop === "height" ? 1 : 0;
if ( !( prop in dataShow ) ) {
dataShow[ prop ] = tween.start;
if ( hidden ) {
tween.end = tween.start;
tween.start = prop === "width" || prop === "height" ? 1 : 0;
}
} }
} }
// If this is a noop like .hide().hide(), restore an overwritten display value
} else if ( (display === "none" ? defaultDisplay( elem.nodeName ) : display) === "inline" ) {
style.display = display;
} }
} }

12
test/data/testsuite.css
View File

@ -68,7 +68,8 @@ div.noopacity {
opacity: 0; opacity: 0;
} }
div.hidden { div.hidden,
span.hidden {
display: none; display: none;
} }
@ -116,19 +117,10 @@ div#fx-tests div.noback {
display: none; display: none;
} }
/* tests to ensure jQuery can determine the native display mode of elements
that have been set as display: none in stylesheets */
div#show-tests * { display: none; }
#nothiddendiv { font-size: 16px; } #nothiddendiv { font-size: 16px; }
#nothiddendivchild.em { font-size: 2em; } #nothiddendivchild.em { font-size: 2em; }
#nothiddendivchild.prct { font-size: 150%; } #nothiddendivchild.prct { font-size: 150%; }
/* 8099 changes to default styles are read correctly */
tt { display: none; }
sup { display: none; }
dfn { display: none; }
/* #9239 Attach a background to the body( avoid crashes in removing the test element in support ) */ /* #9239 Attach a background to the body( avoid crashes in removing the test element in support ) */
body, div { background: url(http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif) no-repeat -1000px 0; } body, div { background: url(http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif) no-repeat -1000px 0; }

179
test/unit/css.js
View File

@ -475,14 +475,14 @@ test("show(); hide()", function() {
hiddendiv = jQuery("div.hidden"); hiddendiv = jQuery("div.hidden");
hiddendiv.hide(); hiddendiv.hide();
equal( hiddendiv.css("display"), "none", "Non-detached div hidden" ); equal( hiddendiv.css("display"), "none", "Cascade-hidden div after hide()" );
hiddendiv.show(); hiddendiv.show();
equal( hiddendiv.css("display"), "block", "Pre-hidden div shown" ); equal( hiddendiv.css("display"), "none", "Show does not trump CSS cascade" );
div = jQuery("<div>").hide(); div = jQuery("<div>").hide();
equal( div.css("display"), "none", "Detached div hidden" ); equal( div.css("display"), "none", "Detached div hidden" );
div.appendTo("#qunit-fixture").show(); div.appendTo("#qunit-fixture").show();
equal( div.css("display"), "block", "Pre-hidden div shown" ); equal( div.css("display"), "block", "Initially-detached div after show()" );
}); });
@ -490,8 +490,8 @@ test("show();", function() {
expect( 18 ); expect( 18 );
var hiddendiv, div, pass, old, test; var hiddendiv, div, pass, old, test;
hiddendiv = jQuery("div.hidden"); hiddendiv = jQuery("div.hidden");
equal(jQuery.css( hiddendiv[0], "display"), "none", "hiddendiv is display: none"); equal(jQuery.css( hiddendiv[0], "display"), "none", "hiddendiv is display: none");
@ -512,8 +512,13 @@ test("show();", function() {
}); });
ok( pass, "Show" ); ok( pass, "Show" );
// #show-tests * is set display: none in CSS jQuery(
jQuery("#qunit-fixture").append("<div id='show-tests'><div><p><a href='#'></a></p><code></code><pre></pre><span></span></div><table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table><ul><li></li></ul></div><table id='test-table'></table>"); "<div id='show-tests'>" +
"<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
"<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>" +
"<ul><li></li></ul></div>" +
"<table id='test-table'></table>"
).appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
old = jQuery("#test-table").show().css("display") !== "table"; old = jQuery("#test-table").show().css("display") !== "table";
jQuery("#test-table").remove(); jQuery("#test-table").remove();
@ -545,129 +550,88 @@ test("show();", function() {
jQuery("<div>test</div> text <span>test</span>").hide().remove(); jQuery("<div>test</div> text <span>test</span>").hide().remove();
}); });
test("show() resolves correct default display #8099", function() {
expect(7);
var tt8099 = jQuery("<tt/>").appendTo("body"),
dfn8099 = jQuery("<dfn/>", { "html": "foo"}).appendTo("body");
equal( tt8099.css("display"), "none", "default display override for all tt" );
equal( tt8099.show().css("display"), "inline", "Correctly resolves display:inline" );
equal( jQuery("#foo").hide().show().css("display"), "block", "Correctly resolves display:block after hide/show" );
equal( tt8099.hide().css("display"), "none", "default display override for all tt" );
equal( tt8099.show().css("display"), "inline", "Correctly resolves display:inline" );
equal( dfn8099.css("display"), "none", "default display override for all dfn" );
equal( dfn8099.show().css("display"), "inline", "Correctly resolves display:inline" );
tt8099.remove();
dfn8099.remove();
});
test( "show() resolves correct default display for detached nodes", function(){ test( "show() resolves correct default display for detached nodes", function(){
expect( 13 ); expect( 16 );
var div, span, tr, trDisplay; var div, span, tr;
div = jQuery("<div class='hidden'>"); div = jQuery("<div class='hidden'>");
div.show().appendTo("#qunit-fixture"); div.show().appendTo("#qunit-fixture");
equal( div.css("display"), "block", "Make sure a detached, pre-hidden( through stylesheets ) div is visible." ); equal( div.css("display"), "none",
"A shown-while-detached div can be hidden by the CSS cascade" );
div = jQuery("<div style='display: none'>");
div.show().appendTo("#qunit-fixture");
equal( div.css("display"), "block", "Make sure a detached, pre-hidden( through inline style ) div is visible." );
span = jQuery("<span class='hidden'/>");
span.show().appendTo("#qunit-fixture");
equal( span.css("display"), "inline", "Make sure a detached, pre-hidden( through stylesheets ) span has default display." );
span = jQuery("<span style='display: inline'/>");
span.show().appendTo("#qunit-fixture");
equal( span.css("display"), "inline", "Make sure a detached, pre-hidden( through inline style ) span has default display." );
div = jQuery("<div><div class='hidden'></div></div>").children("div"); div = jQuery("<div><div class='hidden'></div></div>").children("div");
div.show().appendTo("#qunit-fixture"); div.show().appendTo("#qunit-fixture");
equal( div.css("display"), "block", "Make sure a detached, pre-hidden( through stylesheets ) div inside another visible div is visible." ); equal( div.css("display"), "none",
"A shown-while-detached div inside a visible div can be hidden by the CSS cascade" );
div = jQuery("<div><div style='display: none'></div></div>").children("div"); span = jQuery("<span class='hidden'/>");
div.show().appendTo("#qunit-fixture"); span.show().appendTo("#qunit-fixture");
equal( div.css("display"), "block", "Make sure a detached, pre-hidden( through inline style ) div inside another visible div is visible." ); equal( span.css("display"), "none",
"A shown-while-detached span can be hidden by the CSS cascade" );
div = jQuery("div.hidden"); div = jQuery("div.hidden");
div.detach().show(); div.detach().show();
equal( div.css("display"), "block", "Make sure a detached( through detach() ), pre-hidden div is visible." ); ok( !div[ 0 ].style.display,
"show() does not update inline style of a cascade-hidden-before-detach div" );
div.appendTo("#qunit-fixture");
equal( div.css("display"), "none",
"A shown-while-detached cascade-hidden div is hidden after attachment" );
div.remove(); div.remove();
span = jQuery("<span>"); span = jQuery("<span class='hidden'/>");
span.appendTo("#qunit-fixture").detach().show().appendTo("#qunit-fixture" ); span.appendTo("#qunit-fixture").detach().show().appendTo("#qunit-fixture");
equal( span.css("display"), "inline", "Make sure a detached( through detach() ), pre-hidden span has default display." ); equal( span.css("display"), "none",
"A shown-while-detached cascade-hidden span is hidden after attachment" );
span.remove(); span.remove();
div = jQuery("<div>");
div.show().appendTo("#qunit-fixture");
ok( !!div.get( 0 ).style.display, "Make sure not hidden div has a inline style." );
div.remove();
div = jQuery( document.createElement("div") ); div = jQuery( document.createElement("div") );
div.show().appendTo("#qunit-fixture"); div.show().appendTo("#qunit-fixture");
equal( div.css("display"), "block", "Make sure a pre-created element has default display." ); ok( !div[ 0 ].style.display, "A shown-while-detached div has no inline style" );
equal( div.css("display"), "block",
"A shown-while-detached div has default display after attachment" );
div.remove(); div.remove();
div = jQuery("<div style='display: none'>");
div.show();
equal( div[ 0 ].style.display, "",
"show() updates inline style of a detached inline-hidden div" );
div.appendTo("#qunit-fixture");
equal( div.css("display"), "block",
"A shown-while-detached inline-hidden div has default display after attachment" );
div = jQuery("<div><div style='display: none'></div></div>").children("div");
div.show().appendTo("#qunit-fixture");
equal( div.css("display"), "block",
"A shown-while-detached inline-hidden div inside a visible div has default display " +
"after attachment" );
span = jQuery("<span style='display: none'/>");
span.show();
equal( span[ 0 ].style.display, "",
"show() updates inline style of a detached inline-hidden span" );
span.appendTo("#qunit-fixture");
equal( span.css("display"), "inline",
"A shown-while-detached inline-hidden span has default display after attachment" );
div = jQuery("<div style='display: inline'/>"); div = jQuery("<div style='display: inline'/>");
div.show().appendTo("#qunit-fixture"); div.show().appendTo("#qunit-fixture");
equal( div.css("display"), "inline", "Make sure that element has same display when it was created." ); equal( div.css("display"), "inline",
"show() does not update inline style of a detached inline-visible div" );
div.remove(); div.remove();
tr = jQuery("<tr/>"); tr = jQuery("<tr/>");
jQuery("#table").append( tr ); jQuery("#table").append( tr );
trDisplay = tr.css( "display" );
tr.detach().hide().show(); tr.detach().hide().show();
equal( tr[ 0 ].style.display, trDisplay, "For detached tr elements, display should always be like for attached trs" ); ok( !tr[ 0 ].style.display, "Not-hidden detached tr elements have no inline style" );
tr.remove(); tr.remove();
span = jQuery("<span/>").hide().show(); span = jQuery("<span/>").hide().show();
equal( span[ 0 ].style.display, "inline", "For detached span elements, display should always be inline" ); ok( !span[ 0 ].style.display, "Not-hidden detached span elements have no inline style" );
span.remove(); span.remove();
}); });
test("show() resolves correct default display #10227", 4, function() {
var html = jQuery( document.documentElement ),
body = jQuery( "body" );
body.append( "<p class='ddisplay'>a<style>body{display:none}</style></p>" );
equal( body.css("display"), "none", "Initial display for body element: none" );
body.show();
equal( body.css("display"), "block", "Correct display for body element: block" );
body.append( "<p class='ddisplay'>a<style>html{display:none}</style></p>" );
equal( html.css("display"), "none", "Initial display for html element: none" );
html.show();
equal( html.css( "display" ), "block", "Correct display for html element: block" );
jQuery( ".ddisplay" ).remove();
});
test("show() resolves correct default display when iframe display:none #12904", function() {
expect(2);
var ddisplay = jQuery(
"<p id='ddisplay'>a<style>p{display:none}iframe{display:none !important}</style></p>"
).appendTo("body");
equal( ddisplay.css("display"), "none", "Initial display: none" );
ddisplay.show();
equal( ddisplay.css("display"), "block", "Correct display: block" );
ddisplay.remove();
});
test("toggle()", function() { test("toggle()", function() {
expect(9); expect(9);
var div, oldHide, var div, oldHide,
@ -1094,29 +1058,6 @@ asyncTest( "Clearing a Cloned Element's Style Shouldn't Clear the Original Eleme
window.setTimeout( start, 1000 ); window.setTimeout( start, 1000 );
}); });
asyncTest( "Make sure initialized display value for disconnected nodes is correct (#13310)", 4, function() {
var display = jQuery("#display").css("display"),
div = jQuery("<div/>");
equal( div.css( "display", "inline" ).hide().show().appendTo("body").css( "display" ), "inline", "Initialized display value has returned" );
div.remove();
div.css( "display", "none" ).hide();
equal( jQuery._data( div[ 0 ], "olddisplay" ), undefined, "olddisplay is undefined after hiding a detached and hidden element" );
div.remove();
div.css( "display", "inline-block" ).hide().appendTo("body").fadeIn(function() {
equal( div.css( "display" ), "inline-block", "Initialized display value has returned" );
div.remove();
start();
});
equal( jQuery._data( jQuery("#display").css( "display", "inline" ).hide()[ 0 ], "olddisplay" ), display,
"display: * !Important value should used as initialized display" );
jQuery._removeData( jQuery("#display")[ 0 ] );
});
test( "show() after hide() should always set display to initial value (#14750)", 1, function() { test( "show() after hide() should always set display to initial value (#14750)", 1, function() {
var div = jQuery( "<div />" ), var div = jQuery( "<div />" ),
fixture = jQuery( "#qunit-fixture" ); fixture = jQuery( "#qunit-fixture" );

261
test/unit/effects.js vendored
View File

@ -30,22 +30,13 @@ test("sanity check", function() {
equal( jQuery("#dl:visible, #qunit-fixture:visible, #foo:visible").length, 2, "QUnit state is correct for testing effects" ); equal( jQuery("#dl:visible, #qunit-fixture:visible, #foo:visible").length, 2, "QUnit state is correct for testing effects" );
}); });
test("show() basic", 2, function() { test("show() basic", 1, function() {
var div, var div = jQuery("<div>").hide().appendTo("#qunit-fixture").show();
hiddendiv = jQuery("div.hidden");
hiddendiv.hide().show();
equal( hiddendiv.css("display"), "block", "Make sure a pre-hidden div is visible." );
div = jQuery("<div>").hide().appendTo("#qunit-fixture").show();
equal( div.css("display"), "block", "Make sure pre-hidden divs show" ); equal( div.css("display"), "block", "Make sure pre-hidden divs show" );
// Clean up the detached node // Clean up the detached node
div.remove(); div.remove();
QUnit.expectJqData( this, hiddendiv, "olddisplay" );
}); });
test("show()", 27, function () { test("show()", 27, function () {
@ -94,8 +85,13 @@ test("show()", 27, function () {
// Tolerate data from show()/hide() // Tolerate data from show()/hide()
QUnit.expectJqData( this, div, "olddisplay" ); QUnit.expectJqData( this, div, "olddisplay" );
// #show-tests * is set display: none in CSS jQuery(
jQuery("#qunit-fixture").append("<div id='show-tests'><div><p><a href='#'></a></p><code></code><pre></pre><span></span></div><table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table><ul><li></li></ul></div><table id='test-table'></table>"); "<div id='show-tests'>" +
"<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
"<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>" +
"<ul><li></li></ul></div>" +
"<table id='test-table'></table>"
).appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
old = jQuery("#test-table").show().css("display") !== "table"; old = jQuery("#test-table").show().css("display") !== "table";
jQuery("#test-table").remove(); jQuery("#test-table").remove();
@ -130,13 +126,19 @@ test("show()", 27, function () {
}); });
test("show(Number) - other displays", function() { test("show(Number) - other displays", function() {
expect(15); expect(30);
// #show-tests * is set display: none in CSS jQuery(
jQuery("#qunit-fixture").append("<div id='show-tests'><div><p><a href='#'></a></p><code></code><pre></pre><span></span></div><table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table><ul><li></li></ul></div><table id='test-table'></table>"); "<div id='show-tests'>" +
"<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
"<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>" +
"<ul><li></li></ul></div>" +
"<table id='test-table'></table>"
).appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
var test, var test,
old = jQuery("#test-table").show().css("display") !== "table"; old = jQuery("#test-table").show().css("display") !== "table";
jQuery("#test-table").remove(); jQuery("#test-table").remove();
// Note: inline elements are expected to be inline-block // Note: inline elements are expected to be inline-block
@ -146,10 +148,10 @@ test("show(Number) - other displays", function() {
test = { test = {
"div" : "block", "div" : "block",
"p" : "block", "p" : "block",
"a" : "inline-block", "a" : "inline",
"code" : "inline-block", "code" : "inline",
"pre" : "block", "pre" : "block",
"span" : "inline-block", "span" : "inline",
"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",
@ -160,12 +162,26 @@ test("show(Number) - other displays", function() {
"li" : old ? "block" : "list-item" "li" : old ? "block" : "list-item"
}; };
jQuery.each(test, function(selector, expected) { jQuery.each( test, function( selector ) {
var elem = jQuery(selector, "#show-tests").show(1, function() { jQuery( selector, "#show-tests" ).show( 100 );
equal( elem.css("display"), expected, "Show using correct display type for " + selector ); });
this.clock.tick( 50 );
jQuery.each( test, function( selector, expected ) {
jQuery( selector, "#show-tests" ).each(function() {
equal(
jQuery( this ).css( "display" ),
expected === "inline" ? "inline-block" : expected,
"Correct display type during animation for " + selector
);
});
});
this.clock.tick( 50 );
jQuery.each( test, function( selector, expected ) {
jQuery( selector, "#show-tests" ).each(function() {
equal( jQuery( this ).css( "display" ), expected,
"Correct display type after animation for " + selector );
}); });
}); });
this.clock.tick( 10 );
jQuery("#show-tests").remove(); jQuery("#show-tests").remove();
}); });
@ -174,8 +190,8 @@ test("show(Number) - other displays", function() {
test("Persist correct display value", function() { test("Persist correct display value", function() {
expect(3); expect(3);
// #show-tests * is set display: none in CSS jQuery( "<div id='show-tests'><span style='position:absolute;'>foo</span></div>" )
jQuery("#qunit-fixture").append("<div id='show-tests'><span style='position:absolute;'>foo</span></div>"); .appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
var $span = jQuery("#show-tests span"), var $span = jQuery("#show-tests span"),
displayNone = $span.css("display"), displayNone = $span.css("display"),
@ -877,7 +893,7 @@ jQuery.each({
}, function( fn, f ) { }, function( fn, f ) {
jQuery.each({ jQuery.each({
"show": function( elem, prop ) { "show": function( elem, prop ) {
jQuery( elem ).hide( ).addClass( "wide" + prop ); jQuery( elem ).hide().addClass( "wide" + prop );
return "show"; return "show";
}, },
"hide": function( elem, prop ) { "hide": function( elem, prop ) {
@ -912,15 +928,15 @@ jQuery.each({
num = 0; num = 0;
// TODO: uncrowd this // TODO: uncrowd this
if ( t_h === "show" ) {num++;} if ( t_h === "show" ) { num++; }
if ( t_w === "show" ) {num++;} if ( t_w === "show" ) { num++; }
if ( t_w === "hide" || t_w === "show" ) {num++;} if ( t_w === "hide" || t_w === "show" ) { num++; }
if ( t_h === "hide" || t_h === "show" ) {num++;} if ( t_h === "hide" || t_h === "show" ) { num++; }
if ( t_o === "hide" || t_o === "show" ) {num++;} if ( t_o === "hide" || t_o === "show" ) { num++; }
if ( t_w === "hide" ) {num++;} if ( t_w === "hide" ) { num++; }
if ( t_o.constructor === Number ) {num += 2;} if ( t_o.constructor === Number ) { num += 2; }
if ( t_w.constructor === Number ) {num += 2;} if ( t_w.constructor === Number ) { num += 2; }
if ( t_h.constructor === Number ) {num +=2;} if ( t_h.constructor === Number ) { num += 2; }
expect( num ); expect( num );
@ -928,13 +944,13 @@ jQuery.each({
elem.animate(anim, 50); elem.animate(anim, 50);
jQuery.when( elem ).done(function( elem ) { jQuery.when( elem ).done(function( $elem ) {
var cur_o, cur_w, cur_h, old_h; var cur_o, cur_w, cur_h, old_h,
elem = $elem[ 0 ];
elem = elem[ 0 ];
if ( t_w === "show" ) { if ( t_w === "show" ) {
equal( elem.style.display, "block", "Showing, display should block: " + elem.style.display ); equal( $elem.css( "display" ), "block",
"Showing, display should block: " + elem.style.display );
} }
if ( t_w === "hide" || t_w === "show" ) { if ( t_w === "hide" || t_w === "show" ) {
@ -1498,7 +1514,7 @@ test( "User supplied callback called after show when fx off (#8892)", 2, functio
}); });
test( "animate should set display for disconnected nodes", function() { test( "animate should set display for disconnected nodes", function() {
expect( 18 ); expect( 20 );
var env = this, var env = this,
methods = { methods = {
@ -1510,42 +1526,40 @@ test( "animate should set display for disconnected nodes", function() {
show: [ 1 ], show: [ 1 ],
animate: [{ width: "show" }] animate: [{ width: "show" }]
}, },
$divTest = jQuery("<div>test</div>"),
// parentNode = null
$divEmpty = jQuery("<div/>"), $divEmpty = jQuery("<div/>"),
$divTest = jQuery("<div>test</div>"),
$divNone = jQuery("<div style='display: none;'/>"), $divNone = jQuery("<div style='display: none;'/>"),
$divInline = jQuery("<div style='display: inline;'/>"), $divInline = jQuery("<div style='display: inline;'/>"),
nullParentDisplay = $divEmpty.css("display"),
underFragmentDisplay = $divTest.css("display"),
clock = this.clock; clock = this.clock;
strictEqual( $divTest.show()[ 0 ].style.display, "block", "set display with show() for element with parentNode = document fragment" ); strictEqual( $divEmpty[ 0 ].parentNode, null, "Setup: element with null parentNode" );
strictEqual( $divEmpty.show()[ 0 ].style.display, "block", "set display with show() for element with parentNode = null" ); strictEqual( ($divTest[ 0 ].parentNode || {}).nodeType, 11, "Setup: element under fragment" );
strictEqual( $divNone.show()[ 0 ].style.display, "block", "show() should change display if it already set to none" );
strictEqual( $divInline.show()[ 0 ].style.display, "inline", "show() should not change display if it already set" ); strictEqual( $divEmpty.show()[ 0 ].style.display, "",
"set display with show() for element with null parentNode" );
strictEqual( $divTest.show()[ 0 ].style.display, "",
"set display with show() for element under fragment" );
strictEqual( $divNone.show()[ 0 ].style.display, "",
"show() should change display if it already set to none" );
strictEqual( $divInline.show()[ 0 ].style.display, "inline",
"show() should not change display if it already set" );
QUnit.expectJqData( env, $divTest[ 0 ], "olddisplay" );
QUnit.expectJqData( env, $divEmpty[ 0 ], "olddisplay" );
QUnit.expectJqData( env, $divNone[ 0 ], "olddisplay" ); QUnit.expectJqData( env, $divNone[ 0 ], "olddisplay" );
jQuery.each( methods, function( name, opt ) { jQuery.each( methods, function( name, opt ) {
jQuery.each([ jQuery.fn[ name ].apply( jQuery("<div/>"), opt.concat( [ function() {
strictEqual( jQuery( this ).css( "display" ), nullParentDisplay,
"." + name + " block with null parentNode" );
} ] ) );
// parentNode = document fragment jQuery.fn[ name ].apply( jQuery("<div>test</div>"), opt.concat( [ function() {
jQuery("<div>test</div>"), strictEqual( jQuery( this ).css( "display" ), underFragmentDisplay,
"." + name + " block under fragment" );
// parentNode = null } ] ) );
jQuery("<div/>")
], function() {
var callback = [function () {
strictEqual( this.style.display, "block", "set display to block with " + name );
QUnit.expectJqData( env, this, "olddisplay" );
}];
jQuery.fn[ name ].apply( this, opt.concat( callback ) );
});
}); });
clock.tick( 400 ); clock.tick( 400 );
}); });
test("Animation callback should not show animated element as :animated (#7157)", 1, function() { test("Animation callback should not show animated element as :animated (#7157)", 1, function() {
@ -2185,33 +2199,6 @@ test( "Respect display value on inline elements (#14824)", 2, function() {
clock.tick( 800 ); clock.tick( 800 );
}); });
test( "Animation should go to its end state if document.hidden = true", 1, function() {
var height;
if ( Object.defineProperty ) {
// Can't rewrite document.hidden property if its host property
try {
Object.defineProperty( document, "hidden", {
get: function() {
return true;
}
});
} catch ( e ) {}
} else {
document.hidden = true;
}
if ( document.hidden ) {
height = jQuery( "#qunit-fixture" ).animate({ height: 500 } ).height();
equal( height, 500, "Animation should happen immediately if document.hidden = true" );
jQuery( document ).removeProp( "hidden" );
} else {
ok( true, "Can't run the test since we can't reproduce correct environment for it" );
}
});
test( "jQuery.easing._default (gh-2218)", function() { test( "jQuery.easing._default (gh-2218)", function() {
expect( 2 ); expect( 2 );
@ -2288,4 +2275,92 @@ test( "jQuery.easing._default in Tween (gh-2218)", function() {
delete jQuery.easing.custom; delete jQuery.easing.custom;
}); });
test( "Display value is correct for disconnected nodes (trac-13310)", function() {
expect( 3 );
var div = jQuery("<div/>");
equal( div.css( "display", "inline" ).hide().show().appendTo("body").css( "display" ), "inline", "Initialized display value has returned" );
div.remove();
div.css( "display", "none" ).hide();
equal( jQuery._data( div[ 0 ], "olddisplay" ), undefined, "olddisplay is undefined after hiding a detached and hidden element" );
div.remove();
div.css( "display", "inline-block" ).hide().appendTo("body").fadeIn(function() {
equal( div.css( "display" ), "inline-block", "Initialized display value has returned" );
div.remove();
});
this.clock.tick( 1000 );
});
test( "Show/hide/toggle and display: inline", function() {
expect( 40 );
var clock = this.clock;
jQuery( "<span/><div style='display:inline' title='inline div'/>" ).each(function() {
var completed, interrupted,
N = 100,
fixture = jQuery( "#qunit-fixture" ),
$el = jQuery( this ),
kind = this.title || this.nodeName.toLowerCase();
// Animations allowed to complete
completed = jQuery.map( [
$el.clone().data({ call: "hide", done: "none" }).appendTo( fixture ).hide( N ),
$el.clone().data({ call: "toggle", done: "none" }).appendTo( fixture ).toggle( N ),
$el.clone().data({ call: "hide+show", done: "inline" }).appendTo( fixture )
.hide().show( N ),
$el.clone().data({ call: "hide+toggle", done: "inline" }).appendTo( fixture )
.hide().toggle( N )
], function( $clone ) { return $clone[ 0 ]; } );
// Animations not allowed to complete
interrupted = jQuery.map( [
$el.clone().data({ call: "hide+stop" }).appendTo( fixture ).hide( N ),
$el.clone().data({ call: "toggle+stop" }).appendTo( fixture ).toggle( N ),
$el.clone().data({ call: "hide+show+stop" }).appendTo( fixture ).hide().show( N ),
$el.clone().data({ call: "hide+toggle+stop" }).appendTo( fixture ).hide().toggle( N )
], function( $clone ) { return $clone[ 0 ]; } );
// All elements should be inline-block during the animation
clock.tick( N / 2 );
jQuery( completed ).each(function() {
var $el = jQuery( this ),
call = $el.data( "call" );
strictEqual( $el.css( "display" ), "inline-block", kind + " display during " + call );
});
// Interrupted elements should remain inline-block
jQuery( interrupted ).stop();
clock.tick( N / 2 );
jQuery( interrupted ).each(function() {
var $el = jQuery( this ),
call = $el.data( "call" );
strictEqual( $el.css( "display" ), "inline-block", kind + " display after " + call );
});
// Completed elements should not remain inline-block
clock.tick( N / 2 );
jQuery( completed ).each(function() {
var $el = jQuery( this ),
call = $el.data( "call" ),
display = $el.data( "done" );
strictEqual( $el.css( "display" ), display, kind + " display after " + call );
});
// A post-animation toggle should not make any element inline-block
completed = jQuery( completed.concat( interrupted ) );
completed.toggle( N / 2 );
clock.tick( N );
completed.each(function() {
var $el = jQuery( this ),
call = $el.data( "call" );
ok( $el.css( "display" ) !== "inline-block",
kind + " display is not inline-block after " + call + "+toggle" );
});
});
});
})(); })();