aboutsummaryrefslogtreecommitdiffstats
path: root/test/unit
diff options
context:
space:
mode:
authorRichard Gibson <richard.gibson@gmail.com>2015-04-02 16:57:33 -0400
committerRichard Gibson <richard.gibson@gmail.com>2015-05-11 13:01:13 -0400
commit9df8bd205ab78308c34af70c934c42175e560e86 (patch)
tree4ad0faa80690df471d3b5edb3d0246a41ee9fc9a /test/unit
parentd18b64578859a6c28e2d4b92e558193f9db9b1d4 (diff)
downloadjquery-9df8bd205ab78308c34af70c934c42175e560e86.tar.gz
jquery-9df8bd205ab78308c34af70c934c42175e560e86.zip
CSS: Ignore the CSS cascade in show()/hide()/etc.
Fixes gh-1767 Fixes gh-2071 Closes gh-2180 (cherry picked from commit 86419b10bfa5e3b71a7d416288ab806d47a31d1f) Conflicts: src/css.js src/css/defaultDisplay.js src/effects.js test/data/testsuite.css test/unit/css.js test/unit/effects.js
Diffstat (limited to 'test/unit')
-rw-r--r--test/unit/css.js183
-rw-r--r--test/unit/dimensions.js12
-rw-r--r--test/unit/effects.js280
3 files changed, 244 insertions, 231 deletions
diff --git a/test/unit/css.js b/test/unit/css.js
index 7f4addded..9e7949f70 100644
--- a/test/unit/css.js
+++ b/test/unit/css.js
@@ -521,14 +521,14 @@ test("show(); hide()", function() {
hiddendiv = jQuery("div.hidden");
hiddendiv.hide();
- equal( hiddendiv.css("display"), "none", "Non-detached div hidden" );
+ equal( hiddendiv.css("display"), "none", "Cascade-hidden div after hide()" );
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();
equal( div.css("display"), "none", "Detached div hidden" );
div.appendTo("#qunit-fixture").show();
- equal( div.css("display"), "block", "Pre-hidden div shown" );
+ equal( div.css("display"), "block", "Initially-detached div after show()" );
});
@@ -537,7 +537,7 @@ test("show();", function() {
expect( 18 );
var hiddendiv, div, pass, test;
- hiddendiv = jQuery("div.hidden");
+ hiddendiv = jQuery("div.hidden");
equal(jQuery.css( hiddendiv[0], "display"), "none", "hiddendiv is display: none");
@@ -558,8 +558,15 @@ test("show();", function() {
});
ok( pass, "Show" );
- // #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>");
+ 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" );
+
+ jQuery("#test-table").remove();
test = {
"div" : "block",
@@ -588,135 +595,88 @@ test("show();", function() {
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(){
- expect( 13 );
+ expect( 16 );
- var div, span, tr, trDisplay;
+ var div, span, tr;
div = jQuery("<div class='hidden'>");
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 = jQuery("<div><div class='hidden'></div></div>").children("div");
div.show().appendTo("#qunit-fixture");
- equal( div.css("display"), "block", "Make sure a detached, pre-hidden( through inline style ) div is visible." );
+ equal( div.css("display"), "none",
+ "A shown-while-detached div inside a visible div can be hidden by the CSS cascade" );
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.show().appendTo("#qunit-fixture");
- 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");
- 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.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();
- span = jQuery("<span>");
- 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." );
+ span = jQuery("<span class='hidden'/>");
+ span.appendTo("#qunit-fixture").detach().show().appendTo("#qunit-fixture");
+ equal( span.css("display"), "none",
+ "A shown-while-detached cascade-hidden span is hidden after attachment" );
span.remove();
- div = jQuery("<div>");
+ div = jQuery( document.createElement("div") );
div.show().appendTo("#qunit-fixture");
- ok( !!div.get( 0 ).style.display, "Make sure not hidden div has a inline style." );
+ 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 = jQuery( document.createElement("div") );
+ 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", "Make sure a pre-created element has default display." );
- div.remove();
+ 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.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();
tr = jQuery("<tr/>");
jQuery("#table").append( tr );
- trDisplay = tr.css( "display" );
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();
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();
});
-test("show() resolves correct default display #10227", 4, function() {
- var htmlDisplay,
- 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();
- htmlDisplay = html.css( "display" );
-
- // Check for "inline" value needed for older browsers
- ok( "inline" === htmlDisplay || "block" === htmlDisplay, "Correct display for html element" );
-
- jQuery._removeData( body[ 0 ] );
- jQuery._removeData( html[ 0 ] );
- 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() {
expect(9);
var div, oldHide,
@@ -756,7 +716,7 @@ test("hide hidden elements (bug #7141)", function() {
var div = jQuery("<div style='display:none'></div>").appendTo("#qunit-fixture");
equal( div.css("display"), "none", "Element is hidden by default" );
div.hide();
- ok( !jQuery._data(div, "olddisplay"), "olddisplay is undefined after hiding an already-hidden element" );
+ ok( !jQuery._data(div, "display"), "display data is undefined after hiding an already-hidden element" );
div.show();
equal( div.css("display"), "block", "Show a double-hidden element" );
@@ -1156,29 +1116,6 @@ asyncTest( "Clearing a Cloned Element's Style Shouldn't Clear the Original Eleme
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() {
var div = jQuery( "<div />" ),
fixture = jQuery( "#qunit-fixture" );
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
index 6a8453902..c03b96c8b 100644
--- a/test/unit/dimensions.js
+++ b/test/unit/dimensions.js
@@ -57,7 +57,7 @@ function testWidth( val ) {
equal( jQuery(window).width(), document.documentElement.clientWidth, "Window width is equal to width reported by window/document." );
- QUnit.expectJqData( this, $div[0], "olddisplay" );
+ QUnit.expectJqData( this, $div[0], "display" );
}
test("width()", function() {
@@ -110,7 +110,7 @@ function testHeight( val ) {
equal( jQuery(window).height(), document.documentElement.clientHeight, "Window width is equal to width reported by window/document." );
- QUnit.expectJqData( this, $div[0], "olddisplay" );
+ QUnit.expectJqData( this, $div[0], "display" );
}
test("height()", function() {
@@ -165,7 +165,7 @@ test("innerWidth()", function() {
equal( div.innerWidth(), 0, "Make sure that disconnected nodes are handled." );
div.remove();
- QUnit.expectJqData( this, $div[ 0 ], "olddisplay" );
+ QUnit.expectJqData( this, $div[ 0 ], "display" );
});
test("innerHeight()", function() {
@@ -200,7 +200,7 @@ test("innerHeight()", function() {
equal( div.innerHeight(), 0, "Make sure that disconnected nodes are handled." );
div.remove();
- QUnit.expectJqData( this, $div[ 0 ], "olddisplay" );
+ QUnit.expectJqData( this, $div[ 0 ], "display" );
});
test("outerWidth()", function() {
@@ -239,7 +239,7 @@ test("outerWidth()", function() {
equal( div.outerWidth(), 0, "Make sure that disconnected nodes are handled." );
div.remove();
- QUnit.expectJqData( this, $div[ 0 ], "olddisplay" );
+ QUnit.expectJqData( this, $div[ 0 ], "display" );
});
test("child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height() see #9441 #9300", function() {
@@ -385,7 +385,7 @@ test("outerHeight()", function() {
equal( div.outerHeight(), 0, "Make sure that disconnected nodes are handled." );
div.remove();
- QUnit.expectJqData( this, $div[ 0 ], "olddisplay" );
+ QUnit.expectJqData( this, $div[ 0 ], "display" );
});
test("passing undefined is a setter #5571", function() {
diff --git a/test/unit/effects.js b/test/unit/effects.js
index 861762eac..c444ee8f6 100644
--- a/test/unit/effects.js
+++ b/test/unit/effects.js
@@ -28,22 +28,13 @@ test("sanity check", function() {
equal( jQuery("#dl:visible, #qunit-fixture:visible, #foo:visible").length, 2, "QUnit state is correct for testing effects" );
});
-test("show() basic", 2, function() {
- var div,
- 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();
+test("show() basic", 1, function() {
+ var div = jQuery("<div>").hide().appendTo("#qunit-fixture").show();
equal( div.css("display"), "block", "Make sure pre-hidden divs show" );
// Clean up the detached node
div.remove();
-
- QUnit.expectJqData( this, hiddendiv, "olddisplay" );
});
test("show()", 27, function () {
@@ -94,10 +85,17 @@ test("show()", 27, function () {
});
// Tolerate data from show()/hide()
- QUnit.expectJqData( this, div, "olddisplay" );
+ QUnit.expectJqData( this, div, "display" );
+
+ 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>");
+ jQuery("#test-table").remove();
test = {
"div" : "block",
@@ -129,23 +127,31 @@ test("show()", 27, function () {
});
test("show(Number) - other displays", function() {
- expect(15);
+ expect(30);
+
+ 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" );
+ var test;
- // #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>");
+ 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
- var test = {
+ test = {
"div" : "block",
"p" : "block",
- "a" : "inline-block",
- "code" : "inline-block",
+ "a" : "inline",
+ "code" : "inline",
"pre" : "block",
- "span" : "inline-block",
+ "span" : "inline",
"table" : "table",
"thead" : "table-header-group",
"tbody" : "table-row-group",
@@ -156,12 +162,26 @@ test("show(Number) - other displays", function() {
"li" : "list-item"
};
- jQuery.each(test, function(selector, expected) {
- var elem = jQuery(selector, "#show-tests").show(1, function() {
- equal( elem.css("display"), expected, "Show using correct display type for " + selector );
+ 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() {
+ 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();
});
@@ -170,8 +190,8 @@ test("show(Number) - other displays", function() {
test("Persist correct display value", function() {
expect(3);
- // #show-tests * is set display: none in CSS
- jQuery("#qunit-fixture").append("<div id='show-tests'><span style='position:absolute;'>foo</span></div>");
+ jQuery( "<div id='show-tests'><span style='position:absolute;'>foo</span></div>" )
+ .appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
var $span = jQuery("#show-tests span"),
displayNone = $span.css("display"),
@@ -196,7 +216,7 @@ test("Persist correct display value", function() {
clock.tick( 300 );
- QUnit.expectJqData( this, $span, "olddisplay" );
+ QUnit.expectJqData( this, $span, "display" );
});
test("animate(Hash, Object, Function)", function() {
@@ -880,7 +900,7 @@ jQuery.each({
}, 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 ) {
@@ -915,15 +935,15 @@ jQuery.each({
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; }
expect( num );
@@ -931,13 +951,13 @@ jQuery.each({
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" ) {
- 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" ) {
@@ -1107,8 +1127,8 @@ test( "interrupt toggle", function() {
// Save original property value for comparison
jQuery.data( this, "startVal", jQuery( this ).css( prop ) );
- // Expect olddisplay data from our .hide() call below
- QUnit.expectJqData( env, this, "olddisplay" );
+ // Expect display data from our .hide() call below
+ QUnit.expectJqData( env, this, "display" );
});
// Interrupt a hiding toggle
@@ -1241,7 +1261,7 @@ test("hide hidden elements, with animation (bug #7141)", function() {
var div = jQuery("<div style='display:none'></div>").appendTo("#qunit-fixture");
equal( div.css("display"), "none", "Element is hidden by default" );
div.hide(1, function () {
- ok( !jQuery._data(div, "olddisplay"), "olddisplay is undefined after hiding an already-hidden element" );
+ ok( !jQuery._data(div, "display"), "display data is undefined after hiding an already-hidden element" );
div.show(1, function () {
equal( div.css("display"), "block", "Show a double-hidden element" );
});
@@ -1513,10 +1533,9 @@ test( "User supplied callback called after show when fx off (#8892)", 2, functio
});
test( "animate should set display for disconnected nodes", function() {
- expect( 18 );
+ expect( 20 );
- var env = this,
- methods = {
+ var methods = {
toggle: [ 1 ],
slideToggle: [],
fadeIn: [],
@@ -1525,42 +1544,38 @@ test( "animate should set display for disconnected nodes", function() {
show: [ 1 ],
animate: [{ width: "show" }]
},
- $divTest = jQuery("<div>test</div>"),
- // parentNode = null
$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"),
clock = this.clock;
- strictEqual( $divTest.show()[ 0 ].style.display, "block", "set display with show() for element with parentNode = document fragment" );
- strictEqual( $divEmpty.show()[ 0 ].style.display, "block", "set display with show() for element with parentNode = null" );
- 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[ 0 ].parentNode, null, "Setup: element with null parentNode" );
+ strictEqual( ($divTest[ 0 ].parentNode || {}).nodeType, 11, "Setup: element under fragment" );
- QUnit.expectJqData( env, $divTest[ 0 ], "olddisplay" );
- QUnit.expectJqData( env, $divEmpty[ 0 ], "olddisplay" );
- QUnit.expectJqData( env, $divNone[ 0 ], "olddisplay" );
+ 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" );
jQuery.each( methods, function( name, opt ) {
- jQuery.each([
-
- // parentNode = document fragment
- jQuery("<div>test</div>"),
-
- // parentNode = null
- jQuery("<div/>")
+ jQuery.fn[ name ].apply( jQuery("<div/>"), opt.concat( [ function() {
+ strictEqual( jQuery( this ).css( "display" ), nullParentDisplay,
+ "." + name + " block with null parentNode" );
+ } ] ) );
- ], 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 ) );
- });
+ jQuery.fn[ name ].apply( jQuery("<div>test</div>"), opt.concat( [ function() {
+ strictEqual( jQuery( this ).css( "display" ), underFragmentDisplay,
+ "." + name + " block under fragment" );
+ } ] ) );
});
- clock.tick( 400 );
+ clock.tick( 400 );
});
test("Animation callback should not show animated element as :animated (#7157)", 1, function() {
@@ -2200,33 +2215,6 @@ test( "Respect display value on inline elements (#14824)", 2, function() {
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() {
expect( 2 );
@@ -2303,4 +2291,92 @@ test( "jQuery.easing._default in Tween (gh-2218)", function() {
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 ], "display" ), undefined, "display data 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" );
+ });
+ });
+});
+
})();