Нет описания

effects.js 77KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625
  1. ( function() {
  2. // Can't test what ain't there
  3. if ( !jQuery.fx ) {
  4. return;
  5. }
  6. var oldRaf = window.requestAnimationFrame,
  7. hideOptions = {
  8. inline: function() { jQuery.style( this, "display", "none" ); },
  9. cascade: function() { this.className = "hidden"; }
  10. };
  11. QUnit.module( "effects", {
  12. beforeEach: function() {
  13. window.requestAnimationFrame = null;
  14. this.sandbox = sinon.sandbox.create();
  15. this.clock = this.sandbox.useFakeTimers( 505877050 );
  16. this._oldInterval = jQuery.fx.interval;
  17. jQuery.fx.step = {};
  18. jQuery.fx.interval = 10;
  19. },
  20. afterEach: function() {
  21. this.sandbox.restore();
  22. jQuery.fx.stop();
  23. jQuery.fx.interval = this._oldInterval;
  24. window.requestAnimationFrame = oldRaf;
  25. return moduleTeardown.apply( this, arguments );
  26. }
  27. } );
  28. QUnit[ jQuery.find.compile ? "test" : "skip" ]( "sanity check", function( assert ) {
  29. assert.expect( 1 );
  30. assert.equal( jQuery( "#qunit-fixture:visible, #foo:visible" ).length, 2, "QUnit state is correct for testing effects" );
  31. } );
  32. QUnit.test( "show() basic", function( assert ) {
  33. assert.expect( 1 );
  34. var div = jQuery( "<div>" ).hide().appendTo( "#qunit-fixture" ).show();
  35. assert.equal( div.css( "display" ), "block", "Make sure pre-hidden divs show" );
  36. // Clean up the detached node
  37. div.remove();
  38. } );
  39. QUnit.test( "show()", function( assert ) {
  40. assert.expect( 27 );
  41. var div, speeds, test,
  42. hiddendiv = jQuery( "div.hidden" );
  43. assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "none", "hiddendiv is display: none" );
  44. hiddendiv.css( "display", "block" );
  45. assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
  46. hiddendiv.show();
  47. assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
  48. hiddendiv.css( "display", "" );
  49. div = jQuery( "#fx-queue div" ).slice( 0, 4 );
  50. div.show().each( function() {
  51. assert.notEqual( this.style.display, "none", "don't change any <div> with display block" );
  52. } );
  53. speeds = {
  54. "null speed": null,
  55. "undefined speed": undefined,
  56. "false speed": false
  57. };
  58. jQuery.each( speeds, function( name, speed ) {
  59. var pass = true;
  60. div.hide().show( speed ).each( function() {
  61. if ( this.style.display === "none" ) {
  62. pass = false;
  63. }
  64. } );
  65. assert.ok( pass, "Show with " + name );
  66. } );
  67. jQuery.each( speeds, function( name, speed ) {
  68. var pass = true;
  69. div.hide().show( speed, function() {
  70. pass = false;
  71. } );
  72. assert.ok( pass, "Show with " + name + " does not call animate callback" );
  73. } );
  74. jQuery(
  75. "<div id='show-tests'>" +
  76. "<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
  77. "<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>" +
  78. "<ul><li></li></ul></div>"
  79. ).appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
  80. test = {
  81. "div": "block",
  82. "p": "block",
  83. "a": "inline",
  84. "code": "inline",
  85. "pre": "block",
  86. "span": "inline",
  87. "table": "table",
  88. "thead": "table-header-group",
  89. "tbody": "table-row-group",
  90. "tr": "table-row",
  91. "th": "table-cell",
  92. "td": "table-cell",
  93. "ul": "block",
  94. "li": "list-item"
  95. };
  96. jQuery.each( test, function( selector, expected ) {
  97. var elem = jQuery( selector, "#show-tests" ).show();
  98. assert.equal( elem.css( "display" ), expected, "Show using correct display type for " + selector );
  99. } );
  100. jQuery( "#show-tests" ).remove();
  101. // Make sure that showing or hiding a text node doesn't cause an error
  102. jQuery( "<div>test</div> text <span>test</span>" ).show().remove();
  103. jQuery( "<div>test</div> text <span>test</span>" ).hide().remove();
  104. } );
  105. supportjQuery.each( hideOptions, function( type, setup ) {
  106. QUnit.test( "show(Number) - " + type + " hidden", function( assert ) {
  107. assert.expect( 30 );
  108. jQuery(
  109. "<div id='show-tests'>" +
  110. "<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
  111. "<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody>" +
  112. "</table>" +
  113. "<ul><li></li></ul></div>"
  114. ).appendTo( "#qunit-fixture" ).find( "*" ).each( setup );
  115. // Note: inline elements are expected to be inline-block
  116. // because we're showing width/height
  117. // Can't animate width/height inline
  118. // See #14344
  119. var test = {
  120. "div": "block",
  121. "p": "block",
  122. "a": "inline",
  123. "code": "inline",
  124. "pre": "block",
  125. "span": "inline",
  126. "table": "table",
  127. "thead": "table-header-group",
  128. "tbody": "table-row-group",
  129. "tr": "table-row",
  130. "th": "table-cell",
  131. "td": "table-cell",
  132. "ul": "block",
  133. "li": "list-item"
  134. };
  135. jQuery.each( test, function( selector ) {
  136. jQuery( selector, "#show-tests" ).show( 100 );
  137. } );
  138. this.clock.tick( 50 );
  139. jQuery.each( test, function( selector, expected ) {
  140. jQuery( selector, "#show-tests" ).each( function() {
  141. assert.equal(
  142. jQuery( this ).css( "display" ),
  143. expected === "inline" ? "inline-block" : expected,
  144. "Correct display type during animation for " + selector
  145. );
  146. } );
  147. } );
  148. this.clock.tick( 50 );
  149. jQuery.each( test, function( selector, expected ) {
  150. jQuery( selector, "#show-tests" ).each( function() {
  151. assert.equal( jQuery( this ).css( "display" ), expected,
  152. "Correct display type after animation for " + selector );
  153. } );
  154. } );
  155. jQuery( "#show-tests" ).remove();
  156. } );
  157. } );
  158. // Supports #7397
  159. supportjQuery.each( hideOptions, function( type, setup ) {
  160. QUnit.test( "Persist correct display value - " + type + " hidden", function( assert ) {
  161. assert.expect( 3 );
  162. jQuery( "<div id='show-tests'><span style='position:absolute;'>foo</span></div>" )
  163. .appendTo( "#qunit-fixture" ).find( "*" ).each( setup );
  164. var $span = jQuery( "#show-tests span" ),
  165. displayNone = $span.css( "display" ),
  166. display = "",
  167. clock = this.clock;
  168. $span.show();
  169. display = $span.css( "display" );
  170. $span.hide();
  171. $span.fadeIn( 100, function() {
  172. assert.equal( $span.css( "display" ), display, "Expecting display: " + display );
  173. $span.fadeOut( 100, function() {
  174. assert.equal( $span.css( "display" ), displayNone, "Expecting display: " + displayNone );
  175. $span.fadeIn( 100, function() {
  176. assert.equal( $span.css( "display" ), display, "Expecting display: " + display );
  177. } );
  178. } );
  179. } );
  180. clock.tick( 300 );
  181. } );
  182. QUnit[
  183. document.body.attachShadow && document.body.getRootNode ?
  184. "test" :
  185. "skip"
  186. ]( "Persist correct display value - " + type + " hidden, shadow child", function( assert ) {
  187. assert.expect( 3 );
  188. jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
  189. var shadowHost = document.querySelector( "#shadowHost" );
  190. var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
  191. shadowRoot.innerHTML = "<style>.hidden{display: none;}</style>" +
  192. "<span id='shadowChild' class='hidden'></span>";
  193. var shadowChild = shadowRoot.querySelector( "#shadowChild" );
  194. var $shadowChild = jQuery( shadowChild );
  195. var displayNone = "none";
  196. var display = "inline";
  197. var clock = this.clock;
  198. $shadowChild.fadeIn( 100, function() {
  199. assert.equal( $shadowChild.css( "display" ), display, "Expecting shadow display: " + display );
  200. $shadowChild.fadeOut( 100, function() {
  201. assert.equal( $shadowChild.css( "display" ), displayNone, "Expecting shadow display: " + displayNone );
  202. $shadowChild.fadeIn( 100, function() {
  203. assert.equal( $shadowChild.css( "display" ), display, "Expecting shadow display: " + display );
  204. } );
  205. } );
  206. } );
  207. clock.tick( 300 );
  208. } );
  209. } );
  210. QUnit.test( "animate(Hash, Object, Function)", function( assert ) {
  211. assert.expect( 1 );
  212. var hash = { opacity: "show" },
  213. hashCopy = jQuery.extend( {}, hash );
  214. jQuery( "#foo" ).animate( hash, 0, function() {
  215. assert.equal( hash.opacity, hashCopy.opacity, "Check if animate changed the hash parameter" );
  216. } );
  217. } );
  218. QUnit.test( "animate relative values", function( assert ) {
  219. var value = 40,
  220. clock = this.clock,
  221. bases = [ "%", "px", "em" ],
  222. adjustments = [ "px", "em" ],
  223. container = jQuery( "<div></div>" )
  224. .css( { position: "absolute", height: "50em", width: "50em" } ),
  225. animations = bases.length * adjustments.length;
  226. assert.expect( 2 * animations );
  227. jQuery.each( bases, function( _, baseUnit ) {
  228. jQuery.each( adjustments, function( _, adjustUnit ) {
  229. var base = value + baseUnit,
  230. adjust = { height: "+=2" + adjustUnit, width: "-=2" + adjustUnit },
  231. elem = jQuery( "<div></div>" )
  232. .appendTo( container.clone().appendTo( "#qunit-fixture" ) )
  233. .css( {
  234. position: "absolute",
  235. height: base,
  236. width: value + adjustUnit
  237. } ),
  238. baseScale = elem[ 0 ].offsetHeight / value,
  239. adjustScale = elem[ 0 ].offsetWidth / value;
  240. elem.css( "width", base ).animate( adjust, 100, function() {
  241. assert.equal( this.offsetHeight, value * baseScale + 2 * adjustScale,
  242. baseUnit + "+=" + adjustUnit );
  243. assert.equal( this.offsetWidth, value * baseScale - 2 * adjustScale,
  244. baseUnit + "-=" + adjustUnit );
  245. } );
  246. clock.tick( 100 );
  247. } );
  248. } );
  249. } );
  250. QUnit.test( "animate negative height", function( assert ) {
  251. assert.expect( 1 );
  252. jQuery( "#foo" ).animate( { height: -100 }, 100, function() {
  253. assert.equal( this.offsetHeight, 0, "Verify height." );
  254. } );
  255. this.clock.tick( 100 );
  256. } );
  257. QUnit.test( "animate negative margin", function( assert ) {
  258. assert.expect( 1 );
  259. jQuery( "#foo" ).animate( { "marginTop": -100 }, 100, function() {
  260. assert.equal( jQuery( this ).css( "marginTop" ), "-100px", "Verify margin." );
  261. } );
  262. this.clock.tick( 100 );
  263. } );
  264. QUnit.test( "animate negative margin with px", function( assert ) {
  265. assert.expect( 1 );
  266. jQuery( "#foo" ).animate( { marginTop: "-100px" }, 100, function() {
  267. assert.equal( jQuery( this ).css( "marginTop" ), "-100px", "Verify margin." );
  268. } );
  269. this.clock.tick( 100 );
  270. } );
  271. QUnit.test( "animate negative padding", function( assert ) {
  272. assert.expect( 1 );
  273. jQuery( "#foo" ).animate( { "paddingBottom": -100 }, 100, function() {
  274. assert.equal( jQuery( this ).css( "paddingBottom" ), "0px", "Verify paddingBottom." );
  275. } );
  276. this.clock.tick( 100 );
  277. } );
  278. QUnit.test( "animate block as inline width/height", function( assert ) {
  279. assert.expect( 3 );
  280. jQuery( "#foo" ).css( { display: "inline", width: "", height: "" } ).animate( { width: 42, height: 42 }, 100, function() {
  281. assert.equal( jQuery( this ).css( "display" ), "inline-block", "inline-block was set on non-floated inline element when animating width/height" );
  282. assert.equal( this.offsetWidth, 42, "width was animated" );
  283. assert.equal( this.offsetHeight, 42, "height was animated" );
  284. } );
  285. this.clock.tick( 100 );
  286. } );
  287. QUnit.test( "animate native inline width/height", function( assert ) {
  288. assert.expect( 3 );
  289. jQuery( "#foo" ).css( { display: "", width: "", height: "" } )
  290. .append( "<span>text</span>" )
  291. .children( "span" )
  292. .animate( { width: 42, height: 42 }, 100, function() {
  293. assert.equal( jQuery( this ).css( "display" ), "inline-block", "inline-block was set on non-floated inline element when animating width/height" );
  294. assert.equal( this.offsetWidth, 42, "width was animated" );
  295. assert.equal( this.offsetHeight, 42, "height was animated" );
  296. } );
  297. this.clock.tick( 100 );
  298. } );
  299. QUnit.test( "animate block width/height", function( assert ) {
  300. assert.expect( 3 );
  301. jQuery( "<div>" ).appendTo( "#qunit-fixture" ).css( {
  302. display: "block",
  303. width: 20,
  304. height: 20,
  305. paddingLeft: 60
  306. } ).animate( {
  307. width: 42,
  308. height: 42
  309. }, {
  310. duration: 100,
  311. step: function() {
  312. if ( jQuery( this ).width() > 42 ) {
  313. assert.ok( false, "width was incorrectly augmented during animation" );
  314. }
  315. },
  316. complete: function() {
  317. assert.equal( jQuery( this ).css( "display" ), "block", "inline-block was not set on block element when animating width/height" );
  318. assert.equal( jQuery( this ).width(), 42, "width was animated" );
  319. assert.equal( jQuery( this ).height(), 42, "height was animated" );
  320. }
  321. } );
  322. this.clock.tick( 100 );
  323. } );
  324. QUnit.test( "animate table width/height", function( assert ) {
  325. assert.expect( 1 );
  326. jQuery( "#table" ).animate( { width: 42, height: 42 }, 100, function() {
  327. assert.equal( jQuery( this ).css( "display" ), "table", "display mode is correct" );
  328. } );
  329. this.clock.tick( 100 );
  330. } );
  331. QUnit.test( "animate table-row width/height", function( assert ) {
  332. assert.expect( 3 );
  333. var tr = jQuery( "#table" )
  334. .attr( { "cellspacing": 0, "cellpadding": 0, "border": 0 } )
  335. .html( "<tr style='height:42px;'><td style='padding:0;'><div style='width:20px;height:20px;'></div></td></tr>" )
  336. .find( "tr" );
  337. tr.animate( { width: 10, height: 10 }, 100, function() {
  338. assert.equal( jQuery( this ).css( "display" ), "table-row", "display mode is correct" );
  339. assert.equal( this.offsetWidth, 20, "width animated to shrink wrap point" );
  340. assert.equal( this.offsetHeight, 20, "height animated to shrink wrap point" );
  341. } );
  342. this.clock.tick( 100 );
  343. } );
  344. QUnit.test( "animate table-cell width/height", function( assert ) {
  345. assert.expect( 3 );
  346. var td = jQuery( "#table" )
  347. .attr( { "cellspacing": 0, "cellpadding": 0, "border": 0 } )
  348. .html( "<tr><td style='width:42px;height:42px;padding:0;'><div style='width:20px;height:20px;'></div></td></tr>" )
  349. .find( "td" );
  350. td.animate( { width: 10, height: 10 }, 100, function() {
  351. assert.equal( jQuery( this ).css( "display" ), "table-cell", "display mode is correct" );
  352. assert.equal( this.offsetWidth, 20, "width animated to shrink wrap point" );
  353. assert.equal( this.offsetHeight, 20, "height animated to shrink wrap point" );
  354. } );
  355. this.clock.tick( 100 );
  356. } );
  357. QUnit.test( "animate percentage(%) on width/height", function( assert ) {
  358. assert.expect( 2 );
  359. var $div = jQuery( "<div style='position:absolute;top:-999px;left:-999px;width:60px;height:60px;'><div style='width:50%;height:50%;'></div></div>" )
  360. .appendTo( "#qunit-fixture" ).children( "div" );
  361. $div.animate( { width: "25%", height: "25%" }, 13, function() {
  362. var $this = jQuery( this );
  363. assert.equal( $this.css( "width" ), "15px", "Width was animated to 15px rather than 25px" );
  364. assert.equal( $this.css( "height" ), "15px", "Height was animated to 15px rather than 25px" );
  365. } );
  366. this.clock.tick( 20 );
  367. } );
  368. QUnit.test( "animate resets overflow-x and overflow-y when finished", function( assert ) {
  369. assert.expect( 2 );
  370. jQuery( "#foo" )
  371. .css( { display: "block", width: 20, height: 20, overflowX: "visible", overflowY: "auto" } )
  372. .animate( { width: 42, height: 42 }, 100, function() {
  373. assert.equal( this.style.overflowX, "visible", "overflow-x is visible" );
  374. assert.equal( this.style.overflowY, "auto", "overflow-y is auto" );
  375. } );
  376. this.clock.tick( 100 );
  377. } );
  378. /* // This test ends up being flaky depending upon the CPU load
  379. QUnit.test("animate option (queue === false)", function( assert ) {
  380. var done = assert.async();
  381. assert.expect(1);
  382. var order = [];
  383. var $foo = jQuery("#foo");
  384. $foo.animate({width:"100px"}, 3000, function () {
  385. // should finish after unqueued animation so second
  386. order.push(2);
  387. assert.deepEqual( order, [ 1, 2 ], "Animations finished in the correct order" );
  388. done();
  389. });
  390. $foo.animate({fontSize:"2em"}, {queue:false, duration:10, complete:function () {
  391. // short duration and out of queue so should finish first
  392. order.push(1);
  393. }});
  394. });
  395. */
  396. QUnit.test( "animate option { queue: false }", function( assert ) {
  397. assert.expect( 2 );
  398. var foo = jQuery( "#foo" );
  399. foo.animate( {
  400. fontSize: "2em"
  401. }, {
  402. queue: false,
  403. duration: 10,
  404. complete: function() {
  405. assert.ok( true, "Animation Completed" );
  406. }
  407. } );
  408. this.clock.tick( 10 );
  409. assert.equal( foo.queue().length, 0, "Queue is empty" );
  410. } );
  411. QUnit.test( "animate option { queue: true }", function( assert ) {
  412. assert.expect( 2 );
  413. var foo = jQuery( "#foo" );
  414. foo.animate( {
  415. fontSize: "2em"
  416. }, {
  417. queue: true,
  418. duration: 10,
  419. complete: function() {
  420. assert.ok( true, "Animation Completed" );
  421. }
  422. } );
  423. assert.notEqual( foo.queue().length, 0, "Default queue is not empty" );
  424. //clear out existing timers before next test
  425. this.clock.tick( 10 );
  426. } );
  427. QUnit.test( "animate option { queue: 'name' }", function( assert ) {
  428. assert.expect( 5 );
  429. var foo = jQuery( "#foo" ),
  430. origWidth = parseFloat( foo.css( "width" ) ),
  431. order = [];
  432. foo.animate( { width: origWidth + 100 }, {
  433. queue: "name",
  434. duration: 1,
  435. complete: function() {
  436. // second callback function
  437. order.push( 2 );
  438. assert.equal( parseFloat( foo.css( "width" ) ), origWidth + 100, "Animation ended" );
  439. assert.equal( foo.queue( "name" ).length, 1, "Queue length of 'name' queue" );
  440. }
  441. } ).queue( "name", function() {
  442. // last callback function
  443. assert.deepEqual( order, [ 1, 2 ], "Callbacks in expected order" );
  444. } );
  445. // this is the first callback function that should be called
  446. order.push( 1 );
  447. assert.equal( parseFloat( foo.css( "width" ) ), origWidth, "Animation does not start on its own." );
  448. assert.equal( foo.queue( "name" ).length, 2, "Queue length of 'name' queue" );
  449. foo.dequeue( "name" );
  450. this.clock.tick( 10 );
  451. } );
  452. QUnit.test( "animate with no properties", function( assert ) {
  453. assert.expect( 2 );
  454. var foo,
  455. divs = jQuery( "div" ),
  456. count = 0;
  457. divs.animate( {}, function() {
  458. count++;
  459. } );
  460. assert.equal( divs.length, count, "Make sure that callback is called for each element in the set." );
  461. foo = jQuery( "#foo" );
  462. foo.animate( {} );
  463. foo.animate( { top: 10 }, 100, function() {
  464. assert.ok( true, "Animation was properly dequeued." );
  465. } );
  466. this.clock.tick( 100 );
  467. } );
  468. QUnit.test( "animate duration 0", function( assert ) {
  469. assert.expect( 11 );
  470. var $elem,
  471. $elems = jQuery( [ { a:0 }, { a:0 } ] ),
  472. counter = 0;
  473. assert.equal( jQuery.timers.length, 0, "Make sure no animation was running from another test" );
  474. $elems.eq( 0 ).animate( { a:1 }, 0, function() {
  475. assert.ok( true, "Animate a simple property." );
  476. counter++;
  477. } );
  478. // Failed until [6115]
  479. assert.equal( jQuery.timers.length, 0, "Make sure synchronic animations are not left on jQuery.timers" );
  480. assert.equal( counter, 1, "One synchronic animations" );
  481. $elems.animate( { a:2 }, 0, function() {
  482. assert.ok( true, "Animate a second simple property." );
  483. counter++;
  484. } );
  485. assert.equal( counter, 3, "Multiple synchronic animations" );
  486. $elems.eq( 0 ).animate( { a:3 }, 0, function() {
  487. assert.ok( true, "Animate a third simple property." );
  488. counter++;
  489. } );
  490. $elems.eq( 1 ).animate( { a:3 }, 200, function() {
  491. counter++;
  492. // Failed until [6115]
  493. assert.equal( counter, 5, "One synchronic and one asynchronic" );
  494. } );
  495. this.clock.tick( 200 );
  496. $elem = jQuery( "<div></div>" );
  497. $elem.show( 0, function() {
  498. assert.ok( true, "Show callback with no duration" );
  499. } );
  500. $elem.hide( 0, function() {
  501. assert.ok( true, "Hide callback with no duration" );
  502. } );
  503. // manually clean up detached elements
  504. $elem.remove();
  505. } );
  506. QUnit.test( "animate hyphenated properties", function( assert ) {
  507. assert.expect( 1 );
  508. jQuery( "#foo" )
  509. .css( "font-size", 10 )
  510. .animate( { "font-size": 20 }, 200, function() {
  511. assert.equal( this.style.fontSize, "20px", "The font-size property was animated." );
  512. } );
  513. // FIXME why is this double only when run with other tests
  514. this.clock.tick( 400 );
  515. } );
  516. QUnit.test( "animate non-element", function( assert ) {
  517. assert.expect( 1 );
  518. var obj = { test: 0 };
  519. jQuery( obj ).animate( { test: 200 }, 200, function() {
  520. assert.equal( obj.test, 200, "The custom property should be modified." );
  521. } );
  522. this.clock.tick( 200 );
  523. } );
  524. QUnit.test( "animate non-element's zIndex without appending \"px\"", function( assert ) {
  525. assert.expect( 1 );
  526. var obj = { zIndex: 0 };
  527. jQuery( obj ).animate( { zIndex: 200 }, 200, function() {
  528. assert.equal( obj.zIndex, 200, "The custom property should be modified without appending \"px\"." );
  529. } );
  530. this.clock.tick( 200 );
  531. } );
  532. QUnit.test( "stop()", function( assert ) {
  533. assert.expect( 4 );
  534. var $one, $two,
  535. $foo = jQuery( "#foo" ),
  536. w = 0,
  537. nw;
  538. $foo.hide().css( "width", 200 )
  539. .animate( { "width": "show" }, 1500 );
  540. this.clock.tick( 100 );
  541. nw = $foo.css( "width" );
  542. assert.notEqual( parseFloat( nw ), w, "An animation occurred " + nw + " " + w + "px" );
  543. $foo.stop();
  544. nw = $foo.css( "width" );
  545. assert.notEqual( parseFloat( nw ), w, "Stop didn't reset the animation " + nw + " " + w + "px" );
  546. this.clock.tick( 100 );
  547. $foo.removeData();
  548. $foo.removeData( undefined, true );
  549. assert.equal( nw, $foo.css( "width" ), "The animation didn't continue" );
  550. $one = jQuery( "#fadein" );
  551. $two = jQuery( "#show" );
  552. $one.fadeTo( 100, 0, function() {
  553. $one.stop();
  554. } );
  555. this.clock.tick( 100 );
  556. $two.fadeTo( 100, 0, function() {
  557. assert.equal( $two.css( "opacity" ), "0", "Stop does not interfere with animations on other elements (#6641)" );
  558. // Reset styles
  559. $one.add( $two ).css( "opacity", "" );
  560. } );
  561. this.clock.tick( 100 );
  562. } );
  563. // In IE9 inside testswarm this test doesn't work properly
  564. ( function() {
  565. var type = "test";
  566. if ( QUnit.isSwarm && /msie 9\.0/i.test( window.navigator.userAgent ) ) {
  567. type = "skip";
  568. }
  569. QUnit[ type ]( "stop() - several in queue", function( assert ) {
  570. assert.expect( 5 );
  571. var nw, $foo = jQuery( "#foo" );
  572. // default duration is 400ms, so 800px ensures we aren't 0 or 1 after 1ms
  573. $foo.hide().css( "width", 800 );
  574. $foo.animate( { "width": "show" }, 400, "linear" );
  575. $foo.animate( { "width": "hide" } );
  576. $foo.animate( { "width": "show" } );
  577. this.clock.tick( 1 );
  578. jQuery.fx.tick();
  579. assert.equal( $foo.queue().length, 3, "3 in the queue" );
  580. nw = $foo.css( "width" );
  581. assert.notEqual( parseFloat( nw ), 1, "An animation occurred " + nw );
  582. $foo.stop();
  583. assert.equal( $foo.queue().length, 2, "2 in the queue" );
  584. nw = $foo.css( "width" );
  585. assert.notEqual( parseFloat( nw ), 1, "Stop didn't reset the animation " + nw );
  586. $foo.stop( true );
  587. assert.equal( $foo.queue().length, 0, "0 in the queue" );
  588. } );
  589. } )();
  590. QUnit.test( "stop(clearQueue)", function( assert ) {
  591. assert.expect( 4 );
  592. var $foo = jQuery( "#foo" ),
  593. w = 0,
  594. nw;
  595. $foo.hide().css( "width", 200 ).css( "width" );
  596. $foo.animate( { "width": "show" }, 1000 );
  597. $foo.animate( { "width": "hide" }, 1000 );
  598. $foo.animate( { "width": "show" }, 1000 );
  599. this.clock.tick( 100 );
  600. nw = $foo.css( "width" );
  601. assert.ok( parseFloat( nw ) !== w, "An animation occurred " + nw + " " + w + "px" );
  602. $foo.stop( true );
  603. nw = $foo.css( "width" );
  604. assert.ok( parseFloat( nw ) !== w, "Stop didn't reset the animation " + nw + " " + w + "px" );
  605. assert.equal( $foo.queue().length, 0, "The animation queue was cleared" );
  606. this.clock.tick( 100 );
  607. assert.equal( nw, $foo.css( "width" ), "The animation didn't continue" );
  608. } );
  609. QUnit.test( "stop(clearQueue, gotoEnd)", function( assert ) {
  610. assert.expect( 1 );
  611. var $foo = jQuery( "#foo" ),
  612. w = 0,
  613. nw;
  614. $foo.hide().css( "width", 200 ).css( "width" );
  615. $foo.animate( { width: "show" }, 1000 );
  616. $foo.animate( { width: "hide" }, 1000 );
  617. $foo.animate( { width: "show" }, 1000 );
  618. $foo.animate( { width: "hide" }, 1000 );
  619. this.clock.tick( 100 );
  620. nw = $foo.css( "width" );
  621. assert.ok( parseFloat( nw ) !== w, "An animation occurred " + nw + " " + w + "px" );
  622. $foo.stop( false, true );
  623. nw = $foo.css( "width" );
  624. // Disabled, being flaky
  625. //equal( nw, 1, "Stop() reset the animation" );
  626. this.clock.tick( 100 );
  627. // Disabled, being flaky
  628. //equal( $foo.queue().length, 2, "The next animation continued" );
  629. $foo.stop( true );
  630. } );
  631. QUnit.test( "stop( queue, ..., ... ) - Stop single queues", function( assert ) {
  632. assert.expect( 3 );
  633. var saved,
  634. foo = jQuery( "#foo" ).css( { width: 200, height: 200 } );
  635. foo.animate( {
  636. width: 400
  637. }, {
  638. duration: 500,
  639. complete: function() {
  640. assert.equal( parseFloat( foo.css( "width" ) ), 400, "Animation completed for standard queue" );
  641. assert.equal( parseFloat( foo.css( "height" ) ), saved, "Height was not changed after the second stop" );
  642. }
  643. } );
  644. foo.animate( {
  645. height: 400
  646. }, {
  647. duration: 1000,
  648. queue: "height"
  649. } ).dequeue( "height" ).stop( "height", false, true );
  650. assert.equal( parseFloat( foo.css( "height" ) ), 400, "Height was stopped with gotoEnd" );
  651. foo.animate( {
  652. height: 200
  653. }, {
  654. duration: 1000,
  655. queue: "height"
  656. } ).dequeue( "height" ).stop( "height", false, false );
  657. saved = parseFloat( foo.css( "height" ) );
  658. this.clock.tick( 500 );
  659. } );
  660. QUnit[ jQuery.find.compile ? "test" : "skip" ]( "toggle()", function( assert ) {
  661. assert.expect( 6 );
  662. var x = jQuery( "#foo" );
  663. assert.ok( x.is( ":visible" ), "is visible" );
  664. x.toggle();
  665. assert.ok( x.is( ":hidden" ), "is hidden" );
  666. x.toggle();
  667. assert.ok( x.is( ":visible" ), "is visible again" );
  668. x.toggle( true );
  669. assert.ok( x.is( ":visible" ), "is visible" );
  670. x.toggle( false );
  671. assert.ok( x.is( ":hidden" ), "is hidden" );
  672. x.toggle( true );
  673. assert.ok( x.is( ":visible" ), "is visible again" );
  674. } );
  675. QUnit.test( "jQuery.fx.prototype.cur() - <1.8 Back Compat", function( assert ) {
  676. assert.expect( 7 );
  677. var div = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" ).css( {
  678. color: "#ABC",
  679. border: "5px solid black",
  680. left: "auto",
  681. marginBottom: "-11000px"
  682. } )[ 0 ];
  683. assert.equal(
  684. ( new jQuery.fx( div, {}, "color" ) ).cur(),
  685. jQuery.css( div, "color" ),
  686. "Return the same value as jQuery.css for complex properties (bug #7912)"
  687. );
  688. assert.strictEqual(
  689. ( new jQuery.fx( div, {}, "borderLeftWidth" ) ).cur(),
  690. 5,
  691. "Return simple values parsed as Float"
  692. );
  693. // backgroundPosition actually returns 0% 0% in most browser
  694. // this fakes a "" return
  695. // hook now gets called twice because Tween will grab the current
  696. // value as it is being newed
  697. jQuery.cssHooks.backgroundPosition = {
  698. get: function() {
  699. assert.ok( true, "hook used" );
  700. return "";
  701. }
  702. };
  703. assert.strictEqual(
  704. ( new jQuery.fx( div, {}, "backgroundPosition" ) ).cur(),
  705. 0,
  706. "Return 0 when jQuery.css returns an empty string"
  707. );
  708. delete jQuery.cssHooks.backgroundPosition;
  709. assert.strictEqual(
  710. ( new jQuery.fx( div, {}, "left" ) ).cur(),
  711. 0,
  712. "Return 0 when jQuery.css returns 'auto'"
  713. );
  714. assert.equal(
  715. ( new jQuery.fx( div, {}, "marginBottom" ) ).cur(),
  716. -11000,
  717. "support negative values < -10000 (bug #7193)"
  718. );
  719. jQuery( div ).remove();
  720. } );
  721. QUnit.test( "Overflow and Display", function( assert ) {
  722. assert.expect( 4 );
  723. var
  724. testClass = jQuery.makeTest( "Overflow and Display" )
  725. .addClass( "overflow inline" ),
  726. testStyle = jQuery.makeTest( "Overflow and Display (inline style)" )
  727. .css( { overflow: "visible", display: "inline" } ),
  728. done = function() {
  729. assert.equal( jQuery.css( this, "overflow" ), "visible", "Overflow should be 'visible'" );
  730. assert.equal( jQuery.css( this, "display" ), "inline", "Display should be 'inline'" );
  731. };
  732. testClass.add( testStyle )
  733. .addClass( "widewidth" )
  734. .text( "Some sample text." )
  735. .before( "text before" )
  736. .after( "text after" )
  737. .animate( { opacity: 0.5 }, "slow", done );
  738. this.clock.tick( 600 );
  739. } );
  740. jQuery.each( {
  741. "CSS Auto": function( elem, prop ) {
  742. jQuery( elem ).addClass( "auto" + prop )
  743. .text( "This is a long string of text." );
  744. return "";
  745. },
  746. "JS Auto": function( elem, prop ) {
  747. jQuery( elem ).css( prop, "" )
  748. .text( "This is a long string of text." );
  749. return "";
  750. },
  751. "CSS 100": function( elem, prop ) {
  752. jQuery( elem ).addClass( "large" + prop );
  753. return "";
  754. },
  755. "JS 100": function( elem, prop ) {
  756. jQuery( elem ).css( prop, prop === "opacity" ? 1 : "100px" );
  757. return prop === "opacity" ? 1 : 100;
  758. },
  759. "CSS 50": function( elem, prop ) {
  760. jQuery( elem ).addClass( "med" + prop );
  761. return "";
  762. },
  763. "JS 50": function( elem, prop ) {
  764. jQuery( elem ).css( prop, prop === "opacity" ? 0.50 : "50px" );
  765. return prop === "opacity" ? 0.5 : 50;
  766. },
  767. "CSS 0": function( elem, prop ) {
  768. jQuery( elem ).addClass( "no" + prop );
  769. return "";
  770. },
  771. "JS 0": function( elem, prop ) {
  772. jQuery( elem ).css( prop, prop === "opacity" ? 0 : "0px" );
  773. return 0;
  774. }
  775. }, function( fn, f ) {
  776. jQuery.each( {
  777. "show": function( elem, prop ) {
  778. jQuery( elem ).hide().addClass( "wide" + prop );
  779. return "show";
  780. },
  781. "hide": function( elem, prop ) {
  782. jQuery( elem ).addClass( "wide" + prop );
  783. return "hide";
  784. },
  785. "100": function( elem, prop ) {
  786. jQuery( elem ).addClass( "wide" + prop );
  787. return prop === "opacity" ? 1 : 100;
  788. },
  789. "50": function( elem, prop ) {
  790. return prop === "opacity" ? 0.50 : 50;
  791. },
  792. "0": function( elem ) {
  793. jQuery( elem ).addClass( "noback" );
  794. return 0;
  795. }
  796. }, function( tn, t ) {
  797. QUnit.test( fn + " to " + tn, function( assert ) {
  798. var num, anim,
  799. elem = jQuery.makeTest( fn + " to " + tn ),
  800. t_w = t( elem, "width" ),
  801. f_w = f( elem, "width" ),
  802. t_h = t( elem, "height" ),
  803. f_h = f( elem, "height" ),
  804. t_o = t( elem, "opacity" ),
  805. f_o = f( elem, "opacity" );
  806. if ( f_o === "" ) {
  807. f_o = 1;
  808. }
  809. num = 0;
  810. // TODO: uncrowd this
  811. if ( t_h === "show" ) { num++; }
  812. if ( t_w === "show" ) { num++; }
  813. if ( t_w === "hide" || t_w === "show" ) { num++; }
  814. if ( t_h === "hide" || t_h === "show" ) { num++; }
  815. if ( t_o === "hide" || t_o === "show" ) { num++; }
  816. if ( t_w === "hide" ) { num++; }
  817. if ( t_o.constructor === Number ) { num += 2; }
  818. if ( t_w.constructor === Number ) { num += 2; }
  819. if ( t_h.constructor === Number ) { num += 2; }
  820. assert.expect( num );
  821. anim = { width: t_w, height: t_h, opacity: t_o };
  822. elem.animate( anim, 50 );
  823. jQuery.when( elem ).done( function( $elem ) {
  824. var cur_o, cur_w, cur_h, old_h,
  825. elem = $elem[ 0 ];
  826. if ( t_w === "show" ) {
  827. assert.equal( $elem.css( "display" ), "block",
  828. "Showing, display should block: " + elem.style.display );
  829. }
  830. if ( t_w === "hide" || t_w === "show" ) {
  831. assert.ok( f_w === "" ? elem.style.width === f_w : elem.style.width.indexOf( f_w ) === 0, "Width must be reset to " + f_w + ": " + elem.style.width );
  832. }
  833. if ( t_h === "hide" || t_h === "show" ) {
  834. assert.ok( f_h === "" ? elem.style.height === f_h : elem.style.height.indexOf( f_h ) === 0, "Height must be reset to " + f_h + ": " + elem.style.height );
  835. }
  836. cur_o = jQuery.style( elem, "opacity" );
  837. if ( f_o !== jQuery.css( elem, "opacity" ) ) {
  838. f_o = f( elem, "opacity" );
  839. }
  840. if ( t_o === "hide" || t_o === "show" ) {
  841. assert.equal( cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o );
  842. }
  843. if ( t_w === "hide" ) {
  844. assert.equal( elem.style.display, "none", "Hiding, display should be none: " + elem.style.display );
  845. }
  846. if ( t_o.constructor === Number ) {
  847. assert.equal( cur_o, t_o, "Final opacity should be " + t_o + ": " + cur_o );
  848. assert.ok( jQuery.css( elem, "opacity" ) !== "" || cur_o === t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o );
  849. }
  850. if ( t_w.constructor === Number ) {
  851. assert.equal( elem.style.width, t_w + "px", "Final width should be " + t_w + ": " + elem.style.width );
  852. cur_w = jQuery.css( elem, "width" );
  853. assert.ok( elem.style.width !== "" || cur_w === t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w );
  854. }
  855. if ( t_h.constructor === Number ) {
  856. assert.equal( elem.style.height, t_h + "px", "Final height should be " + t_h + ": " + elem.style.height );
  857. cur_h = jQuery.css( elem, "height" );
  858. assert.ok( elem.style.height !== "" || cur_h === t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_h );
  859. }
  860. if ( t_h === "show" ) {
  861. old_h = jQuery.css( elem, "height" );
  862. jQuery( elem ).append( "<br/>Some more text<br/>and some more..." );
  863. if ( /Auto/.test( fn ) ) {
  864. assert.notEqual( jQuery.css( elem, "height" ), old_h, "Make sure height is auto." );
  865. } else {
  866. assert.equal( jQuery.css( elem, "height" ), old_h, "Make sure height is not auto." );
  867. }
  868. }
  869. // manually remove generated element
  870. jQuery( elem ).remove();
  871. } );
  872. this.clock.tick( 100 );
  873. } );
  874. } );
  875. } );
  876. QUnit.test( "Effects chaining", function( assert ) {
  877. var remaining = 16,
  878. props = [ "opacity", "height", "width", "display", "overflow" ],
  879. setup = function( name, selector ) {
  880. var $el = jQuery( selector );
  881. return $el.data( getProps( $el[ 0 ] ) ).data( "name", name );
  882. },
  883. check = function() {
  884. var data = jQuery.data( this ),
  885. name = data.name;
  886. delete data.name;
  887. assert.deepEqual( getProps( this ), data, name );
  888. jQuery.removeData( this );
  889. },
  890. getProps = function( el ) {
  891. var obj = {};
  892. jQuery.each( props, function( i, prop ) {
  893. obj[ prop ] = prop === "overflow" && el.style[ prop ] || jQuery.css( el, prop );
  894. } );
  895. return obj;
  896. };
  897. assert.expect( remaining );
  898. setup( ".fadeOut().fadeIn()", "#fadein div" ).fadeOut( "fast" ).fadeIn( "fast", check );
  899. setup( ".fadeIn().fadeOut()", "#fadeout div" ).fadeIn( "fast" ).fadeOut( "fast", check );
  900. setup( ".hide().show()", "#show div" ).hide( "fast" ).show( "fast", check );
  901. setup( ".show().hide()", "#hide div" ).show( "fast" ).hide( "fast", check );
  902. setup( ".show().hide(easing)", "#easehide div" ).show( "fast" ).hide( "fast", "linear", check );
  903. setup( ".toggle().toggle() - in", "#togglein div" ).toggle( "fast" ).toggle( "fast", check );
  904. setup( ".toggle().toggle() - out", "#toggleout div" ).toggle( "fast" ).toggle( "fast", check );
  905. setup( ".toggle().toggle(easing) - out", "#easetoggleout div" ).toggle( "fast" ).toggle( "fast", "linear", check );
  906. setup( ".slideDown().slideUp()", "#slidedown div" ).slideDown( "fast" ).slideUp( "fast", check );
  907. setup( ".slideUp().slideDown()", "#slideup div" ).slideUp( "fast" ).slideDown( "fast", check );
  908. setup( ".slideUp().slideDown(easing)", "#easeslideup div" ).slideUp( "fast" ).slideDown( "fast", "linear", check );
  909. setup( ".slideToggle().slideToggle() - in", "#slidetogglein div" ).slideToggle( "fast" ).slideToggle( "fast", check );
  910. setup( ".slideToggle().slideToggle() - out", "#slidetoggleout div" ).slideToggle( "fast" ).slideToggle( "fast", check );
  911. setup( ".fadeToggle().fadeToggle() - in", "#fadetogglein div" ).fadeToggle( "fast" ).fadeToggle( "fast", check );
  912. setup( ".fadeToggle().fadeToggle() - out", "#fadetoggleout div" ).fadeToggle( "fast" ).fadeToggle( "fast", check );
  913. setup( ".fadeTo(0.5).fadeTo(1.0, easing)", "#fadeto div" ).fadeTo( "fast", 0.5 ).fadeTo( "fast", 1.0, "linear", check );
  914. this.clock.tick( 400 );
  915. } );
  916. jQuery.makeTest = function( text ) {
  917. var elem = jQuery( "<div></div>" )
  918. .attr( "id", "test" + jQuery.makeTest.id++ )
  919. .addClass( "box" );
  920. jQuery( "<h4></h4>" )
  921. .text( text )
  922. .appendTo( "#fx-tests" )
  923. .after( elem );
  924. return elem;
  925. };
  926. jQuery.makeTest.id = 1;
  927. QUnit.test( "jQuery.show('fast') doesn't clear radio buttons (bug #1095)", function( assert ) {
  928. assert.expect( 4 );
  929. var $checkedtest = jQuery( "#checkedtest" );
  930. $checkedtest.hide().show( "fast", function() {
  931. assert.ok( jQuery( "input[type='radio']", $checkedtest ).first().attr( "checked" ), "Check first radio still checked." );
  932. assert.ok( !jQuery( "input[type='radio']", $checkedtest ).last().attr( "checked" ), "Check last radio still NOT checked." );
  933. assert.ok( jQuery( "input[type='checkbox']", $checkedtest ).first().attr( "checked" ), "Check first checkbox still checked." );
  934. assert.ok( !jQuery( "input[type='checkbox']", $checkedtest ).last().attr( "checked" ), "Check last checkbox still NOT checked." );
  935. } );
  936. this.clock.tick( 200 );
  937. } );
  938. QUnit.test( "interrupt toggle", function( assert ) {
  939. assert.expect( 24 );
  940. var env = this,
  941. longDuration = 2000,
  942. shortDuration = 500,
  943. remaining = 0,
  944. $elems = jQuery( ".chain-test" ),
  945. clock = this.clock,
  946. finish = function() {
  947. };
  948. jQuery.each( { slideToggle: "height", fadeToggle: "opacity", toggle: "width" }, function( method, prop ) {
  949. var $methodElems = $elems.filter( "[id^='" + method.toLowerCase() + "']" ).each( function() {
  950. // Don't end test until we're done with this element
  951. remaining++;
  952. // Save original property value for comparison
  953. jQuery.data( this, "startVal", jQuery( this ).css( prop ) );
  954. } );
  955. // Interrupt a hiding toggle
  956. $methodElems[ method ]( longDuration );
  957. setTimeout( function() {
  958. $methodElems.stop().each( function() {
  959. assert.notEqual( jQuery( this ).css( prop ), jQuery.data( this, "startVal" ), ".stop() before completion of hiding ." + method + "() - #" + this.id );
  960. } );
  961. // Restore
  962. $methodElems[ method ]( shortDuration, function() {
  963. var id = this.id,
  964. $elem = jQuery( this ),
  965. startVal = $elem.data( "startVal" );
  966. $elem.removeData( "startVal" );
  967. assert.equal( $elem.css( prop ), startVal, "original value restored by ." + method + "() - #" + id );
  968. // Interrupt a showing toggle
  969. $elem.hide()[ method ]( longDuration );
  970. setTimeout( function() {
  971. $elem.stop();
  972. assert.notEqual( $elem.css( prop ), startVal, ".stop() before completion of showing ." + method + "() - #" + id );
  973. // Restore
  974. $elem[ method ]( shortDuration, function() {
  975. assert.equal( $elem.css( prop ), startVal, "original value restored by ." + method + "() - #" + id );
  976. finish();
  977. } );
  978. }, shortDuration );
  979. } );
  980. }, shortDuration );
  981. } );
  982. clock.tick( longDuration );
  983. // FIXME untangle the set timeouts
  984. } );
  985. QUnit.test( "animate with per-property easing", function( assert ) {
  986. assert.expect( 5 );
  987. var data = { a: 0, b: 0, c: 0 },
  988. test1Called = false,
  989. test2Called = false,
  990. defaultTestCalled = false,
  991. props = {
  992. a: [ 100, "_test1" ],
  993. b: [ 100, "_test2" ],
  994. c: 100
  995. };
  996. jQuery.easing._test1 = function( p ) {
  997. test1Called = true;
  998. return p;
  999. };
  1000. jQuery.easing._test2 = function( p ) {
  1001. test2Called = true;
  1002. return p;
  1003. };
  1004. jQuery.easing._defaultTest = function( p ) {
  1005. defaultTestCalled = true;
  1006. return p;
  1007. };
  1008. jQuery( data ).animate( props, 400, "_defaultTest", function() {
  1009. assert.ok( test1Called, "Easing function (_test1) called" );
  1010. assert.ok( test2Called, "Easing function (_test2) called" );
  1011. assert.ok( defaultTestCalled, "Easing function (_default) called" );
  1012. assert.equal( props.a[ 1 ], "_test1", "animate does not change original props (per-property easing would be lost)" );
  1013. assert.equal( props.b[ 1 ], "_test2", "animate does not change original props (per-property easing would be lost)" );
  1014. } );
  1015. this.clock.tick( 400 );
  1016. } );
  1017. QUnit.test( "animate with CSS shorthand properties", function( assert ) {
  1018. assert.expect( 11 );
  1019. var easeAnimation_count = 0,
  1020. easeProperty_count = 0,
  1021. propsBasic = { "padding": "10 20 30" },
  1022. propsSpecial = { "padding": [ "1 2 3", "propertyScope" ] };
  1023. jQuery.easing.animationScope = function( p ) {
  1024. if ( p >= 1 ) {
  1025. easeAnimation_count++;
  1026. }
  1027. return p;
  1028. };
  1029. jQuery.easing.propertyScope = function( p ) {
  1030. if ( p >= 1 ) {
  1031. easeProperty_count++;
  1032. }
  1033. return p;
  1034. };
  1035. jQuery( "#foo" )
  1036. .animate( propsBasic, 200, "animationScope", function() {
  1037. assert.equal( this.style.paddingTop, "10px", "padding-top was animated" );
  1038. assert.equal( this.style.paddingLeft, "20px", "padding-left was animated" );
  1039. assert.equal( this.style.paddingRight, "20px", "padding-right was animated" );
  1040. assert.equal( this.style.paddingBottom, "30px", "padding-bottom was animated" );
  1041. assert.equal( easeAnimation_count, 4, "per-animation default easing called for each property" );
  1042. easeAnimation_count = 0;
  1043. } )
  1044. .animate( propsSpecial, 200, "animationScope", function() {
  1045. assert.equal( this.style.paddingTop, "1px", "padding-top was animated again" );
  1046. assert.equal( this.style.paddingLeft, "2px", "padding-left was animated again" );
  1047. assert.equal( this.style.paddingRight, "2px", "padding-right was animated again" );
  1048. assert.equal( this.style.paddingBottom, "3px", "padding-bottom was animated again" );
  1049. assert.equal( easeAnimation_count, 0, "per-animation default easing not called" );
  1050. assert.equal( easeProperty_count, 4, "special easing called for each property" );
  1051. jQuery( this ).css( "padding", "0" );
  1052. delete jQuery.easing.animationScope;
  1053. delete jQuery.easing.propertyScope;
  1054. } );
  1055. this.clock.tick( 400 );
  1056. } );
  1057. QUnit.test( "hide hidden elements, with animation (bug #7141)", function( assert ) {
  1058. assert.expect( 4 );
  1059. var div = jQuery( "<div id='bug7141' style='display:none'></div>" ).appendTo( "#qunit-fixture" );
  1060. assert.equal( div.css( "display" ), "none", "Element is initially hidden" );
  1061. div.hide( 10, function() {
  1062. assert.equal( div.css( "display" ), "none", "Element is hidden in .hide() callback" );
  1063. div.show( 11, function() {
  1064. assert.equal( div.css( "display" ), "block", "Element is visible in .show() callback" );
  1065. } );
  1066. } );
  1067. this.clock.tick( 50 );
  1068. assert.equal( div.css( "display" ), "block", "Element is visible after animations" );
  1069. } );
  1070. QUnit.test( "animate unit-less properties (#4966)", function( assert ) {
  1071. assert.expect( 2 );
  1072. var div = jQuery( "<div style='z-index: 0; position: absolute;'></div>" ).appendTo( "#qunit-fixture" );
  1073. assert.equal( div.css( "z-index" ), "0", "z-index is 0" );
  1074. div.animate( { zIndex: 2 }, function() {
  1075. assert.equal( div.css( "z-index" ), "2", "z-index is 2" );
  1076. } );
  1077. this.clock.tick( 400 );
  1078. } );
  1079. QUnit.test( "animate properties missing px w/ opacity as last (#9074)", function( assert ) {
  1080. assert.expect( 6 );
  1081. var ml, l,
  1082. div = jQuery( "<div style='position: absolute; margin-left: 0; left: 0px;'></div>" )
  1083. .appendTo( "#qunit-fixture" );
  1084. function cssInt( prop ) {
  1085. return parseInt( div.css( prop ), 10 );
  1086. }
  1087. assert.equal( cssInt( "marginLeft" ), 0, "Margin left is 0" );
  1088. assert.equal( cssInt( "left" ), 0, "Left is 0" );
  1089. div.animate( {
  1090. left: 200,
  1091. marginLeft: 200,
  1092. opacity: 0
  1093. }, 2000 );
  1094. this.clock.tick( 500 );
  1095. ml = cssInt( "marginLeft" );
  1096. l = cssInt( "left" );
  1097. assert.notEqual( ml, 0, "Margin left is not 0 after partial animate" );
  1098. assert.notEqual( ml, 200, "Margin left is not 200 after partial animate" );
  1099. assert.notEqual( l, 0, "Left is not 0 after partial animate" );
  1100. assert.notEqual( l, 200, "Left is not 200 after partial animate" );
  1101. div.stop().remove();
  1102. } );
  1103. QUnit.test( "callbacks should fire in correct order (#9100)", function( assert ) {
  1104. assert.expect( 1 );
  1105. var a = 1,
  1106. cb = 0;
  1107. jQuery( "<p data-operation='*2'></p><p data-operation='^2'></p>" ).appendTo( "#qunit-fixture" )
  1108. // The test will always pass if no properties are animated or if the duration is 0
  1109. .animate( { fontSize: 12 }, 13, function() {
  1110. a *= jQuery( this ).data( "operation" ) === "*2" ? 2 : a;
  1111. cb++;
  1112. if ( cb === 2 ) {
  1113. assert.equal( a, 4, "test value has been *2 and _then_ ^2" );
  1114. }
  1115. } );
  1116. this.clock.tick( 20 );
  1117. } );
  1118. QUnit.test( "callbacks that throw exceptions will be removed (#5684)", function( assert ) {
  1119. assert.expect( 2 );
  1120. var foo = jQuery( "#foo" );
  1121. function TestException() {
  1122. }
  1123. foo.animate( { height: 1 }, 1, function() {
  1124. throw new TestException();
  1125. } );
  1126. // this test thoroughly abuses undocumented methods - please feel free to update
  1127. // with any changes internally to these functions.
  1128. // make sure that the standard timer loop will NOT run.
  1129. jQuery.fx.stop();
  1130. this.clock.tick( 1 );
  1131. assert.throws( jQuery.fx.tick, TestException, "Exception was thrown" );
  1132. // the second call shouldn't
  1133. jQuery.fx.tick();
  1134. assert.ok( true, "Test completed without throwing a second exception" );
  1135. } );
  1136. QUnit.test( "animate will scale margin properties individually", function( assert ) {
  1137. assert.expect( 2 );
  1138. var foo = jQuery( "#foo" ).css( {
  1139. "margin": 0,
  1140. "marginLeft": 100
  1141. } );
  1142. assert.ok( foo.css( "marginLeft" ) !== foo.css( "marginRight" ), "Sanity Check" );
  1143. foo.animate( {
  1144. "margin": 200
  1145. } ).stop();
  1146. assert.ok( foo.css( "marginLeft" ) !== foo.css( "marginRight" ), "The margin properties are different" );
  1147. // clean up for next test
  1148. foo.css( {
  1149. "marginLeft": "",
  1150. "marginRight": "",
  1151. "marginTop": "",
  1152. "marginBottom": ""
  1153. } );
  1154. } );
  1155. QUnit.test( "Do not append px to 'fill-opacity' #9548", function( assert ) {
  1156. assert.expect( 1 );
  1157. var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
  1158. $div.css( "fill-opacity", 0 ).animate( { "fill-opacity": 1.0 }, 0, function() {
  1159. assert.equal( jQuery( this ).css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" );
  1160. $div.remove();
  1161. } );
  1162. } );
  1163. QUnit.test( "line-height animates correctly (#13855)", function( assert ) {
  1164. assert.expect( 12 );
  1165. var t0,
  1166. clock = this.clock,
  1167. longDuration = 2000,
  1168. shortDuration = 500,
  1169. animated = jQuery(
  1170. "<p style='line-height: 100;'>unitless</p>" +
  1171. "<p style='line-height: 5000px;'>px</p>" +
  1172. "<p style='line-height: 5000%;'>percent</p>" +
  1173. "<p style='line-height: 100em;'>em</p>"
  1174. ).appendTo( "#qunit-fixture" ),
  1175. initialHeight = jQuery.map( animated, function( el ) {
  1176. return jQuery( el ).height();
  1177. } ),
  1178. tolerance = 1.5;
  1179. // Delay start to improve test stability
  1180. setTimeout( function() {
  1181. t0 = +( new Date() );
  1182. animated.animate( { "line-height": "hide" }, longDuration, "linear" );
  1183. setTimeout( function() {
  1184. var progress = ( ( new Date() ) - t0 ) / longDuration;
  1185. animated.each( function( i ) {
  1186. var label = jQuery.text( this ),
  1187. initial = initialHeight[ i ],
  1188. height = jQuery( this ).height(),
  1189. lower = initial * ( 1 - progress ) / tolerance;
  1190. assert.ok( height < initial, "hide " + label + ": upper bound; " +
  1191. height + " < " + initial + " @ " + ( progress * 100 ) + "%" );
  1192. assert.ok( height > lower, "hide " + label + ": lower bound; " +
  1193. height + " > " + lower + " @ " + ( progress * 100 ) + "%" );
  1194. } );
  1195. t0 = +( new Date() );
  1196. animated.stop( true, true ).hide()
  1197. .animate( { "line-height": "show" }, longDuration, "linear" );
  1198. setTimeout( function() {
  1199. var progress = ( ( new Date() ) - t0 ) / longDuration;
  1200. animated.each( function( i ) {
  1201. var label = jQuery.text( this ),
  1202. initial = initialHeight[ i ],
  1203. height = jQuery( this ).height(),
  1204. upper = initial * progress * tolerance;
  1205. assert.ok( height < upper, "show " + label + ": upper bound; " +
  1206. height + " < " + upper + " @ " + ( progress * 100 ) + "%" );
  1207. } );
  1208. animated.stop( true, true );
  1209. }, shortDuration );
  1210. clock.tick( shortDuration );
  1211. }, shortDuration );
  1212. clock.tick( shortDuration );
  1213. }, 50 );
  1214. clock.tick( 50 );
  1215. } );
  1216. // Start 1.8 Animation tests
  1217. QUnit.test( "jQuery.Animation( object, props, opts )", function( assert ) {
  1218. assert.expect( 4 );
  1219. var animation,
  1220. testObject = {
  1221. "foo": 0,
  1222. "bar": 1,
  1223. "width": 100
  1224. },
  1225. testDest = {
  1226. "foo": 1,
  1227. "bar": 0,
  1228. "width": 200
  1229. };
  1230. animation = jQuery.Animation( testObject, testDest, { "duration": 1 } );
  1231. animation.done( function() {
  1232. for ( var prop in testDest ) {
  1233. assert.equal( testObject[ prop ], testDest[ prop ], "Animated: " + prop );
  1234. }
  1235. animation.done( function() {
  1236. assert.deepEqual( testObject, testDest, "No unexpected properties" );
  1237. } );
  1238. } );
  1239. this.clock.tick( 10 );
  1240. } );
  1241. QUnit.test( "Animate Option: step: function( percent, tween )", function( assert ) {
  1242. assert.expect( 1 );
  1243. var counter = {};
  1244. jQuery( "#foo" ).animate( {
  1245. prop1: 1,
  1246. prop2: 2,
  1247. prop3: 3
  1248. }, {
  1249. duration: 1,
  1250. step: function( value, tween ) {
  1251. var calls = counter[ tween.prop ] = counter[ tween.prop ] || [];
  1252. // in case this is called multiple times for either, lets store it in
  1253. // 0 or 1 in the array
  1254. calls[ value === 0 ? 0 : 1 ] = value;
  1255. }
  1256. } ).queue( function( next ) {
  1257. assert.deepEqual( counter, {
  1258. prop1: [ 0, 1 ],
  1259. prop2: [ 0, 2 ],
  1260. prop3: [ 0, 3 ]
  1261. }, "Step function was called once at 0% and once at 100% for each property" );
  1262. next();
  1263. } );
  1264. this.clock.tick( 10 );
  1265. } );
  1266. QUnit.test( "Animate callbacks have correct context", function( assert ) {
  1267. assert.expect( 2 );
  1268. var foo = jQuery( "#foo" );
  1269. foo.animate( {
  1270. height: 10
  1271. }, 10, function() {
  1272. assert.equal( foo[ 0 ], this, "Complete callback after stop(true) `this` is element" );
  1273. } ).stop( true, true );
  1274. foo.animate( {
  1275. height: 100
  1276. }, 10, function() {
  1277. assert.equal( foo[ 0 ], this, "Complete callback `this` is element" );
  1278. } );
  1279. this.clock.tick( 10 );
  1280. } );
  1281. QUnit.test( "User supplied callback called after show when fx off (#8892)", function( assert ) {
  1282. assert.expect( 2 );
  1283. var foo = jQuery( "#foo" );
  1284. jQuery.fx.off = true;
  1285. foo.hide();
  1286. foo.fadeIn( 500, function() {
  1287. assert.ok( supportjQuery( this ).is( ":visible" ), "Element is visible in callback" );
  1288. foo.fadeOut( 500, function() {
  1289. assert.ok( supportjQuery( this ).is( ":hidden" ), "Element is hidden in callback" );
  1290. jQuery.fx.off = false;
  1291. } );
  1292. } );
  1293. this.clock.tick( 1000 );
  1294. } );
  1295. QUnit.test( "animate should set display for disconnected nodes", function( assert ) {
  1296. assert.expect( 20 );
  1297. var env = this,
  1298. showMethods = {
  1299. fadeIn: [],
  1300. fadeTo: [ "fast", 0.5 ],
  1301. slideDown: [ "fast" ],
  1302. show: [ 1 ],
  1303. animate: [ { width: "show" } ]
  1304. },
  1305. toggleMethods = {
  1306. toggle: [ 1 ],
  1307. slideToggle: []
  1308. },
  1309. $divEmpty = jQuery( "<div></div>" ),
  1310. $divTest = jQuery( "<div>test</div>" ),
  1311. $divNone = jQuery( "<div style='display: none;'></div>" ),
  1312. $divInline = jQuery( "<div style='display: inline;'></div>" ),
  1313. nullParentDisplay = $divEmpty.css( "display" ),
  1314. underFragmentDisplay = $divTest.css( "display" ),
  1315. clock = this.clock;
  1316. assert.strictEqual( $divEmpty[ 0 ].parentNode, null, "Setup: element with null parentNode" );
  1317. assert.strictEqual( ( $divTest[ 0 ].parentNode || {} ).nodeType, 11, "Setup: element under fragment" );
  1318. assert.strictEqual( $divEmpty.show()[ 0 ].style.display, "",
  1319. "set display with show() for element with null parentNode" );
  1320. assert.strictEqual( $divTest.show()[ 0 ].style.display, "",
  1321. "set display with show() for element under fragment" );
  1322. assert.strictEqual( $divNone.show()[ 0 ].style.display, "",
  1323. "show() should change display if it already set to none" );
  1324. assert.strictEqual( $divInline.show()[ 0 ].style.display, "inline",
  1325. "show() should not change display if it already set" );
  1326. jQuery.each( showMethods, function( name, opt ) {
  1327. jQuery.fn[ name ].apply( jQuery( "<div></div>" ), opt.concat( [ function() {
  1328. assert.strictEqual( jQuery( this ).css( "display" ), nullParentDisplay,
  1329. "." + name + " block with null parentNode" );
  1330. } ] ) );
  1331. jQuery.fn[ name ].apply( jQuery( "<div>test</div>" ), opt.concat( [ function() {
  1332. assert.strictEqual( jQuery( this ).css( "display" ), underFragmentDisplay,
  1333. "." + name + " block under fragment" );
  1334. } ] ) );
  1335. } );
  1336. jQuery.each( toggleMethods, function( name, opt ) {
  1337. jQuery.fn[ name ].apply( jQuery( "<div></div>" ), opt.concat( [ function() {
  1338. assert.strictEqual( jQuery( this ).css( "display" ), "none",
  1339. "." + name + " block with null parentNode" );
  1340. } ] ) );
  1341. jQuery.fn[ name ].apply( jQuery( "<div>test</div>" ), opt.concat( [ function() {
  1342. assert.strictEqual( jQuery( this ).css( "display" ), "none",
  1343. "." + name + " block under fragment" );
  1344. } ] ) );
  1345. } );
  1346. clock.tick( 400 );
  1347. } );
  1348. QUnit[ jQuery.find.compile ? "test" : "skip" ]( "Animation callback should not show animated element as :animated (#7157)", function( assert ) {
  1349. assert.expect( 1 );
  1350. var foo = jQuery( "#foo" );
  1351. foo.animate( {
  1352. opacity: 0
  1353. }, 100, function() {
  1354. assert.ok( !foo.is( ":animated" ), "The element is not animated" );
  1355. } );
  1356. this.clock.tick( 100 );
  1357. } );
  1358. QUnit[ jQuery.find.compile ? "test" : "skip" ]( "Initial step callback should show element as :animated (#14623)", function( assert ) {
  1359. assert.expect( 1 );
  1360. var foo = jQuery( "#foo" );
  1361. foo.animate( {
  1362. opacity: 0
  1363. }, {
  1364. duration: 100,
  1365. step: function() {
  1366. assert.ok( foo.is( ":animated" ), "The element matches :animated inside step function" );
  1367. }
  1368. } );
  1369. this.clock.tick( 1 );
  1370. foo.stop();
  1371. } );
  1372. QUnit.test( "hide called on element within hidden parent should set display to none (#10045)", function( assert ) {
  1373. assert.expect( 3 );
  1374. var hidden = jQuery( ".hidden" ),
  1375. elems = jQuery( "<div>hide</div><div>hide0</div><div>hide1</div>" );
  1376. hidden.append( elems );
  1377. jQuery.when(
  1378. elems.eq( 0 ).hide(),
  1379. elems.eq( 1 ).hide( 0 ),
  1380. elems.eq( 2 ).hide( 1 )
  1381. ).done( function() {
  1382. assert.strictEqual( elems.get( 0 ).style.display, "none", "hide() called on element within hidden parent should set display to none" );
  1383. assert.strictEqual( elems.get( 1 ).style.display, "none", "hide( 0 ) called on element within hidden parent should set display to none" );
  1384. assert.strictEqual( elems.get( 2 ).style.display, "none", "hide( 1 ) called on element within hidden parent should set display to none" );
  1385. elems.remove();
  1386. } );
  1387. this.clock.tick( 10 );
  1388. } );
  1389. QUnit.test( "hide, fadeOut and slideUp called on element width height and width = 0 should set display to none", function( assert ) {
  1390. assert.expect( 5 );
  1391. var foo = jQuery( "#foo" ),
  1392. i = 0,
  1393. elems = jQuery();
  1394. for ( ; i < 5; i++ ) {
  1395. elems = elems.add( "<div style='width:0;height:0;'></div>" );
  1396. }
  1397. foo.append( elems );
  1398. jQuery.when(
  1399. elems.eq( 0 ).hide(),
  1400. elems.eq( 1 ).hide( jQuery.noop ),
  1401. elems.eq( 2 ).hide( 1 ),
  1402. elems.eq( 3 ).fadeOut(),
  1403. elems.eq( 4 ).slideUp()
  1404. ).done( function() {
  1405. assert.strictEqual( elems.get( 0 ).style.display, "none", "hide() called on element width height and width = 0 should set display to none" );
  1406. assert.strictEqual( elems.get( 1 ).style.display, "none",
  1407. "hide( jQuery.noop ) called on element width height and width = 0 should set display to none" );
  1408. assert.strictEqual( elems.get( 2 ).style.display, "none", "hide( 1 ) called on element width height and width = 0 should set display to none" );
  1409. assert.strictEqual( elems.get( 3 ).style.display, "none", "fadeOut() called on element width height and width = 0 should set display to none" );
  1410. assert.strictEqual( elems.get( 4 ).style.display, "none", "slideUp() called on element width height and width = 0 should set display to none" );
  1411. } );
  1412. this.clock.tick( 400 );
  1413. } );
  1414. QUnit.test( "hide should not leave hidden inline elements visible (#14848)", function( assert ) {
  1415. assert.expect( 2 );
  1416. var el = jQuery( "#simon1" );
  1417. el.hide( 1, function() {
  1418. assert.equal( el.css( "display" ), "none", "hidden" );
  1419. el.hide( 1, function() {
  1420. assert.equal( el.css( "display" ), "none", "still hidden" );
  1421. } );
  1422. } );
  1423. this.clock.tick( 100 );
  1424. } );
  1425. QUnit.test( "Handle queue:false promises", function( assert ) {
  1426. assert.expect( 10 );
  1427. var foo = jQuery( "#foo" ).clone().addBack(),
  1428. step = 1;
  1429. foo.animate( {
  1430. top: 1
  1431. }, {
  1432. duration: 10,
  1433. queue: false,
  1434. complete: function() {
  1435. assert.ok( step++ <= 2, "Step one or two" );
  1436. }
  1437. } ).animate( {
  1438. bottom: 1
  1439. }, {
  1440. duration: 10,
  1441. complete: function() {
  1442. assert.ok( step > 2 && step < 5, "Step three or four" );
  1443. step++;
  1444. }
  1445. } );
  1446. this.clock.tick( 10 );
  1447. foo.promise().done( function() {
  1448. assert.equal( step++, 5, "steps 1-5: queue:false then queue:fx done" );
  1449. foo.animate( {
  1450. top: 10
  1451. }, {
  1452. duration: 10,
  1453. complete: function() {
  1454. assert.ok( step > 5 && step < 8, "Step six or seven" );
  1455. step++;
  1456. }
  1457. } ).animate( {
  1458. bottom: 10
  1459. }, {
  1460. duration: 10,
  1461. queue: false,
  1462. complete: function() {
  1463. assert.ok( step > 7 && step < 10, "Step eight or nine" );
  1464. step++;
  1465. }
  1466. } ).promise().done( function() {
  1467. assert.equal( step++, 10, "steps 6-10: queue:fx then queue:false" );
  1468. } );
  1469. } );
  1470. this.clock.tick( 10 );
  1471. } );
  1472. QUnit.test( "multiple unqueued and promise", function( assert ) {
  1473. assert.expect( 4 );
  1474. var foo = jQuery( "#foo" ),
  1475. step = 1;
  1476. foo.animate( {
  1477. marginLeft: 300
  1478. }, {
  1479. duration: 500,
  1480. queue: false,
  1481. complete: function() {
  1482. assert.strictEqual( step++, 2, "Step 2" );
  1483. }
  1484. } ).animate( {
  1485. top: 100
  1486. }, {
  1487. duration: 1000,
  1488. queue: false,
  1489. complete: function() {
  1490. assert.strictEqual( step++, 3, "Step 3" );
  1491. }
  1492. } ).animate( {}, {
  1493. duration: 2000,
  1494. queue: false,
  1495. complete: function() {
  1496. // no properties is a non-op and finishes immediately
  1497. assert.strictEqual( step++, 1, "Step 1" );
  1498. }
  1499. } ).promise().done( function() {
  1500. assert.strictEqual( step++, 4, "Step 4" );
  1501. } );
  1502. this.clock.tick( 1000 );
  1503. } );
  1504. QUnit.test( "animate does not change start value for non-px animation (#7109)", function( assert ) {
  1505. assert.expect( 1 );
  1506. var parent = jQuery( "<div><div></div></div>" ).css( { width: 284, height: 1 } ).appendTo( "#qunit-fixture" ),
  1507. child = parent.children().css( { fontSize: "98.6in", width: "0.01em", height: 1 } ),
  1508. actual = parseFloat( child.css( "width" ) ),
  1509. computed = [];
  1510. child.animate( { width: "0%" }, {
  1511. duration: 1,
  1512. step: function() {
  1513. computed.push( parseFloat( child.css( "width" ) ) );
  1514. }
  1515. } ).queue( function( next ) {
  1516. var ratio = computed[ 0 ] / actual;
  1517. assert.ok( ratio > 0.9 && ratio < 1.1,
  1518. "Starting width was close enough (" + computed[ 0 ] + " approximates " + actual + ")" );
  1519. next();
  1520. parent.remove();
  1521. } );
  1522. this.clock.tick( 10 );
  1523. } );
  1524. QUnit.test( "non-px animation handles non-numeric start (#11971)", function( assert ) {
  1525. assert.expect( 2 );
  1526. var foo = jQuery( "#foo" ),
  1527. initial = foo.css( "backgroundPositionX" );
  1528. if ( !initial ) {
  1529. assert.expect( 1 );
  1530. assert.ok( true, "Style property not understood" );
  1531. return;
  1532. }
  1533. foo.animate( { backgroundPositionX: "42%" }, {
  1534. duration: 1,
  1535. progress: function( anim, percent ) {
  1536. if ( percent ) {
  1537. return;
  1538. }
  1539. if ( parseFloat( initial ) ) {
  1540. assert.equal( jQuery.style( this, "backgroundPositionX" ), initial, "Numeric start preserved" );
  1541. } else {
  1542. assert.equal( jQuery.style( this, "backgroundPositionX" ), "0%", "Non-numeric start zeroed" );
  1543. }
  1544. },
  1545. done: function() {
  1546. assert.equal( jQuery.style( this, "backgroundPositionX" ), "42%", "End reached" );
  1547. }
  1548. } );
  1549. this.clock.tick( 10 );
  1550. } );
  1551. QUnit.test( "Animation callbacks (#11797)", function( assert ) {
  1552. assert.expect( 15 );
  1553. var prog = 0,
  1554. targets = jQuery( "#foo" ).children(),
  1555. done = false,
  1556. expectedProgress = 1;
  1557. targets.eq( 0 ).animate( {}, {
  1558. duration: 1,
  1559. start: function() {
  1560. assert.ok( true, "empty: start" );
  1561. },
  1562. progress: function( anim, percent ) {
  1563. assert.equal( percent, prog, "empty: progress " + prog );
  1564. prog = 1;
  1565. },
  1566. done: function() {
  1567. assert.ok( true, "empty: done" );
  1568. },
  1569. fail: function() {
  1570. assert.ok( false, "empty: fail" );
  1571. },
  1572. always: function() {
  1573. assert.ok( true, "empty: always" );
  1574. done = true;
  1575. }
  1576. } );
  1577. assert.ok( done, "empty: done immediately" );
  1578. done = false;
  1579. targets.eq( 1 ).animate( {
  1580. opacity: 0
  1581. }, {
  1582. duration: 1,
  1583. start: function() {
  1584. assert.ok( true, "stopped: start" );
  1585. },
  1586. progress: function( anim, percent ) {
  1587. assert.equal( percent, 0, "stopped: progress 0" );
  1588. },
  1589. done: function() {
  1590. assert.ok( false, "stopped: done" );
  1591. },
  1592. fail: function() {
  1593. assert.ok( true, "stopped: fail" );
  1594. },
  1595. always: function() {
  1596. assert.ok( true, "stopped: always" );
  1597. done = true;
  1598. }
  1599. } ).stop();
  1600. assert.ok( done, "stopped: stopped immediately" );
  1601. targets.eq( 2 ).animate( {
  1602. opacity: 0
  1603. }, {
  1604. duration: 1,
  1605. start: function() {
  1606. assert.ok( true, "async: start" );
  1607. },
  1608. progress: function( anim, percent ) {
  1609. assert.equal( percent, expectedProgress, "async: progress " + expectedProgress );
  1610. expectedProgress++;
  1611. },
  1612. done: function() {
  1613. assert.ok( true, "async: done" );
  1614. },
  1615. fail: function() {
  1616. assert.ok( false, "async: fail" );
  1617. },
  1618. always: function() {
  1619. assert.ok( true, "async: always" );
  1620. }
  1621. } );
  1622. this.clock.tick( 10 );
  1623. } );
  1624. QUnit.test( "Animation callbacks in order (#2292)", function( assert ) {
  1625. assert.expect( 9 );
  1626. var done = assert.async(),
  1627. step = 0,
  1628. dur = 50;
  1629. jQuery( "#foo" ).animate( {
  1630. width: "5px"
  1631. }, {
  1632. duration: dur,
  1633. start: function() {
  1634. assert.step( "start" );
  1635. },
  1636. progress: function( anim, p, ms ) {
  1637. if ( !( step++ ) ) {
  1638. assert.step( "progress" );
  1639. assert.strictEqual( p, 0, "first progress callback: progress ratio" );
  1640. assert.strictEqual( ms, dur, "first progress callback: remaining ms" );
  1641. } else {
  1642. assert.step( "last progress" );
  1643. assert.strictEqual( p, 1, "last progress callback: progress ratio" );
  1644. assert.strictEqual( ms, 0, "last progress callback: remaining ms" );
  1645. }
  1646. },
  1647. done: function() {
  1648. assert.step( "done" );
  1649. },
  1650. fail: function() {
  1651. assert.ok( false, "Animation failed" );
  1652. },
  1653. always: function() {
  1654. assert.verifySteps( [ "start", "progress", "last progress", "done" ] );
  1655. done();
  1656. }
  1657. } ).finish();
  1658. this.clock.tick( dur + 10 );
  1659. } );
  1660. QUnit.test( "Animate properly sets overflow hidden when animating width/height (#12117)", function( assert ) {
  1661. assert.expect( 8 );
  1662. jQuery.each( [ "height", "width" ], function( _, prop ) {
  1663. jQuery.each( [ 100, 0 ], function( _, value ) {
  1664. var div = jQuery( "<div>" ).css( "overflow", "auto" ),
  1665. props = {};
  1666. props[ prop ] = value;
  1667. div.animate( props, 1 );
  1668. assert.equal( div.css( "overflow" ), "hidden",
  1669. "overflow: hidden set when animating " + prop + " to " + value );
  1670. div.stop();
  1671. assert.equal( div.css( "overflow" ), "auto",
  1672. "overflow: auto restored after animating " + prop + " to " + value );
  1673. } );
  1674. } );
  1675. } );
  1676. QUnit.test( "Each tick of the timer loop uses a fresh time (#12837)", function( assert ) {
  1677. var lastVal,
  1678. tmp = jQuery( {
  1679. test: 0
  1680. } );
  1681. assert.expect( 3 );
  1682. tmp.animate( {
  1683. test: 100
  1684. }, {
  1685. step: function( p, fx ) {
  1686. assert.ok( fx.now !== lastVal, "Current value is not the last value: " + lastVal + " - " + fx.now );
  1687. lastVal = fx.now;
  1688. }
  1689. } );
  1690. this.clock.tick( 1 );
  1691. // now that we have a new time, run another tick
  1692. jQuery.fx.tick();
  1693. this.clock.tick( 1 );
  1694. jQuery.fx.tick();
  1695. tmp.stop();
  1696. } );
  1697. QUnit.test( "Animations with 0 duration don't ease (#12273)", function( assert ) {
  1698. assert.expect( 1 );
  1699. jQuery.easing.test = function() {
  1700. assert.ok( false, "Called easing" );
  1701. };
  1702. jQuery( "#foo" ).animate( {
  1703. height: 100
  1704. }, {
  1705. duration: 0,
  1706. easing: "test",
  1707. complete: function() {
  1708. assert.equal( jQuery( this ).height(), 100, "Height is 100" );
  1709. }
  1710. } );
  1711. delete jQuery.easing.test;
  1712. } );
  1713. jQuery.map( [ "toggle", "slideToggle", "fadeToggle" ], function( method ) {
  1714. // this test would look a lot better if we were using something to override
  1715. // the default timers
  1716. var duration = 1500;
  1717. QUnit.test( "toggle state tests: " + method + " (#8685)", function( assert ) {
  1718. function secondToggle() {
  1719. var stopped = parseFloat( element.css( check ) );
  1720. tested = false;
  1721. element[ method ]( {
  1722. duration: duration,
  1723. step: function( p, fx ) {
  1724. if ( fx.pos > 0.1 && fx.prop === check && !tested ) {
  1725. tested = true;
  1726. assert.equal( fx.start, stopped, check + " starts at " + stopped + " where it stopped" );
  1727. assert.equal( fx.end, original, check + " ending value is " + original );
  1728. element.stop();
  1729. }
  1730. }
  1731. } );
  1732. }
  1733. var tested,
  1734. original,
  1735. check = method === "slideToggle" ? "height" : "opacity",
  1736. element = jQuery( "#foo" ).height( 200 );
  1737. assert.expect( 4 );
  1738. element[ method ]( {
  1739. duration: duration,
  1740. easing: "linear",
  1741. step: function( p, fx ) {
  1742. if ( fx.pos > 0.1 && fx.prop === check && !tested ) {
  1743. tested = true;
  1744. original = fx.start;
  1745. assert.ok( fx.start !== 0, check + " is starting at " + original + " on first toggle (non-zero)" );
  1746. assert.equal( fx.end, 0, check + " is ending at 0 on first toggle" );
  1747. element.stop();
  1748. }
  1749. },
  1750. always: secondToggle
  1751. } );
  1752. //FIXME figure out why 470
  1753. this.clock.tick( 470 );
  1754. } );
  1755. } );
  1756. QUnit.test( "jQuery.fx.start & jQuery.fx.stop hook points", function( assert ) {
  1757. var oldStart = jQuery.fx.start,
  1758. oldStop = jQuery.fx.stop,
  1759. foo = jQuery( { foo: 0 } );
  1760. assert.expect( 3 );
  1761. jQuery.fx.start = function() {
  1762. assert.ok( true, "start called" );
  1763. };
  1764. jQuery.fx.stop = function() {
  1765. assert.ok( true, "stop called" );
  1766. };
  1767. // calls start
  1768. foo.animate( { foo: 1 }, { queue: false } );
  1769. // calls start
  1770. foo.animate( { foo: 2 }, { queue: false } );
  1771. foo.stop();
  1772. // calls stop
  1773. jQuery.fx.tick();
  1774. // cleanup
  1775. jQuery.fx.start = oldStart;
  1776. jQuery.fx.stop = oldStop;
  1777. } );
  1778. QUnit.test( ".finish() completes all queued animations", function( assert ) {
  1779. var animations = {
  1780. top: 100,
  1781. left: 100,
  1782. height: 100,
  1783. width: 100
  1784. },
  1785. div = jQuery( "<div>" );
  1786. assert.expect( 11 );
  1787. jQuery.each( animations, function( prop, value ) {
  1788. var anim = {};
  1789. anim[ prop ] = value;
  1790. // the delay shouldn't matter at all!
  1791. div.css( prop, 1 ).animate( anim, function() {
  1792. assert.ok( true, "Called animation callback for " + prop );
  1793. } ).delay( 100 );
  1794. } );
  1795. assert.equal( div.queue().length, 8, "8 animations in the queue" );
  1796. div.finish();
  1797. jQuery.each( animations, function( prop, value ) {
  1798. assert.equal( parseFloat( div.css( prop ) ), value, prop + " finished at correct value" );
  1799. } );
  1800. assert.equal( div.queue().length, 0, "empty queue when done" );
  1801. if ( jQuery.find.compile ) {
  1802. assert.equal( div.is( ":animated" ), false, ":animated doesn't match" );
  1803. } else {
  1804. assert.ok( "skip", ":animated selector not supported with selector-native" );
  1805. }
  1806. // cleanup
  1807. div.remove();
  1808. // leaves a "shadow timer" which does nothing around, need to force a tick
  1809. jQuery.fx.tick();
  1810. } );
  1811. QUnit.test( ".finish( false ) - unqueued animations", function( assert ) {
  1812. var animations = {
  1813. top: 100,
  1814. left: 100,
  1815. height: 100,
  1816. width: 100
  1817. },
  1818. div = jQuery( "<div>" );
  1819. assert.expect( 10 );
  1820. jQuery.each( animations, function( prop, value ) {
  1821. var anim = {};
  1822. anim[ prop ] = value;
  1823. div.css( prop, 1 ).animate( anim, {
  1824. queue: false,
  1825. complete: function() {
  1826. assert.ok( true, "Called animation callback for " + prop );
  1827. }
  1828. } );
  1829. } );
  1830. assert.equal( div.queue().length, 0, "0 animations in the queue" );
  1831. div.finish( false );
  1832. jQuery.each( animations, function( prop, value ) {
  1833. assert.equal( parseFloat( div.css( prop ) ), value, prop + " finished at correct value" );
  1834. } );
  1835. if ( jQuery.find.compile ) {
  1836. assert.equal( div.is( ":animated" ), false, ":animated doesn't match" );
  1837. } else {
  1838. assert.ok( "skip", ":animated selector not supported with selector-native" );
  1839. }
  1840. // cleanup
  1841. div.remove();
  1842. // leaves a "shadow timer" which does nothing around, need to force a tick
  1843. jQuery.fx.tick();
  1844. } );
  1845. QUnit.test( ".finish( \"custom\" ) - custom queue animations", function( assert ) {
  1846. var animations = {
  1847. top: 100,
  1848. left: 100,
  1849. height: 100,
  1850. width: 100
  1851. },
  1852. div = jQuery( "<div>" );
  1853. assert.expect( 11 );
  1854. jQuery.each( animations, function( prop, value ) {
  1855. var anim = {};
  1856. anim[ prop ] = value;
  1857. div.css( prop, 1 ).animate( anim, {
  1858. queue: "custom",
  1859. complete: function() {
  1860. assert.ok( true, "Called animation callback for " + prop );
  1861. }
  1862. } );
  1863. } );
  1864. assert.equal( div.queue( "custom" ).length, 4, "4 animations in the queue" );
  1865. // start the first animation
  1866. div.dequeue( "custom" );
  1867. if ( jQuery.find.compile ) {
  1868. assert.equal( div.is( ":animated" ), true, ":animated matches" );
  1869. } else {
  1870. assert.ok( "skip", ":animated selector not supported with selector-native" );
  1871. }
  1872. div.finish( "custom" );
  1873. jQuery.each( animations, function( prop, value ) {
  1874. assert.equal( parseFloat( div.css( prop ) ), value, prop + " finished at correct value" );
  1875. } );
  1876. if ( jQuery.find.compile ) {
  1877. assert.equal( div.is( ":animated" ), false, ":animated doesn't match" );
  1878. } else {
  1879. assert.ok( "skip", ":animated selector not supported with selector-native" );
  1880. }
  1881. // cleanup
  1882. div.remove();
  1883. // leaves a "shadow timer" which does nothing around, need to force a tick
  1884. jQuery.fx.tick();
  1885. } );
  1886. QUnit.test( ".finish() calls finish of custom queue functions", function( assert ) {
  1887. function queueTester( next, hooks ) {
  1888. hooks.stop = function( gotoEnd ) {
  1889. inside++;
  1890. assert.equal( this, div[ 0 ] );
  1891. assert.ok( gotoEnd, "hooks.stop(true) called" );
  1892. };
  1893. }
  1894. var div = jQuery( "<div>" ),
  1895. inside = 0,
  1896. outside = 0;
  1897. assert.expect( 6 );
  1898. queueTester.finish = function() {
  1899. outside++;
  1900. assert.ok( true, "Finish called on custom queue function" );
  1901. };
  1902. div.queue( queueTester ).queue( queueTester ).queue( queueTester ).finish();
  1903. assert.equal( inside, 1, "1 stop(true) callback" );
  1904. assert.equal( outside, 2, "2 finish callbacks" );
  1905. div.remove();
  1906. } );
  1907. QUnit.test( ".finish() is applied correctly when multiple elements were animated (#13937)", function( assert ) {
  1908. assert.expect( 3 );
  1909. var elems = jQuery( "<a>0</a><a>1</a><a>2</a>" );
  1910. elems.animate( { opacity: 0 }, 1500 ).animate( { opacity: 1 }, 1500 );
  1911. setTimeout( function() {
  1912. elems.eq( 1 ).finish();
  1913. assert.ok( !elems.eq( 1 ).queue().length, "empty queue for .finish()ed element" );
  1914. assert.ok( elems.eq( 0 ).queue().length, "non-empty queue for preceding element" );
  1915. assert.ok( elems.eq( 2 ).queue().length, "non-empty queue for following element" );
  1916. elems.stop( true );
  1917. }, 100 );
  1918. this.clock.tick( 1500 );
  1919. } );
  1920. QUnit.test( "slideDown() after stop() (#13483)", function( assert ) {
  1921. assert.expect( 2 );
  1922. var ul = jQuery( "<ul style='height: 100px; display: block;'></ul>" )
  1923. .appendTo( "#qunit-fixture" ),
  1924. origHeight = ul.height(),
  1925. clock = this.clock;
  1926. // First test. slideUp() -> stop() in the middle -> slideDown() until the end
  1927. ul.slideUp( 1000 );
  1928. clock.tick( 500 );
  1929. ul.stop( true );
  1930. ul.slideDown( 1, function() {
  1931. assert.equal( ul.height(), origHeight, "slideDown() after interrupting slideUp() with stop(). Height must be in original value" );
  1932. // Second test. slideDown() -> stop() in the middle -> slideDown() until the end
  1933. ul.slideUp( 1 );
  1934. clock.tick( 10 );
  1935. ul.slideDown( 1000 );
  1936. clock.tick( 500 );
  1937. ul.stop( true );
  1938. ul.slideDown( 1 );
  1939. assert.equal( ul.height(), origHeight, "slideDown() after interrupting slideDown() with stop(). Height must be in original value" );
  1940. // Cleanup
  1941. ul.remove();
  1942. clock.tick( 10 );
  1943. } );
  1944. clock.tick( 10 );
  1945. } );
  1946. QUnit.test( "Respect display value on inline elements (#14824)", function( assert ) {
  1947. assert.expect( 2 );
  1948. var clock = this.clock,
  1949. fromStyleSheet = jQuery( "<span id='span-14824'></span>" ),
  1950. fromStyleAttr = jQuery( "<span style='display: block;'></span>" );
  1951. jQuery( "#qunit-fixture" ).append( fromStyleSheet, fromStyleAttr );
  1952. fromStyleSheet.slideUp( function() {
  1953. jQuery( this ).slideDown( function() {
  1954. assert.equal( jQuery( this ).css( "display" ), "block",
  1955. "Respect previous display value (from stylesheet) on span element" );
  1956. } );
  1957. } );
  1958. fromStyleAttr.slideUp( function() {
  1959. jQuery( this ).slideDown( function() {
  1960. assert.equal( jQuery( this ).css( "display" ), "block",
  1961. "Respect previous display value (from style attribute) on span element" );
  1962. } );
  1963. } );
  1964. clock.tick( 800 );
  1965. } );
  1966. QUnit.test( "jQuery.easing._default (gh-2218)", function( assert ) {
  1967. assert.expect( 2 );
  1968. jQuery( "#foo" )
  1969. .animate( { width: "5px" }, {
  1970. duration: 5,
  1971. start: function( anim ) {
  1972. assert.equal( anim.opts.easing, jQuery.easing._default,
  1973. "anim.opts.easing should be equal to jQuery.easing._default when the easing argument is not given" );
  1974. }
  1975. } )
  1976. .animate( { height: "5px" }, {
  1977. duration: 5,
  1978. easing: "linear",
  1979. start: function( anim ) {
  1980. assert.equal( anim.opts.easing, "linear",
  1981. "anim.opts.easing should be equal to the easing argument" );
  1982. }
  1983. } )
  1984. .stop();
  1985. this.clock.tick( 25 );
  1986. } );
  1987. QUnit.test( "jQuery.easing._default in Animation (gh-2218", function( assert ) {
  1988. assert.expect( 3 );
  1989. var animation,
  1990. defaultEasing = jQuery.easing._default,
  1991. called = false,
  1992. testObject = { "width": 100 },
  1993. testDest = { "width": 200 };
  1994. jQuery.easing.custom = function( p ) {
  1995. called = true;
  1996. return p;
  1997. };
  1998. jQuery.easing._default = "custom";
  1999. animation = jQuery.Animation( testObject, testDest, { "duration": 1 } );
  2000. animation.done( function() {
  2001. assert.equal( testObject.width, testDest.width, "Animated width" );
  2002. assert.ok( called, "Custom jQuery.easing._default called" );
  2003. assert.strictEqual( animation.opts.easing, "custom",
  2004. "Animation used custom jQuery.easing._default" );
  2005. jQuery.easing._default = defaultEasing;
  2006. delete jQuery.easing.custom;
  2007. } );
  2008. this.clock.tick( 10 );
  2009. } );
  2010. QUnit.test( "jQuery.easing._default in Tween (gh-2218)", function( assert ) {
  2011. assert.expect( 3 );
  2012. var tween,
  2013. defaultEasing = jQuery.easing._default,
  2014. called = false,
  2015. testObject = { "width": 100 };
  2016. jQuery.easing.custom = function( p ) {
  2017. called = true;
  2018. return p;
  2019. };
  2020. jQuery.easing._default = "custom";
  2021. tween = jQuery.Tween( testObject, { "duration": 1 }, "width", 200 );
  2022. tween.run( 1 );
  2023. assert.equal( testObject.width, 200, "Animated width" );
  2024. assert.ok( called, "Custom jQuery.easing._default called" );
  2025. assert.strictEqual( tween.easing, "custom",
  2026. "Animation used custom jQuery.easing._default" );
  2027. jQuery.easing._default = defaultEasing;
  2028. delete jQuery.easing.custom;
  2029. } );
  2030. QUnit.test( "Display value is correct for disconnected nodes (trac-13310)", function( assert ) {
  2031. assert.expect( 3 );
  2032. var div = jQuery( "<div></div>" );
  2033. assert.equal( div.css( "display", "inline" ).hide().show().appendTo( "body" ).css( "display" ), "inline", "Initialized display value has returned" );
  2034. div.remove();
  2035. div.css( "display", "none" ).hide();
  2036. assert.equal( jQuery._data( div[ 0 ], "olddisplay" ), undefined, "olddisplay is undefined after hiding a detached and hidden element" );
  2037. div.remove();
  2038. div.css( "display", "inline-block" ).hide().appendTo( "body" ).fadeIn( function() {
  2039. assert.equal( div.css( "display" ), "inline-block", "Initialized display value has returned" );
  2040. div.remove();
  2041. } );
  2042. this.clock.tick( 1000 );
  2043. } );
  2044. QUnit.test( "Show/hide/toggle and display: inline", function( assert ) {
  2045. assert.expect( 40 );
  2046. var clock = this.clock;
  2047. jQuery( "<span></span><div style='display:inline' title='inline div'></div>" ).each( function() {
  2048. var completed, interrupted,
  2049. N = 100,
  2050. fixture = jQuery( "#qunit-fixture" ),
  2051. $el = jQuery( this ),
  2052. kind = this.title || this.nodeName.toLowerCase();
  2053. // Animations allowed to complete
  2054. completed = jQuery.map( [
  2055. $el.clone().data( { call: "hide", done: "none" } ).appendTo( fixture ).hide( N ),
  2056. $el.clone().data( { call: "toggle", done: "none" } ).appendTo( fixture ).toggle( N ),
  2057. $el.clone().data( { call: "hide+show", done: "inline" } ).appendTo( fixture )
  2058. .hide().show( N ),
  2059. $el.clone().data( { call: "hide+toggle", done: "inline" } ).appendTo( fixture )
  2060. .hide().toggle( N )
  2061. ], function( $clone ) { return $clone[ 0 ]; } );
  2062. // Animations not allowed to complete
  2063. interrupted = jQuery.map( [
  2064. $el.clone().data( { call: "hide+stop" } ).appendTo( fixture ).hide( N ),
  2065. $el.clone().data( { call: "toggle+stop" } ).appendTo( fixture ).toggle( N ),
  2066. $el.clone().data( { call: "hide+show+stop" } ).appendTo( fixture ).hide().show( N ),
  2067. $el.clone().data( { call: "hide+toggle+stop" } ).appendTo( fixture ).hide().toggle( N )
  2068. ], function( $clone ) { return $clone[ 0 ]; } );
  2069. // All elements should be inline-block during the animation
  2070. clock.tick( N / 2 );
  2071. jQuery( completed ).each( function() {
  2072. var $el = jQuery( this ),
  2073. call = $el.data( "call" );
  2074. assert.strictEqual( $el.css( "display" ), "inline-block", kind + " display during " + call );
  2075. } );
  2076. // Interrupted elements should remain inline-block
  2077. jQuery( interrupted ).stop();
  2078. clock.tick( N / 2 );
  2079. jQuery( interrupted ).each( function() {
  2080. var $el = jQuery( this ),
  2081. call = $el.data( "call" );
  2082. assert.strictEqual( $el.css( "display" ), "inline-block", kind + " display after " + call );
  2083. } );
  2084. // Completed elements should not remain inline-block
  2085. clock.tick( N / 2 );
  2086. jQuery( completed ).each( function() {
  2087. var $el = jQuery( this ),
  2088. call = $el.data( "call" ),
  2089. display = $el.data( "done" );
  2090. assert.strictEqual( $el.css( "display" ), display, kind + " display after " + call );
  2091. } );
  2092. // A post-animation toggle should not make any element inline-block
  2093. completed = jQuery( completed.concat( interrupted ) );
  2094. completed.toggle( N / 2 );
  2095. clock.tick( N );
  2096. completed.each( function() {
  2097. var $el = jQuery( this ),
  2098. call = $el.data( "call" );
  2099. assert.ok( $el.css( "display" ) !== "inline-block",
  2100. kind + " display is not inline-block after " + call + "+toggle" );
  2101. } );
  2102. } );
  2103. } );
  2104. function testEasing( assert, speed, easing, complete ) {
  2105. assert.expect( 4 );
  2106. var options = jQuery.speed( speed, easing, complete );
  2107. assert.equal( options.duration, 10, "Duration set properly" );
  2108. assert.equal(
  2109. typeof options.easing === "function" ? options.easing() : options.easing,
  2110. "linear",
  2111. "Easing set properly"
  2112. );
  2113. assert.equal( options.queue, "fx", "Queue defaults to fx" );
  2114. options.complete();
  2115. }
  2116. QUnit.test( "jQuery.speed( speed, easing, complete )", function( assert ) {
  2117. testEasing( assert, 10, "linear", function() {
  2118. assert.ok( true, "Complete called" );
  2119. } );
  2120. } );
  2121. QUnit.test( "jQuery.speed( speed, easing, complete ) - with easing function", function( assert ) {
  2122. testEasing(
  2123. assert,
  2124. 10,
  2125. function() {
  2126. return "linear";
  2127. },
  2128. function() {
  2129. assert.ok( true, "Complete called" );
  2130. }
  2131. );
  2132. } );
  2133. QUnit.test( "jQuery.speed( options )", function( assert ) {
  2134. testEasing( assert, {
  2135. duration: 10,
  2136. easing: "linear",
  2137. complete: function() {
  2138. assert.ok( true, "Complete called" );
  2139. }
  2140. } );
  2141. } );
  2142. QUnit.test( "jQuery.speed( options ) - with easing function", function( assert ) {
  2143. testEasing( assert, {
  2144. duration: 10,
  2145. easing: function() {
  2146. return "linear";
  2147. },
  2148. complete: function() {
  2149. assert.ok( true, "Complete called" );
  2150. }
  2151. } );
  2152. } );
  2153. QUnit.test( "jQuery.speed( options ) - queue values", function( assert ) {
  2154. assert.expect( 5 );
  2155. var get = function( queue ) {
  2156. return jQuery.speed( { queue: queue } ).queue;
  2157. };
  2158. assert.equal( get( null ), "fx", "null defaults to 'fx'" );
  2159. assert.equal( get( undefined ), "fx", "undefined defaults to 'fx'" );
  2160. assert.equal( get( true ), "fx", "true defaults to 'fx'" );
  2161. assert.equal( get( "fx" ), "fx", "'fx' passed through" );
  2162. assert.equal( get( "custom" ), "custom", "'custom' passed through" );
  2163. } );
  2164. QUnit.test( "jQuery.speed() - durations", function( assert ) {
  2165. assert.expect( 5 );
  2166. var get = function( duration ) {
  2167. return jQuery.speed( duration ).duration;
  2168. };
  2169. assert.equal( get( 100 ), 100, "jQuery.speed sets number duration" );
  2170. assert.equal( get(), jQuery.fx.speeds._default, "jQuery.speed falls back default duration" );
  2171. assert.equal( get( "slow" ), jQuery.fx.speeds.slow, "jQuery.speed uses preset speeds" );
  2172. assert.equal( get( "fast" ), jQuery.fx.speeds.fast, "jQuery.speed uses preset speeds" );
  2173. jQuery.fx.off = true;
  2174. assert.equal( get( 100 ), 0, "jQuery.speed defaults duration to zero if fx is off" );
  2175. jQuery.fx.off = false;
  2176. } );
  2177. } )();