X-Git-Url: http://git.asbjorn.biz/?a=blobdiff_plain;f=test%2Funit%2Feffects.js;h=e96f6b6f045e66b29725841d42280a369496c599;hb=3e0cc815043c2425819743e907a0ce263a7ce164;hp=47266ed4ec78efb4f328154e68edd5d45b0dc403;hpb=5057ff9f43017f673894584358ca95c8753b65d4;p=jquery.git diff --git a/test/unit/effects.js b/test/unit/effects.js index 47266ed..e96f6b6 100644 --- a/test/unit/effects.js +++ b/test/unit/effects.js @@ -6,7 +6,32 @@ test("sanity check", function() { }); test("show()", function() { - expect(23); + expect(28); + + var hiddendiv = jQuery("div.hidden"); + + hiddendiv.hide().show(); + + equals( hiddendiv.css("display"), "block", "Make sure a pre-hidden div is visible." ); + + var div = jQuery("
").hide().appendTo("body").show(); + + equal( div.css("display"), "block", "Make sure pre-hidden divs show" ); + + QUnit.reset(); + + hiddendiv = jQuery("div.hidden"); + + equal(jQuery.css( hiddendiv[0], "display"), "none", "hiddendiv is display: none"); + + hiddendiv.css("display", "block"); + equal(jQuery.css( hiddendiv[0], "display"), "block", "hiddendiv is display: block"); + + hiddendiv.show(); + equal(jQuery.css( hiddendiv[0], "display"), "block", "hiddendiv is display: block"); + + hiddendiv.css("display",""); + var pass = true, div = jQuery("#main div"); div.show().each(function(){ if ( this.style.display == "none" ) pass = false; @@ -38,9 +63,10 @@ test("show()", function() { }); // #show-tests * is set display: none in CSS - jQuery("#main").append('

'); + jQuery("#main").append('

'); - var old = jQuery("#show-tests table").show().css("display") !== "table"; + var old = jQuery("#test-table").show().css("display") !== "table"; + jQuery("#test-table").remove(); var test = { "div" : "block", @@ -71,10 +97,11 @@ test("show(Number) - other displays", function() { stop(); // #show-tests * is set display: none in CSS - jQuery("#main").append('

'); + jQuery("#main").append('

