diff options
author | John Resig <jeresig@gmail.com> | 2010-10-09 16:21:02 -0400 |
---|---|---|
committer | John Resig <jeresig@gmail.com> | 2010-10-09 16:21:02 -0400 |
commit | b0dcc1746f58f5aca17a12794dd928c0deaaa6a0 (patch) | |
tree | 1f031566b66d7c9106083ebc15209b83add55700 /test | |
parent | da597bcf9014b1827e50c0e8f3b9268318574572 (diff) | |
parent | 543db64412b37b5fa1f3d7fea19f62d6db993fb0 (diff) | |
download | jquery-b0dcc1746f58f5aca17a12794dd928c0deaaa6a0.tar.gz jquery-b0dcc1746f58f5aca17a12794dd928c0deaaa6a0.zip |
Merge branch 'animate-nonblock' of http://github.com/csnover/jquery into csnover-animate-nonblock
Diffstat (limited to 'test')
-rw-r--r-- | test/data/testsuite.css | 2 | ||||
-rw-r--r-- | test/index.html | 46 | ||||
-rw-r--r-- | test/unit/css.js | 15 | ||||
-rw-r--r-- | test/unit/effects.js | 225 |
4 files changed, 205 insertions, 83 deletions
diff --git a/test/data/testsuite.css b/test/data/testsuite.css index 184689209..cffaaa46a 100644 --- a/test/data/testsuite.css +++ b/test/data/testsuite.css @@ -102,6 +102,8 @@ div.chain.test div { background: green; } div.chain.out { background: green; } div.chain.out div { background: red; 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; } diff --git a/test/index.html b/test/index.html index d858114b1..03e1d9758 100644 --- a/test/index.html +++ b/test/index.html @@ -48,20 +48,20 @@ <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> - + <!-- Test HTML --> <div id="nothiddendiv" style="height:1px;background:white;" class="nothiddendiv"> <div id="nothiddendivchild"></div> </div> <!-- this iframe is outside the #main so it won't reload constantly wasting time, but it means the tests must be "safe" and clean up after themselves --> <iframe id="loadediframe" name="loadediframe" style="display:none;" src="data/iframe.html"></iframe> - <dl id="dl" style="display:none;"> - <div id="main" style="display: none;"> + <dl id="dl" style="position:absolute;top:-32767px;left:-32767px;"> + <div id="main"> <p id="firstp">See <a id="simon1" href="http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector" rel="bookmark">this blog entry</a> for more information.</p> <p id="ap"> - Here are some links in a normal paragraph: <a id="google" href="http://www.google.com/" title="Google!">Google</a>, - <a id="groups" href="http://groups.google.com/" class="GROUPS">Google Groups (Link)</a>. - This link has <code><a href="http://smin" id="anchor1">class="blog"</a></code>: + Here are some links in a normal paragraph: <a id="google" href="http://www.google.com/" title="Google!">Google</a>, + <a id="groups" href="http://groups.google.com/" class="GROUPS">Google Groups (Link)</a>. + This link has <code><a href="http://smin" id="anchor1">class="blog"</a></code>: <a href="http://diveintomark.org/" class="blog" hreflang="en" id="mark">diveintomark</a> </p> @@ -87,14 +87,14 @@ <input type="hidden" name="hidden" id="hidden1"/> <input type="text" style="display:none;" name="foo[bar]" id="hidden2"/> - + <input type="text" id="name" name="name" value="name" /> <input type="search" id="search" name="search" value="search" /> - + <button id="button" name="button" type="button">Button</button> - + <textarea id="area1" maxlength="30">foobar</textarea> - + <select name="select1" id="select1"> <option id="option1a" class="emptyopt" value="">Nothing</option> <option id="option1b" value="1">1</option> @@ -128,19 +128,19 @@ <option id="option5b" value="2">2</option> <option id="option5c" value="1">3</option> </select> - + <object id="object1" codebase="stupid"> <param name="p1" value="x1" /> <param name="p2" value="x2" /> </object> - + <span id="台北Táiběi"></span> <span id="台北" lang="中文"></span> <span id="utf8class1" class="台北Táiběi 台北"></span> <span id="utf8class2" class="台北"></span> <span id="foo:bar" class="foo:bar"></span> <span id="test.foo[5]bar" class="test.foo[5]bar"></span> - + <foo_bar id="foobar">test element</foo_bar> </form> <b id="floatTest">Float test.</b> @@ -157,7 +157,7 @@ <input name="types[]" id="types_anime" type="checkbox" value="anime" /> <input name="types[]" id="types_movie" type="checkbox" value="movie" /> </form> - + <form id="testForm" action="#" method="get"> <textarea name="T3" rows="2" cols="15">? Z</textarea> @@ -213,7 +213,7 @@ Z</textarea> <div><div class="hidden">hidden</div></div> </div> </div> - + <div id="tabindex-tests"> <ol id="listWithTabIndex" tabindex="5"> <li id="foodWithNegativeTabIndex" tabindex="-1">Rice</li> @@ -221,7 +221,7 @@ Z</textarea> <li>Blinis</li> <li>Tofu</li> </ol> - + <div id="divWithNoTabIndex">I'm hungry. I should...</div> <span>...</span><a href="#" id="linkWithNoTabIndex">Eat lots of food</a><span>...</span> | <span>...</span><a href="#" id="linkWithTabIndex" tabindex="2">Eat a little food</a><span>...</span> | @@ -230,7 +230,7 @@ Z</textarea> <span>...</span><a id="linkWithNoHrefWithTabIndex" tabindex="1">Eat some funyuns</a><span>...</span> <span>...</span><a id="linkWithNoHrefWithNegativeTabIndex" tabindex="-1">Eat some funyuns</a><span>...</span> </div> - + <div id="liveHandlerOrder"> <span id="liveSpan1"><a href="#" id="liveLink1"></a></span> <span id="liveSpan2"><a href="#" id="liveLink2"></a></span> @@ -246,23 +246,23 @@ Z</textarea> <div id="fx-queue" name="test"> <div id="fadein" class='chain test' name='div'>fadeIn<div>fadeIn</div></div> <div id="fadeout" class='chain test out'>fadeOut<div>fadeOut</div></div> - + <div id="show" class='chain test'>show<div>show</div></div> <div id="hide" class='chain test out'>hide<div>hide</div></div> - + <div id="togglein" class='chain test'>togglein<div>togglein</div></div> <div id="toggleout" class='chain test out'>toggleout<div>toggleout</div></div> - - + + <div id="slideup" class='chain test'>slideUp<div>slideUp</div></div> <div id="slidedown" class='chain test out'>slideDown<div>slideDown</div></div> - + <div id="slidetogglein" class='chain test'>slideToggleIn<div>slideToggleIn</div></div> <div id="slidetoggleout" class='chain test out'>slideToggleOut<div>slideToggleOut</div></div> <div id="fadeto" class='chain test'>fadeTo<div>fadeTo</div></div> </div> - + <div id="fx-tests"></div> </div> </body> diff --git a/test/unit/css.js b/test/unit/css.js index 3131af38e..8a4909689 100644 --- a/test/unit/css.js +++ b/test/unit/css.js @@ -3,7 +3,7 @@ module("css"); test("css(String|Hash)", function() { expect(33); - equals( jQuery('#main').css("display"), 'none', 'Check for css property "display"'); + equals( jQuery('#main').css("display"), 'block', 'Check for css property "display"'); ok( jQuery('#nothiddendiv').is(':visible'), 'Modifying CSS display: Assert element is visible'); jQuery('#nothiddendiv').css({display: 'none'}); @@ -286,3 +286,16 @@ test("jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", funct ok( !! jQuery(":checkbox:first", $checkedtest).attr("checked"), "Check first checkbox still checked." ); ok( ! jQuery(":checkbox:last", $checkedtest).attr("checked"), "Check last checkbox still NOT checked." ); }); + +test(":visible selector works properly on table elements (bug #4512)", function () { + expect(1); + + jQuery('#table').html('<tr><td style="display:none">cell</td><td>cell</td></tr>'); + equals(jQuery('#table td:visible').length, 1, "hidden cell is not perceived as visible"); +}); + +test(":visible selector works properly on children with a hidden parent (bug #4512)", function () { + expect(1); + jQuery('#table').css('display', 'none').html('<tr><td>cell</td><td>cell</td></tr>'); + equals(jQuery('#table td:visible').length, 0, "hidden cell children not perceived as visible"); +});
\ No newline at end of file diff --git a/test/unit/effects.js b/test/unit/effects.js index b9d5c8841..3c4015aff 100644 --- a/test/unit/effects.js +++ b/test/unit/effects.js @@ -1,5 +1,10 @@ module("effects"); +test("sanity check", function() { + expect(1); + ok( jQuery("#dl:visible, #main:visible, #foo:visible").length === 3, "QUnit state is correct for testing effects" ); +}); + test("show()", function() { expect(23); var pass = true, div = jQuery("#main div"); @@ -32,9 +37,11 @@ test("show()", function() { ok( pass, "Show with " + name + " does not call animate callback" ); }); - jQuery("#main").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>'); - - var old = jQuery("#show-tests table").show().css("display") !== "table"; + // #show-tests * is set display: none in CSS + jQuery("#main").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 old = jQuery("#test-table").show().css("display") !== "table"; + jQuery("#test-table").remove(); var test = { "div" : "block", @@ -64,10 +71,12 @@ test("show(Number) - other displays", function() { QUnit.reset(); stop(); - jQuery("#main").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>'); + // #show-tests * is set display: none in CSS + jQuery("#main").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 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", @@ -116,6 +125,104 @@ 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(); + }); +}); + +test("animate native inline width/height", function() { + expect(3); + stop(); + jQuery("#foo").css({ display: "", width: '', height: '' }) + .append('<span>text</span>') + .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(); + }); +}); + +test("animate block width/height", function() { + expect(3); + stop(); + jQuery("#foo").css({ display: "block", width: 20, height: 20 }).animate({ width: 42, height: 42 }, 100, function() { + equals( jQuery(this).css("display"), "block", "inline-block was not set on block element when animating width/height" ); + equals( this.offsetWidth, 42, "width was animated" ); + equals( this.offsetHeight, 42, "height was animated" ); + start(); + }); +}); + +test("animate table width/height", function() { + expect(1); + stop(); + + var displayMode = jQuery("#table").css("display") !== "table" ? "block" : "table"; + + jQuery("#table").animate({ width: 42, height: 42 }, 100, function() { + equals( jQuery(this).css("display"), displayMode, "display mode is correct" ); + start(); + }); +}); + +test("animate table-row width/height", function() { + expect(3); + stop(); + var tr = jQuery("#table") + .attr({ "cellspacing": 0, "cellpadding": 0, "border": 0 }) + .html("<tr style='height:42px;'><td style='padding:0;'><div style='width:20px;height:20px;'></div></td></tr>") + .find("tr"); + + // IE<8 uses “block” instead of the correct display type + var displayMode = tr.css("display") !== "table-row" ? "block" : "table-row"; + + tr.animate({ width: 10, height: 10 }, 100, function() { + equals( jQuery(this).css("display"), displayMode, "display mode is correct" ); + equals( this.offsetWidth, 20, "width animated to shrink wrap point" ); + equals( this.offsetHeight, 20, "height animated to shrink wrap point" ); + start(); + }); +}); + +test("animate table-cell width/height", function() { + expect(3); + stop(); + var td = jQuery("#table") + .attr({ "cellspacing": 0, "cellpadding": 0, "border": 0 }) + .html("<tr><td style='width:42px;height:42px;padding:0;'><div style='width:20px;height:20px;'></div></td></tr>") + .find("td"); + + // IE<8 uses “block” instead of the correct display type + var displayMode = td.css("display") !== "table-cell" ? "block" : "table-cell"; + + td.animate({ width: 10, height: 10 }, 100, function() { + equals( jQuery(this).css("display"), displayMode, "display mode is correct" ); + equals( this.offsetWidth, 20, "width animated to shrink wrap point" ); + equals( this.offsetHeight, 20, "height animated to shrink wrap point" ); + start(); + }); +}); + +test("animate resets overflow-x and overflow-y when finished", function() { + expect(2); + stop(); + jQuery("#foo") + .css({ display: "block", width: 20, height: 20, overflowX: "visible", overflowY: "auto" }) + .animate({ width: 42, height: 42 }, 100, function() { + equals( this.style.overflowX, "visible", "overflow-x is visible" ); + equals( this.style.overflowY, "auto", "overflow-y is auto" ); + start(); + }); +}); + /* // This test ends up being flaky depending upon the CPU load test("animate option (queue === false)", function () { expect(1); @@ -139,7 +246,7 @@ test("animate option (queue === false)", function () { test("animate with no properties", function() { expect(2); - + var divs = jQuery("div"), count = 0; divs.animate({}, function(){ @@ -161,30 +268,30 @@ test("animate with no properties", function() { test("animate duration 0", function() { expect(11); - + stop(); - + var $elems = jQuery([{ a:0 },{ a:0 }]), counter = 0; - + equals( jQuery.timers.length, 0, "Make sure no animation was running from another test" ); - + $elems.eq(0).animate( {a:1}, 0, function(){ ok( true, "Animate a simple property." ); counter++; }); - + // Failed until [6115] equals( jQuery.timers.length, 0, "Make sure synchronic animations are not left on jQuery.timers" ); - + equals( counter, 1, "One synchronic animations" ); - + $elems.animate( { a:2 }, 0, function(){ ok( true, "Animate a second simple property." ); counter++; }); - + equals( counter, 3, "Multiple synchronic animations" ); - + $elems.eq(0).animate( {a:3}, 0, function(){ ok( true, "Animate a third simple property." ); counter++; @@ -195,12 +302,12 @@ test("animate duration 0", function() { equals( counter, 5, "One synchronic and one asynchronic" ); start(); }); - + var $elem = jQuery("<div />"); - $elem.show(0, function(){ + $elem.show(0, function(){ ok(true, "Show callback with no duration"); }); - $elem.hide(0, function(){ + $elem.hide(0, function(){ ok(true, "Hide callback with no duration"); }); }); @@ -342,7 +449,7 @@ test("toggle()", function() { ok( x.is(":hidden"), "is hidden" ); x.toggle(); ok( x.is(":visible"), "is visible again" ); - + x.toggle(true); ok( x.is(":visible"), "is visible" ); x.toggle(false); @@ -372,7 +479,7 @@ test("JS Overflow and Display", function() { .after("text after") .animate({ opacity: 0.5 }, "slow", jQuery.checkOverflowDisplay); }); - + test("CSS Overflow and Display", function() { expect(2); stop(); @@ -444,16 +551,16 @@ jQuery.each( { }, function(tn, t){ test(fn + " to " + tn, function() { var elem = jQuery.makeTest( fn + " to " + tn ); - + var t_w = t( elem, "width" ); var f_w = f( elem, "width" ); var t_h = t( elem, "height" ); var f_h = f( elem, "height" ); var t_o = t( elem, "opacity" ); var f_o = f( elem, "opacity" ); - + var num = 0; - + if ( t_h == "show" ) num++; if ( t_w == "show" ) num++; if ( t_w == "hide"||t_w == "show" ) num++; @@ -463,52 +570,52 @@ jQuery.each( { if ( t_o.constructor == Number ) num += 2; if ( t_w.constructor == Number ) num += 2; if ( t_h.constructor == Number ) num +=2; - + expect(num); stop(); - + var anim = { width: t_w, height: t_h, opacity: t_o }; - + elem.animate(anim, 50, function(){ if ( t_w == "show" ) equals( this.style.display, "block", "Showing, display should block: " + this.style.display); - + if ( t_w == "hide"||t_w == "show" ) ok(f_w === "" ? this.style.width === f_w : this.style.width.indexOf(f_w) === 0, "Width must be reset to " + f_w + ": " + this.style.width); - + if ( t_h == "hide"||t_h == "show" ) ok(f_h === "" ? this.style.height === f_h : this.style.height.indexOf(f_h) === 0, "Height must be reset to " + f_h + ": " + this.style.height); - + var cur_o = jQuery.style(this, "opacity"); if ( t_o == "hide" || t_o == "show" ) equals(cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o); - + if ( t_w == "hide" ) equals(this.style.display, "none", "Hiding, display should be none: " + this.style.display); - + if ( t_o.constructor == Number ) { equals(cur_o, t_o, "Final opacity should be " + t_o + ": " + cur_o); - + ok(jQuery.css(this, "opacity") != "" || cur_o == t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o); } - + if ( t_w.constructor == Number ) { equals(this.style.width, t_w + "px", "Final width should be " + t_w + ": " + this.style.width); - + var cur_w = jQuery.css(this,"width"); ok(this.style.width != "" || cur_w == t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w); } - + if ( t_h.constructor == Number ) { equals(this.style.height, t_h + "px", "Final height should be " + t_h + ": " + this.style.height); - + var cur_h = jQuery.css(this,"height"); ok(this.style.height != "" || cur_h == t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_w); } - + if ( t_h == "show" ) { var old_h = jQuery.css(this, "height"); jQuery(this).append("<br/>Some more text<br/>and some more..."); @@ -519,23 +626,23 @@ jQuery.each( { equals(jQuery.css(this, "height"), old_h, "Make sure height is not auto."); } } - + start(); }); }); }); }); -jQuery.fn.saveState = function(){ - var check = ['opacity','height','width','display','overflow']; +jQuery.fn.saveState = function(hiddenOverflow){ + var check = ['opacity','height','width','display','overflow']; expect(check.length); - + stop(); return this.each(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); }); }); }; @@ -558,39 +665,39 @@ 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 fadeTo 0.5 1.0 with easing and callback)", function() { @@ -631,26 +738,26 @@ test("jQuery.show('fast') doesn't clear radio buttons (bug #1095)", function () }); test("animate with per-property easing", function(){ - + expect(3); stop(); - + var _test1_called = false; var _test2_called = false; var _default_test_called = false; - + jQuery.easing['_test1'] = function() { _test1_called = true; }; - + jQuery.easing['_test2'] = function() { _test2_called = true; }; - + jQuery.easing['_default_test'] = function() { _default_test_called = true; }; - + jQuery({a:0,b:0,c:0}).animate({ a: [100, '_test1'], b: [100, '_test2'], @@ -661,5 +768,5 @@ test("animate with per-property easing", function(){ ok(_test2_called, "Easing function (2) called"); ok(_default_test_called, "Easing function (_default) called"); }); - + }); |