diff options
author | Richard Gibson <richard.gibson@gmail.com> | 2015-04-02 16:57:33 -0400 |
---|---|---|
committer | Richard Gibson <richard.gibson@gmail.com> | 2015-05-11 13:01:13 -0400 |
commit | 9df8bd205ab78308c34af70c934c42175e560e86 (patch) | |
tree | 4ad0faa80690df471d3b5edb3d0246a41ee9fc9a /test/unit | |
parent | d18b64578859a6c28e2d4b92e558193f9db9b1d4 (diff) | |
download | jquery-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.js | 183 | ||||
-rw-r--r-- | test/unit/dimensions.js | 12 | ||||
-rw-r--r-- | test/unit/effects.js | 280 |
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" ); + }); + }); +}); + })(); |