'); - var old = jQuery("#show-tests table").show().css("display") !== "table", + var old = jQuery("#test-table").show().css("display") !== "table", num = 0; + jQuery("#test-table").remove(); var test = { "div" : "block", @@ -94,10 +121,7 @@ test("show(Number) - other displays", function() { }; jQuery.each(test, function(selector, expected) { - // IE sometimes has issues with chained functions referencing - // assignments from outside the closure - var elem = jQuery(selector, "#show-tests"); - elem.show(1, function() { + var elem = jQuery(selector, "#show-tests").show(1, function() { equals( elem.css("display"), expected, "Show using correct display type for " + selector ); if ( ++num === 15 ) { start(); @@ -106,6 +130,45 @@ test("show(Number) - other displays", function() { }); }); + + +// Supports #7397 +test("Persist correct display value", function() { + expect(3); + QUnit.reset(); + stop(); + + // #show-tests * is set display: none in CSS + jQuery("#main").append('
foo
'); + + var $span = jQuery("#show-tests span"), + displayNone = $span.css("display"), + display = '', num = 0; + + $span.show(); + + display = $span.css("display"); + + $span.hide(); + + $span.fadeIn(100, function() { + + equals($span.css("display"), display, "Expecting display: " + display); + + $span.fadeOut(100, function () { + + equals($span.css("display"), displayNone, "Expecting display: " + displayNone); + + $span.fadeIn(100, function() { + + equals($span.css("display"), display, "Expecting display: " + display); + + start(); + }); + }); + }); +}); + test("animate(Hash, Object, Function)", function() { expect(1); stop(); @@ -128,27 +191,56 @@ test("animate negative height", function() { test("animate block as inline width/height", function() { expect(3); - stop(); - jQuery("#foo").css({ display: "inline", width: '', height: '' }).animate({ width: 42, height: 42 }, 100, function() { - equals( jQuery(this).css("display"), jQuery.support.inlineBlockNeedsLayout ? "inline" : "inline-block", "inline-block was set on non-floated inline element when animating width/height" ); - equals( this.offsetWidth, 42, "width was animated" ); - equals( this.offsetHeight, 42, "height was animated" ); - start(); - }); + + var span = jQuery("").css("display", "inline-block").appendTo("body"), + expected = span.css("display"); + + span.remove(); + + if ( jQuery.support.inlineBlockNeedsLayout || expected === "inline-block" ) { + stop(); + + jQuery("#foo").css({ display: "inline", width: '', height: '' }).animate({ width: 42, height: 42 }, 100, function() { + equals( jQuery(this).css("display"), jQuery.support.inlineBlockNeedsLayout ? "inline" : "inline-block", "inline-block was set on non-floated inline element when animating width/height" ); + equals( this.offsetWidth, 42, "width was animated" ); + equals( this.offsetHeight, 42, "height was animated" ); + start(); + }); + + // Browser doesn't support inline-block + } else { + ok( true, "Browser doesn't support inline-block" ); + ok( true, "Browser doesn't support inline-block" ); + ok( true, "Browser doesn't support inline-block" ); + } }); test("animate native inline width/height", function() { expect(3); - stop(); - jQuery("#foo").css({ display: "", width: '', height: '' }) - .append('text') - .children('span') - .animate({ width: 42, height: 42 }, 100, function() { - equals( jQuery(this).css("display"), "inline-block", "inline-block was set on non-floated inline element when animating width/height" ); - equals( this.offsetWidth, 42, "width was animated" ); - equals( this.offsetHeight, 42, "height was animated" ); - start(); - }); + + var span = jQuery("").css("display", "inline-block").appendTo("body"), + expected = span.css("display"); + + span.remove(); + + if ( jQuery.support.inlineBlockNeedsLayout || expected === "inline-block" ) { + stop(); + jQuery("#foo").css({ display: "", width: '', height: '' }) + .append('text') + .children('span') + .animate({ width: 42, height: 42 }, 100, function() { + equals( jQuery(this).css("display"), "inline-block", "inline-block was set on non-floated inline element when animating width/height" ); + equals( this.offsetWidth, 42, "width was animated" ); + equals( this.offsetHeight, 42, "height was animated" ); + start(); + }); + + // Browser doesn't support inline-block + } else { + ok( true, "Browser doesn't support inline-block" ); + ok( true, "Browser doesn't support inline-block" ); + ok( true, "Browser doesn't support inline-block" ); + } }); test("animate block width/height", function() { @@ -460,10 +552,9 @@ test("toggle()", function() { }); jQuery.checkOverflowDisplay = function(){ - var o = jQuery.css( this, "overflow" ), - expected = jQuery.support.shrinkWrapBlocks ? "hidden" : "visible"; + var o = jQuery.css( this, "overflow" ); - equals(o, expected, "Overflow should be " + expected + ": " + o); + equals(o, "visible", "Overflow should be visible: " + o); equals(jQuery.css( this, "display" ), "inline", "Display shouldn't be tampered with."); start(); @@ -635,7 +726,7 @@ jQuery.each( { }); }); -jQuery.fn.saveState = function(){ +jQuery.fn.saveState = function(hiddenOverflow){ var check = ['opacity','height','width','display','overflow']; expect(check.length); @@ -644,7 +735,7 @@ jQuery.fn.saveState = function(){ var self = this; self.save = {}; jQuery.each(check, function(i,c){ - self.save[c] = self.style[ c ] || jQuery.css(self,c); + self.save[c] = c === "overflow" && hiddenOverflow ? "hidden" : self.style[ c ] || jQuery.css(self,c); }); }); }; @@ -653,9 +744,6 @@ jQuery.checkState = function(){ var self = this; jQuery.each(this.save, function(c,v){ var cur = self.style[ c ] || jQuery.css(self, c); - if ( c === "overflow" && jQuery.support.shrinkWrapBlocks ) { - v = "hidden"; - } equals( cur, v, "Make sure that " + c + " is reset (Old: " + v + " Cur: " + cur + ")"); }); start(); @@ -670,39 +758,46 @@ test("Chain fadeIn fadeOut", function() { }); test("Chain hide show", function() { - jQuery('#show div').saveState().hide('fast').show('fast',jQuery.checkState); + jQuery('#show div').saveState(jQuery.support.shrinkWrapBlocks).hide('fast').show('fast',jQuery.checkState); }); test("Chain show hide", function() { - jQuery('#hide div').saveState().show('fast').hide('fast',jQuery.checkState); + jQuery('#hide div').saveState(jQuery.support.shrinkWrapBlocks).show('fast').hide('fast',jQuery.checkState); }); test("Chain show hide with easing and callback", function() { jQuery('#hide div').saveState().show('fast').hide('fast','linear',jQuery.checkState); }); test("Chain toggle in", function() { - jQuery('#togglein div').saveState().toggle('fast').toggle('fast',jQuery.checkState); + jQuery('#togglein div').saveState(jQuery.support.shrinkWrapBlocks).toggle('fast').toggle('fast',jQuery.checkState); }); test("Chain toggle out", function() { - jQuery('#toggleout div').saveState().toggle('fast').toggle('fast',jQuery.checkState); + jQuery('#toggleout div').saveState(jQuery.support.shrinkWrapBlocks).toggle('fast').toggle('fast',jQuery.checkState); }); test("Chain toggle out with easing and callback", function() { - jQuery('#toggleout div').saveState().toggle('fast').toggle('fast','linear',jQuery.checkState); + jQuery('#toggleout div').saveState(jQuery.support.shrinkWrapBlocks).toggle('fast').toggle('fast','linear',jQuery.checkState); }); test("Chain slideDown slideUp", function() { - jQuery('#slidedown div').saveState().slideDown('fast').slideUp('fast',jQuery.checkState); + jQuery('#slidedown div').saveState(jQuery.support.shrinkWrapBlocks).slideDown('fast').slideUp('fast',jQuery.checkState); }); test("Chain slideUp slideDown", function() { - jQuery('#slideup div').saveState().slideUp('fast').slideDown('fast',jQuery.checkState); + jQuery('#slideup div').saveState(jQuery.support.shrinkWrapBlocks).slideUp('fast').slideDown('fast',jQuery.checkState); }); test("Chain slideUp slideDown with easing and callback", function() { - jQuery('#slideup div').saveState().slideUp('fast').slideDown('fast','linear',jQuery.checkState); + jQuery('#slideup div').saveState(jQuery.support.shrinkWrapBlocks).slideUp('fast').slideDown('fast','linear',jQuery.checkState); }); test("Chain slideToggle in", function() { - jQuery('#slidetogglein div').saveState().slideToggle('fast').slideToggle('fast',jQuery.checkState); + jQuery('#slidetogglein div').saveState(jQuery.support.shrinkWrapBlocks).slideToggle('fast').slideToggle('fast',jQuery.checkState); }); test("Chain slideToggle out", function() { - jQuery('#slidetoggleout div').saveState().slideToggle('fast').slideToggle('fast',jQuery.checkState); + jQuery('#slidetoggleout div').saveState(jQuery.support.shrinkWrapBlocks).slideToggle('fast').slideToggle('fast',jQuery.checkState); +}); + +test("Chain fadeToggle in", function() { + jQuery('#fadetogglein div').saveState().fadeToggle('fast').fadeToggle('fast',jQuery.checkState); +}); +test("Chain fadeToggle out", function() { + jQuery('#fadetoggleout div').saveState().fadeToggle('fast').fadeToggle('fast',jQuery.checkState); }); test("Chain fadeTo 0.5 1.0 with easing and callback)", function() { @@ -775,3 +870,33 @@ test("animate with per-property easing", function(){ }); }); + +test("hide hidden elements (bug #7141)", function() { + expect(3); + QUnit.reset(); + + var div = jQuery("
").appendTo("#main"); + equals( div.css("display"), "none", "Element is hidden by default" ); + div.hide(); + ok( !div.data("olddisplay"), "olddisplay is undefined after hiding an already-hidden element" ); + div.show(); + equals( div.css("display"), "block", "Show a double-hidden element" ); + + div.remove(); +}); + +test("hide hidden elements, with animation (bug #7141)", function() { + expect(3); + QUnit.reset(); + stop(); + + var div = jQuery("
").appendTo("#main"); + equals( div.css("display"), "none", "Element is hidden by default" ); + div.hide(1, function () { + ok( !div.data("olddisplay"), "olddisplay is undefined after hiding an already-hidden element" ); + div.show(1, function () { + equals( div.css("display"), "block", "Show a double-hidden element" ); + start(); + }); + }); +});