"./css/var/swap",
"./css/curCSS",
"./css/adjustCSS",
+ "./css/defaultDisplay",
"./css/addGetHookIf",
"./css/support",
- "./css/showHide",
+ "./data/var/dataPriv",
"./core/init",
"./core/ready",
"./selector" // contains
-], function( jQuery, pnum, access, rmargin, document, rcssNum, rnumnonpx, cssExpand,
- isHidden, getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, showHide ) {
+], function( jQuery, pnum, access, rmargin, document, rcssNum, rnumnonpx, cssExpand, isHidden,
+ getStyles, swap, curCSS, adjustCSS, defaultDisplay, addGetHookIf, support, dataPriv ) {
var
// except "table", "table-cell", or "table-caption"
// See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
rdisplayswap = /^(none|table(?!-c[ea]).+)/,
+
cssShow = { position: "absolute", visibility: "hidden", display: "block" },
cssNormalTransform = {
letterSpacing: "0",
) + "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( {
// Add in style property hooks for overriding the default
};
} );
-jQuery.cssHooks.marginLeft = addGetHookIf( support.reliableMarginLeft,
- function( elem, computed ) {
- if ( computed ) {
- return ( parseFloat( curCSS( elem, "marginLeft" ) ) ||
- elem.getBoundingClientRect().left -
- swap( elem, { marginLeft: 0 }, function() {
- return elem.getBoundingClientRect().left;
- } )
- ) + "px";
- }
- }
-);
-
// These hooks are used by animate to expand properties
jQuery.each( {
margin: "",
--- /dev/null
+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;
+} );
"./core",
"./var/document",
"./var/rcssNum",
- "./var/rnotwhite",
"./css/var/cssExpand",
"./css/var/isHidden",
- "./css/var/swap",
"./css/adjustCSS",
+ "./css/defaultDisplay",
"./data/var/dataPriv",
- "./css/showHide",
"./core/init",
+ "./effects/Tween",
"./queue",
- "./deferred",
- "./traversing",
- "./manipulation",
"./css",
- "./effects/Tween"
-], function( jQuery, document, rcssNum, rnotwhite, cssExpand, isHidden, swap,
- adjustCSS, dataPriv, showHide ) {
+ "./deferred",
+ "./traversing"
+], function( jQuery, document, rcssNum, cssExpand,
+ isHidden, adjustCSS, defaultDisplay, dataPriv ) {
var
fxNow, timerId,
function defaultPrefilter( elem, props, opts ) {
/* jshint validthis: true */
- var prop, value, toggle, hooks, oldfire, propTween, restoreDisplay, display,
- isBox = "width" in props || "height" in props,
+ var prop, value, toggle, tween, hooks, oldfire, display, checkDisplay,
anim = this,
orig = {},
style = elem.style,
hidden = elem.nodeType && isHidden( elem ),
dataShow = dataPriv.get( elem, "fxshow" );
- // Queue-skipping animations hijack the fx hooks
+ // Handle queue: false promises
if ( !opts.queue ) {
hooks = jQuery._queueHooks( elem, "fx" );
if ( hooks.unqueued == null ) {
} );
}
- // Detect show/hide animations
- for ( prop in props ) {
- value = props[ prop ];
- if ( rfxtypes.test( value ) ) {
- delete props[ prop ];
- 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 ) {
+ // Height/width overflow pass
+ if ( elem.nodeType === 1 && ( "height" in props || "width" in props ) ) {
- // Support: IE 9 - 11
- // Record all 3 overflow attributes because IE does not infer the shorthand
- // from identically-valued overflowX and overflowY
+ // Make sure that nothing sneaks out
+ // Record all 3 overflow attributes because IE9-10 do not
+ // change the overflow attribute when overflowX and
+ // overflowY are set to the same value
opts.overflow = [ style.overflow, style.overflowX, style.overflowY ];
- // Identify a display type, preferring old show/hide data over the CSS cascade
- restoreDisplay = dataShow && dataShow.display;
- if ( restoreDisplay == null ) {
- restoreDisplay = dataPriv.get( elem, "display" );
- }
+ // Set display property to inline-block for height/width
+ // animations on inline elements that are having width/height animated
display = jQuery.css( elem, "display" );
- if ( display === "none" ) {
- display = restoreDisplay || swap( elem, { "display": "" }, function() {
- return jQuery.css( elem, "display" );
- } );
- }
- // Animate inline elements as inline-block
- if ( display === "inline" || display === "inline-block" && restoreDisplay != null ) {
- if ( jQuery.css( elem, "float" ) === "none" ) {
-
- // Restore the original display value at the end of pure show/hide animations
- if ( !propTween ) {
- anim.done( function() {
- style.display = restoreDisplay;
- } );
- if ( restoreDisplay == null ) {
- display = style.display;
- restoreDisplay = display === "none" ? "" : display;
- }
- }
- style.display = "inline-block";
- }
+ // Test default display if display is currently "none"
+ checkDisplay = display === "none" ?
+ dataPriv.get( elem, "olddisplay" ) || defaultDisplay( elem.nodeName ) : display;
+
+ if ( checkDisplay === "inline" && jQuery.css( elem, "float" ) === "none" ) {
+ style.display = "inline-block";
}
}
} );
}
- // Implement show/hide animations
- propTween = false;
- for ( prop in orig ) {
+ // show/hide pass
+ for ( prop in props ) {
+ value = props[ prop ];
+ if ( rfxtypes.exec( value ) ) {
+ delete props[ prop ];
+ toggle = toggle || value === "toggle";
+ if ( value === ( hidden ? "hide" : "show" ) ) {
- // General show/hide setup for this element animation
- if ( !propTween ) {
- if ( dataShow ) {
- if ( "hidden" in dataShow ) {
- hidden = dataShow.hidden;
+ // If there is dataShow left over from a stopped hide or show
+ // and we are going to proceed with show, we should pretend to be hidden
+ if ( value === "show" && dataShow && dataShow[ prop ] !== undefined ) {
+ hidden = true;
+ } else {
+ continue;
}
- } else {
- dataShow = dataPriv.access( elem, "fxshow", { display: restoreDisplay } );
}
+ orig[ prop ] = dataShow && dataShow[ prop ] || jQuery.style( elem, prop );
- // Store hidden/visible for toggle so `.stop().toggle()` "reverses"
- if ( toggle ) {
- dataShow.hidden = !hidden;
- }
+ // Any non-fx value stops us from restoring the original display value
+ } else {
+ display = undefined;
+ }
+ }
- // Show elements before animating them
- if ( hidden ) {
- showHide( [ elem ], true );
+ if ( !jQuery.isEmptyObject( orig ) ) {
+ if ( dataShow ) {
+ if ( "hidden" in dataShow ) {
+ hidden = dataShow.hidden;
}
+ } else {
+ dataShow = dataPriv.access( elem, "fxshow", {} );
+ }
- /* jshint -W083 */
+ // Store state if its toggle - enables .stop().toggle() to "reverse"
+ if ( toggle ) {
+ dataShow.hidden = !hidden;
+ }
+ if ( hidden ) {
+ jQuery( elem ).show();
+ } else {
anim.done( function() {
-
- // 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 ] );
- }
+ jQuery( elem ).hide();
} );
}
+ anim.done( function() {
+ var prop;
- // Per-property setup
- propTween = createTween( hidden ? dataShow[ prop ] : 0, prop, anim );
- if ( !( prop in dataShow ) ) {
- dataShow[ prop ] = propTween.start;
- if ( hidden ) {
- propTween.end = propTween.start;
- propTween.start = prop === "width" || prop === "height" ? 1 : 0;
+ dataPriv.remove( elem, "fxshow" );
+ for ( prop in orig ) {
+ jQuery.style( elem, prop, orig[ prop ] );
+ }
+ } );
+ for ( prop in orig ) {
+ tween = createTween( hidden ? dataShow[ prop ] : 0, prop, anim );
+
+ 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;
}
}
for ( ; index < length ; index++ ) {
result = Animation.prefilters[ index ].call( animation, elem, props, animation.opts );
if ( result ) {
- if ( jQuery.isFunction( result.stop ) ) {
- jQuery._queueHooks( animation.elem, animation.opts.queue ).stop =
- jQuery.proxy( result.stop, result );
- }
return result;
}
}
}
jQuery.Animation = jQuery.extend( Animation, {
-
tweeners: {
"*": [ function( prop, value ) {
var tween = this.createTween( prop, value );
callback = props;
props = [ "*" ];
} else {
- props = props.match( rnotwhite );
+ props = props.split( " " );
}
var prop,
opacity: 0;
}
-div.hidden,
-span.hidden {
+div.hidden {
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; }
#nothiddendivchild.em { font-size: 2em; }
#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 ) */
body, div { background: url(http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif) no-repeat -1000px 0; }
hiddendiv = jQuery( "div.hidden" );
hiddendiv.hide();
- assert.equal( hiddendiv.css( "display" ), "none", "Cascade-hidden div after hide()" );
+
+ assert.equal( hiddendiv.css( "display" ), "none", "Non-detached div hidden" );
hiddendiv.show();
- assert.equal( hiddendiv.css( "display" ), "none", "Show does not trump CSS cascade" );
+ assert.equal( hiddendiv.css( "display" ), "block", "Pre-hidden div shown" );
div = jQuery( "<div>" ).hide();
assert.equal( div.css( "display" ), "none", "Detached div hidden" );
div.appendTo( "#qunit-fixture" ).show();
- assert.equal( div.css( "display" ), "block", "Initially-detached div after show()" );
+ assert.equal( div.css( "display" ), "block", "Pre-hidden div shown" );
} );
assert.expect( 18 );
- var hiddendiv, div, pass, old, test;
- hiddendiv = jQuery( "div.hidden" );
+ var hiddendiv, div, pass, old, test;
+ hiddendiv = jQuery( "div.hidden" );
assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "none", "hiddendiv is display: none" );
} );
assert.ok( pass, "Show" );
- jQuery(
- "<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" );
+ // #show-tests * is set display: none in CSS
+ 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>" );
old = jQuery( "#test-table" ).show().css( "display" ) !== "table";
jQuery( "#test-table" ).remove();
} );
QUnit.test( "show() resolves correct default display for detached nodes", function( assert ) {
- assert.expect( 16 );
+ assert.expect( 13 );
- var div, span, tr;
+ var div, span, tr, trDisplay;
div = jQuery( "<div class='hidden'>" );
div.show().appendTo( "#qunit-fixture" );
- assert.equal( div.css( "display" ), "none",
- "A shown-while-detached div can be hidden by the CSS cascade" );
+ assert.equal( div.css( "display" ), "block", "Make sure a detached, pre-hidden( through stylesheets ) div is visible." );
- div = jQuery( "<div><div class='hidden'></div></div>" ).children( "div" );
+ div = jQuery( "<div style='display: none'>" );
div.show().appendTo( "#qunit-fixture" );
- assert.equal( div.css( "display" ), "none",
- "A shown-while-detached div inside a visible div can be hidden by the CSS cascade" );
+ assert.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" );
- assert.equal( span.css( "display" ), "none",
- "A shown-while-detached span can be hidden by the CSS cascade" );
+ assert.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" );
+ assert.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.show().appendTo( "#qunit-fixture" );
+ assert.equal( div.css( "display" ), "block", "Make sure a detached, pre-hidden( through stylesheets ) div inside another visible div is visible." );
+
+ div = jQuery( "<div><div style='display: none'></div></div>" ).children( "div" );
+ div.show().appendTo( "#qunit-fixture" );
+ assert.equal( div.css( "display" ), "block", "Make sure a detached, pre-hidden( through inline style ) div inside another visible div is visible." );
div = jQuery( "div.hidden" );
div.detach().show();
- assert.ok( !div[ 0 ].style.display,
- "show() does not update inline style of a cascade-hidden-before-detach div" );
- div.appendTo( "#qunit-fixture" );
- assert.equal( div.css( "display" ), "none",
- "A shown-while-detached cascade-hidden div is hidden after attachment" );
+
+ assert.equal( div.css( "display" ), "block", "Make sure a detached( through detach() ), pre-hidden div is visible." );
div.remove();
- span = jQuery( "<span class='hidden'/>" );
+ span = jQuery( "<span>" );
span.appendTo( "#qunit-fixture" ).detach().show().appendTo( "#qunit-fixture" );
- assert.equal( span.css( "display" ), "none",
- "A shown-while-detached cascade-hidden span is hidden after attachment" );
+ assert.equal( span.css( "display" ), "inline", "Make sure a detached( through detach() ), pre-hidden span has default display." );
span.remove();
- div = jQuery( document.createElement( "div" ) );
+ div = jQuery( "<div>" );
div.show().appendTo( "#qunit-fixture" );
- assert.ok( !div[ 0 ].style.display, "A shown-while-detached div has no inline style" );
- assert.equal( div.css( "display" ), "block",
- "A shown-while-detached div has default display after attachment" );
+ assert.ok( !!div.get( 0 ).style.display, "Make sure not hidden div has a inline style." );
div.remove();
- div = jQuery( "<div style='display: none'>" );
- div.show();
- assert.equal( div[ 0 ].style.display, "",
- "show() updates inline style of a detached inline-hidden div" );
- div.appendTo( "#qunit-fixture" );
- assert.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 = jQuery( document.createElement( "div" ) );
div.show().appendTo( "#qunit-fixture" );
- assert.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();
- assert.equal( span[ 0 ].style.display, "",
- "show() updates inline style of a detached inline-hidden span" );
- span.appendTo( "#qunit-fixture" );
- assert.equal( span.css( "display" ), "inline",
- "A shown-while-detached inline-hidden span has default display after attachment" );
+ assert.equal( div.css( "display" ), "block", "Make sure a pre-created element has default display." );
+ div.remove();
div = jQuery( "<div style='display: inline'/>" );
div.show().appendTo( "#qunit-fixture" );
- assert.equal( div.css( "display" ), "inline",
- "show() does not update inline style of a detached inline-visible div" );
+ assert.equal( div.css( "display" ), "inline", "Make sure that element has same display when it was created." );
div.remove();
tr = jQuery( "<tr/>" );
jQuery( "#table" ).append( tr );
+ trDisplay = tr.css( "display" );
tr.detach().hide().show();
- assert.ok( !tr[ 0 ].style.display, "Not-hidden detached tr elements have no inline style" );
+ assert.equal( tr[ 0 ].style.display, trDisplay, "For detached tr elements, display should always be like for attached trs" );
tr.remove();
span = jQuery( "<span/>" ).hide().show();
- assert.ok( !span[ 0 ].style.display, "Not-hidden detached span elements have no inline style" );
+ assert.equal( span[ 0 ].style.display, "inline", "For detached span elements, display should always be inline" );
span.remove();
} );
div.remove();
} );
-QUnit.test( "toggle()", function( assert ) {
+QUnit.test( "show() resolves correct default display #10227", 4, function( assert ) {
+ var html = jQuery( document.documentElement ),
+ body = jQuery( "body" );
+
+ body.append( "<p class='ddisplay'>a<style>body{display:none}</style></p>" );
+
+ assert.equal( body.css( "display" ), "none", "Initial display for body element: none" );
+
+ body.show();
+ assert.equal( body.css( "display" ), "block", "Correct display for body element: block" );
+
+ body.append( "<p class='ddisplay'>a<style>html{display:none}</style></p>" );
+
+ assert.equal( html.css( "display" ), "none", "Initial display for html element: none" );
+
+ html.show();
+ assert.equal( html.css( "display" ), "block", "Correct display for html element: block" );
+
+ jQuery( ".ddisplay" ).remove();
+} );
+QUnit.test( "show() resolves correct default display when iframe display:none #12904", function( assert ) {
+ assert.expect( 2 );
+
+ var ddisplay = jQuery(
+ "<p id='ddisplay'>a<style>p{display:none}iframe{display:none !important}</style></p>"
+ ).appendTo( "body" );
+
+ assert.equal( ddisplay.css( "display" ), "none", "Initial display: none" );
+
+ ddisplay.show();
+ assert.equal( ddisplay.css( "display" ), "block", "Correct display: block" );
+
+ ddisplay.remove();
+} );
+
+QUnit.test( "toggle()", function( assert ) {
assert.expect( 9 );
+
var div, oldHide,
x = jQuery( "#foo" );
assert.equal( $div.css( "marginRight" ), "0px",
"marginRight correctly calculated with a width and display block" );
- $div.css({
+ $div.css( {
position: "absolute",
top: 0,
left: 0,
width: "100px"
- });
- $child.css({
+ } );
+ $child.css( {
width: "50px",
margin: "auto"
- });
+ } );
assert.equal( $child.css( "marginLeft" ), "25px", "auto margins are computed to pixels" );
-});
+} );
QUnit.test( "box model properties incorrectly returning % instead of px, see #10639 and #12088", function( assert ) {
assert.expect( 2 );
assert.t( "Is Visible", "#qunit-fixture div:visible:lt(2)", [ "foo", "nothiddendiv" ] );
assert.t( "Is Not Hidden", "#qunit-fixture:hidden", [] );
- assert.t( "Is Hidden", "#form input:hidden", [ "hidden1","hidden2" ] );
+ assert.t( "Is Hidden", "#form input:hidden", [ "hidden1", "hidden2" ] );
$a = jQuery( "<a href='#'><h1>Header</h1></a>" ).appendTo( "#qunit-fixture" );
assert.ok( $a.is( ":visible" ), "Anchor tag with flow content is visible (gh-2227)" );
name: "backgroundAttachment",
value: [ "fixed" ],
expected: [ "scroll" ]
- },{
+ }, {
name: "backgroundColor",
value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ],
expected: [ "transparent" ]
}
);
+QUnit.test( "Make sure initialized display value for disconnected nodes is correct (#13310)", 4, function( assert ) {
+ var done = assert.async();
+
+ var display = jQuery( "#display" ).css( "display" ),
+ div = jQuery( "<div/>" );
+
+ assert.equal( div.css( "display", "inline" ).hide().show().appendTo( "body" ).css( "display" ), "inline", "Initialized display value has returned" );
+ div.remove();
+
+ div.css( "display", "none" ).hide();
+ assert.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() {
+ assert.equal( div.css( "display" ), "inline-block", "Initialized display value has returned" );
+ div.remove();
+
+ done();
+ } );
+
+ assert.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 ] );
+} );
+
QUnit.test( "show() after hide() should always set display to initial value (#14750)", function( assert ) {
assert.expect( 1 );
assert.equal( elemStyle[ "undefined" ], undefined, "Nothing writes to node.style.undefined" );
} );
- QUnit.test( "Don't detect fake set properties on a node when caching the prefixed version", function( assert ) {
- assert.expect( 1 );
+ QUnit.test( "Don't detect fake set properties on a node when caching the prefixed version",
+ function( assert ) {
+ assert.expect( 1 );
- var elem = jQuery( "<div/>" ),
- style = elem[ 0 ].style;
- style.MozFakeProperty = "old value";
- elem.css( "fakeProperty", "new value" );
+
var elem = jQuery( "<div/>" ),
+ style = elem[ 0 ].style;
+ style.MozFakeProperty = "old value";
+ elem.css( "fakeProperty", "new value" );
- assert.equal( style.MozFakeProperty, "old value", "Fake prefixed property is not cached" );
- } );
+ assert.equal( style.MozFakeProperty, "old value", "Fake prefixed property is not cached" );
+ }
+ );
} )();
} );
QUnit.test( "show() basic", function( assert ) {
- assert.expect( 1 );
+ assert.expect( 2 );
+
+ var div,
+ hiddendiv = jQuery("div.hidden");
+
+ hiddendiv.hide().show();
+
+ assert.equal( hiddendiv.css("display"), "block", "Make sure a pre-hidden div is visible." );
- var div = jQuery( "<div>" ).hide().appendTo( "#qunit-fixture" ).show();
+ div = jQuery("<div>").hide().appendTo("#qunit-fixture").show();
assert.equal( div.css( "display" ), "block", "Make sure pre-hidden divs show" );
// Tolerate data from show()/hide()
assert.expectJqData( this, div, "olddisplay" );
- jQuery(
- "<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" );
+ // #show-tests * is set display: none in CSS
+ 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>");
old = jQuery( "#test-table" ).show().css( "display" ) !== "table";
jQuery( "#test-table" ).remove();
} );
QUnit.test( "show(Number) - other displays", function( assert ) {
- assert.expect( 30 );
+ assert.expect( 15 );
- jQuery(
- "<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" );
+ // #show-tests * is set display: none in CSS
+ 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>");
var test,
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
// because we're showing width/height
// Can't animate width/height inline
// See #14344
test = {
- "div": "block",
- "p": "block",
- "a": "inline",
- "code": "inline",
- "pre": "block",
- "span": "inline",
- "table": old ? "block" : "table",
- "thead": old ? "block" : "table-header-group",
- "tbody": old ? "block" : "table-row-group",
- "tr": old ? "block" : "table-row",
- "th": old ? "block" : "table-cell",
- "td": old ? "block" : "table-cell",
- "ul": "block",
- "li": old ? "block" : "list-item"
+ "div" : "block",
+ "p" : "block",
+ "a" : "inline-block",
+ "code" : "inline-block",
+ "pre" : "block",
+ "span" : "inline-block",
+ "table" : old ? "block" : "table",
+ "thead" : old ? "block" : "table-header-group",
+ "tbody" : old ? "block" : "table-row-group",
+ "tr" : old ? "block" : "table-row",
+ "th" : old ? "block" : "table-cell",
+ "td" : old ? "block" : "table-cell",
+ "ul" : "block",
+ "li" : old ? "block" : "list-item"
};
- jQuery.each( test, function( selector ) {
- jQuery( selector, "#show-tests" ).show( 100 );
- } );
- this.clock.tick( 50 );
- jQuery.each( test, function( selector, expected ) {
- jQuery( selector, "#show-tests" ).each( function() {
- assert.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() {
- assert.equal( jQuery( this ).css( "display" ), expected,
- "Correct display type after animation for " + selector );
- } );
- } );
+ jQuery.each(test, function(selector, expected) {
+ var elem = jQuery(selector, "#show-tests").show(1, function() {
+ assert.equal( elem.css("display"), expected, "Show using correct display type for " + selector );
+ });
+ });
+ this.clock.tick( 10 );
jQuery( "#show-tests" ).remove();
} );
QUnit.test( "Persist correct display value", function( assert ) {
assert.expect( 3 );
- jQuery( "<div id='show-tests'><span style='position:absolute;'>foo</span></div>" )
- .appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
+ // #show-tests * is set display: none in CSS
+ jQuery("#qunit-fixture").append("<div id='show-tests'><span style='position:absolute;'>foo</span></div>");
var $span = jQuery( "#show-tests span" ),
displayNone = $span.css( "display" ),
}, function( fn, f ) {
jQuery.each( {
"show": function( elem, prop ) {
- jQuery( elem ).hide().addClass( "wide" + prop );
+ jQuery( elem ).hide( ).addClass( "wide" + prop );
return "show";
},
"hide": function( elem, prop ) {
num = 0;
// TODO: uncrowd this
- if ( t_h === "show" ) { num++; }
- if ( t_w === "show" ) { num++; }
- if ( t_w === "hide" || t_w === "show" ) { num++; }
- if ( t_h === "hide" || t_h === "show" ) { num++; }
- if ( t_o === "hide" || t_o === "show" ) { num++; }
- if ( t_w === "hide" ) { num++; }
- if ( t_o.constructor === Number ) { num += 2; }
- if ( t_w.constructor === Number ) { num += 2; }
- if ( t_h.constructor === Number ) { num += 2; }
+ if ( t_h === "show" ) {num++;}
+ if ( t_w === "show" ) {num++;}
+ if ( t_w === "hide" || t_w === "show" ) {num++;}
+ if ( t_h === "hide" || t_h === "show" ) {num++;}
+ if ( t_o === "hide" || t_o === "show" ) {num++;}
+ if ( t_w === "hide" ) {num++;}
+ if ( t_o.constructor === Number ) {num += 2;}
+ if ( t_w.constructor === Number ) {num += 2;}
+ if ( t_h.constructor === Number ) {num +=2;}
assert.expect( num );
elem.animate( anim, 50 );
- jQuery.when( elem ).done( function( $elem ) {
- var cur_o, cur_w, cur_h, old_h,
- elem = $elem[ 0 ];
+ jQuery.when( elem ).done(function( elem ) {
+ var cur_o, cur_w, cur_h, old_h;
+
+ elem = elem[ 0 ];
if ( t_w === "show" ) {
- assert.equal( $elem.css( "display" ), "block",
- "Showing, display should block: " + elem.style.display );
+ assert.equal( elem.style.display, "block", "Showing, display should block: " + elem.style.display );
}
if ( t_w === "hide" || t_w === "show" ) {
} );
QUnit.test( "animate should set display for disconnected nodes", function( assert ) {
- assert.expect( 20 );
+ assert.expect( 18 );
var env = this,
methods = {
show: [ 1 ],
animate: [ { width: "show" } ]
},
- $divEmpty = jQuery( "<div/>" ),
- $divTest = jQuery( "<div>test</div>" ),
- $divNone = jQuery( "<div style='display: none;'/>" ),
- $divInline = jQuery( "<div style='display: inline;'/>" ),
- nullParentDisplay = $divEmpty.css( "display" ),
- underFragmentDisplay = $divTest.css( "display" ),
+ $divTest = jQuery("<div>test</div>"),
+ // parentNode = null
+ $divEmpty = jQuery("<div/>"),
+ $divNone = jQuery("<div style='display: none;'/>"),
+ $divInline = jQuery("<div style='display: inline;'/>"),
clock = this.clock;
- assert.strictEqual( $divEmpty[ 0 ].parentNode, null, "Setup: element with null parentNode" );
- assert.strictEqual( ( $divTest[ 0 ].parentNode || {} ).nodeType, 11, "Setup: element under fragment" );
-
- assert.strictEqual( $divEmpty.show()[ 0 ].style.display, "",
- "set display with show() for element with null parentNode" );
- assert.strictEqual( $divTest.show()[ 0 ].style.display, "",
- "set display with show() for element under fragment" );
- assert.strictEqual( $divNone.show()[ 0 ].style.display, "",
- "show() should change display if it already set to none" );
- assert.strictEqual( $divInline.show()[ 0 ].style.display, "inline",
- "show() should not change display if it already set" );
+ assert.strictEqual( $divTest.show()[ 0 ].style.display, "block", "set display with show() for element with parentNode = document fragment" );
+ assert.strictEqual( $divEmpty.show()[ 0 ].style.display, "block", "set display with show() for element with parentNode = null" );
+ assert.strictEqual( $divNone.show()[ 0 ].style.display, "block", "show() should change display if it already set to none" );
+ assert.strictEqual( $divInline.show()[ 0 ].style.display, "inline", "show() should not change display if it already set" );
+ assert.expectJqData( env, $divTest[ 0 ], "olddisplay" );
+ assert.expectJqData( env, $divEmpty[ 0 ], "olddisplay" );
assert.expectJqData( env, $divNone[ 0 ], "olddisplay" );
jQuery.each( methods, function( name, opt ) {
- jQuery.fn[ name ].apply( jQuery( "<div/>" ), opt.concat( [ function() {
- assert.strictEqual( jQuery( this ).css( "display" ), nullParentDisplay,
- "." + name + " block with null parentNode" );
- } ] ) );
+ jQuery.each([
- jQuery.fn[ name ].apply( jQuery( "<div>test</div>" ), opt.concat( [ function() {
- assert.strictEqual( jQuery( this ).css( "display" ), underFragmentDisplay,
- "." + name + " block under fragment" );
- } ] ) );
- } );
- clock.tick( 400 );
+ // parentNode = document fragment
+ jQuery("<div>test</div>"),
+
+ // parentNode = null
+ jQuery("<div/>")
+
+ ], function() {
+ var callback = [function () {
+ assert.strictEqual( this.style.display, "block", "set display to block with " + name );
+
+ assert.expectJqData( env, this, "olddisplay" );
+
+ }];
+ jQuery.fn[ name ].apply( this, opt.concat( callback ) );
+ });
+ });
+ clock.tick( 400 );
} );
QUnit[ jQuery.find.compile ? "test" : "skip" ]( "Animation callback should not show animated element as :animated (#7157)", function( assert ) {
clock.tick( 800 );
} );
+QUnit.test( "Animation should go to its end state if document.hidden = true", function(assert) {
+ assert.expect(1);
+
+ 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();
+
+ assert.equal( height, 500, "Animation should happen immediately if document.hidden = true" );
+ jQuery( document ).removeProp( "hidden" );
+
+ } else {
+ assert.ok( true, "Can't run the test since we can't reproduce correct environment for it" );
+ }
+});
+
QUnit.test( "jQuery.easing._default (gh-2218)", function( assert ) {
assert.expect( 2 );
delete jQuery.easing.custom;
} );
-QUnit.test( "Display value is correct for disconnected nodes (trac-13310)", function( assert ) {
- assert.expect( 3 );
-
- var div = jQuery( "<div/>" );
-
- assert.equal( div.css( "display", "inline" ).hide().show().appendTo( "body" ).css( "display" ), "inline", "Initialized display value has returned" );
- div.remove();
-
- div.css( "display", "none" ).hide();
- assert.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() {
- assert.equal( div.css( "display" ), "inline-block", "Initialized display value has returned" );
- div.remove();
- } );
- this.clock.tick( 1000 );
-} );
-
-QUnit.test( "Show/hide/toggle and display: inline", function( assert ) {
- assert.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" );
- assert.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" );
- assert.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" );
- assert.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" );
- assert.ok( $el.css( "display" ) !== "inline-block",
- kind + " display is not inline-block after " + call + "+toggle" );
- } );
- } );
-} );
-
} )();
projects / jquery.git / commitdiff