1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/tests/mochitest/ajax/jquery/test/unit/fx.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,435 @@
1.4 +module("fx");
1.5 +
1.6 +test("animate(Hash, Object, Function)", function() {
1.7 + expect(1);
1.8 + stop();
1.9 + var hash = {opacity: 'show'};
1.10 + var hashCopy = $.extend({}, hash);
1.11 + $('#foo').animate(hash, 0, function() {
1.12 + equals( hash.opacity, hashCopy.opacity, 'Check if animate changed the hash parameter' );
1.13 + start();
1.14 + });
1.15 +});
1.16 +
1.17 +/* Commented out because of bug 450190
1.18 +test("animate option (queue === false)", function () {
1.19 + expect(1);
1.20 + stop();
1.21 +
1.22 + var order = [];
1.23 +
1.24 + var $foo = $("#foo");
1.25 + $foo.animate({width:'100px'}, 200, function () {
1.26 + // should finish after unqueued animation so second
1.27 + order.push(2);
1.28 + });
1.29 + $foo.animate({fontSize:'2em'}, {queue:false, duration:10, complete:function () {
1.30 + // short duration and out of queue so should finish first
1.31 + order.push(1);
1.32 + }});
1.33 + $foo.animate({height:'100px'}, 10, function() {
1.34 + // queued behind the first animation so should finish third
1.35 + order.push(3);
1.36 + isSet( order, [ 1, 2, 3], "Animations finished in the correct order" );
1.37 + start();
1.38 + });
1.39 +});
1.40 +*/
1.41 +
1.42 +test("queue() defaults to 'fx' type", function () {
1.43 + expect(2);
1.44 + stop();
1.45 +
1.46 + var $foo = $("#foo");
1.47 + $foo.queue("fx", [ "sample", "array" ]);
1.48 + var arr = $foo.queue();
1.49 + isSet(arr, [ "sample", "array" ], "queue() got an array set with type 'fx'");
1.50 + $foo.queue([ "another", "one" ]);
1.51 + var arr = $foo.queue("fx");
1.52 + isSet(arr, [ "another", "one" ], "queue('fx') got an array set with no type");
1.53 + // clean up after test
1.54 + $foo.queue([]);
1.55 +
1.56 + start();
1.57 +});
1.58 +
1.59 +test("stop()", function() {
1.60 + expect(3);
1.61 + stop();
1.62 +
1.63 + var $foo = $("#nothiddendiv");
1.64 + var w = 0;
1.65 + $foo.hide().width(200).width();
1.66 +
1.67 + $foo.animate({ width:'show' }, 1000);
1.68 + setTimeout(function(){
1.69 + var nw = $foo.width();
1.70 + ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
1.71 + $foo.stop();
1.72 +
1.73 + nw = $foo.width();
1.74 + ok( nw != w, "Stop didn't reset the animation " + nw + "px " + w + "px");
1.75 + setTimeout(function(){
1.76 + equals( nw, $foo.width(), "The animation didn't continue" );
1.77 + start();
1.78 + }, 100);
1.79 + }, 100);
1.80 +});
1.81 +
1.82 +test("stop() - several in queue", function() {
1.83 +// Merge from jquery test 1.3.2
1.84 + expect(2);
1.85 + stop();
1.86 +
1.87 + var $foo = $("#nothiddendiv");
1.88 + var w = 0;
1.89 + $foo.hide().width(200).width();
1.90 +
1.91 + $foo.animate({ width:'show' }, 1000);
1.92 + $foo.animate({ width:'hide' }, 1000);
1.93 + $foo.animate({ width:'show' }, 1000);
1.94 + setTimeout(function(){
1.95 + // Unreliable. See bug 484994.
1.96 + // equals( $foo.queue().length, 3, "All 3 still in the queue" );
1.97 + var nw = $foo.width();
1.98 + ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
1.99 + $foo.stop();
1.100 +
1.101 + nw = $foo.width();
1.102 + ok( nw != w, "Stop didn't reset the animation " + nw + "px " + w + "px");
1.103 + // Merged from 1.3.2, commented out for being flaky in 1.3.2 test suite
1.104 + //equals( $foo.queue().length, 2, "The next animation continued" );
1.105 + $foo.stop(true);
1.106 + start();
1.107 + }, 100);
1.108 +});
1.109 +
1.110 +test("stop(clearQueue)", function() {
1.111 + expect(4);
1.112 + stop();
1.113 +
1.114 + var $foo = $("#nothiddendiv");
1.115 + var w = 0;
1.116 + $foo.hide().width(200).width();
1.117 +
1.118 + $foo.animate({ width:'show' }, 1000);
1.119 + $foo.animate({ width:'hide' }, 1000);
1.120 + $foo.animate({ width:'show' }, 1000);
1.121 + setTimeout(function(){
1.122 + var nw = $foo.width();
1.123 + ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
1.124 + $foo.stop(true);
1.125 +
1.126 + nw = $foo.width();
1.127 + ok( nw != w, "Stop didn't reset the animation " + nw + "px " + w + "px");
1.128 +
1.129 + equals( $foo.queue().length, 0, "The animation queue was cleared" );
1.130 + setTimeout(function(){
1.131 + equals( nw, $foo.width(), "The animation didn't continue" );
1.132 + start();
1.133 + }, 100);
1.134 + }, 100);
1.135 +});
1.136 +
1.137 +test("stop(clearQueue, gotoEnd)", function() {
1.138 + // Merge from 1.3.2 - this test marked as being flaky
1.139 + expect(1);
1.140 + stop();
1.141 +
1.142 + var $foo = $("#nothiddendiv");
1.143 + var w = 0;
1.144 + $foo.hide().width(200).width();
1.145 +
1.146 + $foo.animate({ width:'show' }, 1000);
1.147 + $foo.animate({ width:'hide' }, 1000);
1.148 + $foo.animate({ width:'show' }, 1000);
1.149 + $foo.animate({ width:'hide' }, 1000);
1.150 + setTimeout(function(){
1.151 + var nw = $foo.width();
1.152 + ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
1.153 + $foo.stop(false, true);
1.154 +
1.155 + nw = $foo.width();
1.156 + // Merge from 1.3.2 - marked as flaky in that release
1.157 + //equals( nw, 200, "Stop() reset the animation" );
1.158 +
1.159 + setTimeout(function(){
1.160 + // Merge from 1.3.2 - marked as flaky in that release
1.161 + //equals( $foo.queue().length, 3, "The next animation continued" );
1.162 + $foo.stop(true);
1.163 + start();
1.164 + }, 100);
1.165 + }, 100);
1.166 +});
1.167 +
1.168 +test("toggle()", function() {
1.169 + expect(3);
1.170 + var x = $("#foo");
1.171 + ok( x.is(":visible"), "is visible" );
1.172 + x.toggle();
1.173 + ok( x.is(":hidden"), "is hidden" );
1.174 + x.toggle();
1.175 + ok( x.is(":visible"), "is visible again" );
1.176 +});
1.177 +
1.178 +var visible = {
1.179 + Normal: function(elem){},
1.180 + "CSS Hidden": function(elem){
1.181 + $(this).addClass("hidden");
1.182 + },
1.183 + "JS Hidden": function(elem){
1.184 + $(this).hide();
1.185 + }
1.186 +};
1.187 +
1.188 +var from = {
1.189 + "CSS Auto": function(elem,prop){
1.190 + $(elem).addClass("auto" + prop)
1.191 + .text("This is a long string of text.");
1.192 + return "";
1.193 + },
1.194 + "JS Auto": function(elem,prop){
1.195 + $(elem).css(prop,"auto")
1.196 + .text("This is a long string of text.");
1.197 + return "";
1.198 + },
1.199 + "CSS 100": function(elem,prop){
1.200 + $(elem).addClass("large" + prop);
1.201 + return "";
1.202 + },
1.203 + "JS 100": function(elem,prop){
1.204 + $(elem).css(prop,prop == "opacity" ? 1 : "100px");
1.205 + return prop == "opacity" ? 1 : 100;
1.206 + },
1.207 + "CSS 50": function(elem,prop){
1.208 + $(elem).addClass("med" + prop);
1.209 + return "";
1.210 + },
1.211 + "JS 50": function(elem,prop){
1.212 + $(elem).css(prop,prop == "opacity" ? 0.50 : "50px");
1.213 + return prop == "opacity" ? 0.5 : 50;
1.214 + },
1.215 + "CSS 0": function(elem,prop){
1.216 + $(elem).addClass("no" + prop);
1.217 + return "";
1.218 + },
1.219 + "JS 0": function(elem,prop){
1.220 + $(elem).css(prop,prop == "opacity" ? 0 : "0px");
1.221 + return 0;
1.222 + }
1.223 +};
1.224 +
1.225 +var to = {
1.226 + "show": function(elem,prop){
1.227 + $(elem).hide().addClass("wide"+prop);
1.228 + return "show";
1.229 + },
1.230 + "hide": function(elem,prop){
1.231 + $(elem).addClass("wide"+prop);
1.232 + return "hide";
1.233 + },
1.234 + "100": function(elem,prop){
1.235 + $(elem).addClass("wide"+prop);
1.236 + return prop == "opacity" ? 1 : 100;
1.237 + },
1.238 + "50": function(elem,prop){
1.239 + return prop == "opacity" ? 0.50 : 50;
1.240 + },
1.241 + "0": function(elem,prop){
1.242 + $(elem).addClass("noback");
1.243 + return 0;
1.244 + }
1.245 +};
1.246 +
1.247 +function checkOverflowDisplay(){
1.248 + var o = jQuery.css( this, "overflow" );
1.249 +
1.250 + equals(o, "visible", "Overflow should be visible: " + o);
1.251 + equals(jQuery.css( this, "display" ), "inline", "Display shouldn't be tampered with.");
1.252 +
1.253 + start();
1.254 +}
1.255 +
1.256 +test("JS Overflow and Display", function() {
1.257 + expect(2);
1.258 + stop();
1.259 + makeTest( "JS Overflow and Display" )
1.260 + .addClass("widewidth")
1.261 + .css({ overflow: "visible", display: "inline" })
1.262 + .addClass("widewidth")
1.263 + .text("Some sample text.")
1.264 + .before("text before")
1.265 + .after("text after")
1.266 + .animate({ opacity: 0.5 }, "slow", checkOverflowDisplay);
1.267 +});
1.268 +
1.269 +test("CSS Overflow and Display", function() {
1.270 + expect(2);
1.271 + stop();
1.272 + makeTest( "CSS Overflow and Display" )
1.273 + .addClass("overflow inline")
1.274 + .addClass("widewidth")
1.275 + .text("Some sample text.")
1.276 + .before("text before")
1.277 + .after("text after")
1.278 + .animate({ opacity: 0.5 }, "slow", checkOverflowDisplay);
1.279 +});
1.280 +
1.281 +jQuery.each( from, function(fn, f){
1.282 + jQuery.each( to, function(tn, t){
1.283 + test(fn + " to " + tn, function() {
1.284 + var elem = makeTest( fn + " to " + tn );
1.285 +
1.286 + var t_w = t( elem, "width" );
1.287 + var f_w = f( elem, "width" );
1.288 + var t_h = t( elem, "height" );
1.289 + var f_h = f( elem, "height" );
1.290 + var t_o = t( elem, "opacity" );
1.291 + var f_o = f( elem, "opacity" );
1.292 +
1.293 + var num = 0;
1.294 +
1.295 + if ( t_h == "show" ) num++;
1.296 + if ( t_w == "show" ) num++;
1.297 + if ( t_w == "hide"||t_w == "show" ) num++;
1.298 + if ( t_h == "hide"||t_h == "show" ) num++;
1.299 + if ( t_o == "hide"||t_o == "show" ) num++;
1.300 + if ( t_w == "hide" ) num++;
1.301 + if ( t_o.constructor == Number ) num += 2;
1.302 + if ( t_w.constructor == Number ) num += 2;
1.303 + if ( t_h.constructor == Number ) num +=2;
1.304 +
1.305 + expect(num);
1.306 + stop();
1.307 +
1.308 + var anim = { width: t_w, height: t_h, opacity: t_o };
1.309 +
1.310 + elem.animate(anim, 50, function(){
1.311 + if ( t_w == "show" )
1.312 + equals( this.style.display, "block", "Showing, display should block: " + this.style.display);
1.313 +
1.314 + if ( t_w == "hide"||t_w == "show" )
1.315 + equals(this.style.width.indexOf(f_w), 0, "Width must be reset to " + f_w + ": " + this.style.width);
1.316 +
1.317 + if ( t_h == "hide"||t_h == "show" )
1.318 + equals(this.style.height.indexOf(f_h), 0, "Height must be reset to " + f_h + ": " + this.style.height);
1.319 +
1.320 + var cur_o = jQuery.attr(this.style, "opacity");
1.321 + if ( cur_o !== "" ) cur_o = parseFloat( cur_o );
1.322 +
1.323 + if ( t_o == "hide"||t_o == "show" )
1.324 + equals(cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o);
1.325 +
1.326 + if ( t_w == "hide" )
1.327 + equals(this.style.display, "none", "Hiding, display should be none: " + this.style.display);
1.328 +
1.329 + if ( t_o.constructor == Number ) {
1.330 + equals(cur_o, t_o, "Final opacity should be " + t_o + ": " + cur_o);
1.331 +
1.332 + ok(jQuery.curCSS(this, "opacity") != "" || cur_o == t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o);
1.333 + }
1.334 +
1.335 + if ( t_w.constructor == Number ) {
1.336 + equals(this.style.width, t_w + "px", "Final width should be " + t_w + ": " + this.style.width);
1.337 +
1.338 + var cur_w = jQuery.css(this,"width");
1.339 +
1.340 + ok(this.style.width != "" || cur_w == t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w);
1.341 + }
1.342 +
1.343 + if ( t_h.constructor == Number ) {
1.344 + equals(this.style.height, t_h + "px", "Final height should be " + t_h + ": " + this.style.height);
1.345 +
1.346 + var cur_h = jQuery.css(this,"height");
1.347 +
1.348 + ok(this.style.height != "" || cur_h == t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_w);
1.349 + }
1.350 +
1.351 + if ( t_h == "show" ) {
1.352 + var old_h = jQuery.curCSS(this, "height");
1.353 + $(elem).append("<br/>Some more text<br/>and some more...");
1.354 + ok(old_h != jQuery.css(this, "height" ), "Make sure height is auto.");
1.355 + }
1.356 +
1.357 + start();
1.358 + });
1.359 + });
1.360 + });
1.361 +});
1.362 +
1.363 +var check = ['opacity','height','width','display','overflow'];
1.364 +
1.365 +jQuery.fn.saveState = function(){
1.366 + expect(check.length);
1.367 + stop();
1.368 + return this.each(function(){
1.369 + var self = this;
1.370 + self.save = {};
1.371 + jQuery.each(check, function(i,c){
1.372 + self.save[c] = jQuery.css(self,c);
1.373 + });
1.374 + });
1.375 +};
1.376 +
1.377 +function checkState(){
1.378 + var self = this;
1.379 + jQuery.each(this.save, function(c,v){
1.380 + var cur = jQuery.css(self,c);
1.381 + equals( v, cur, "Make sure that " + c + " is reset (Old: " + v + " Cur: " + cur + ")");
1.382 + });
1.383 + start();
1.384 +}
1.385 +
1.386 +// Chaining Tests
1.387 +test("Chain fadeOut fadeIn", function() {
1.388 + $('#fadein div').saveState().fadeOut('fast').fadeIn('fast',checkState);
1.389 +});
1.390 +test("Chain fadeIn fadeOut", function() {
1.391 + $('#fadeout div').saveState().fadeIn('fast').fadeOut('fast',checkState);
1.392 +});
1.393 +
1.394 +test("Chain hide show", function() {
1.395 + $('#show div').saveState().hide('fast').show('fast',checkState);
1.396 +});
1.397 +test("Chain show hide", function() {
1.398 + $('#hide div').saveState().show('fast').hide('fast',checkState);
1.399 +});
1.400 +
1.401 +test("Chain toggle in", function() {
1.402 + $('#togglein div').saveState().toggle('fast').toggle('fast',checkState);
1.403 +});
1.404 +test("Chain toggle out", function() {
1.405 + $('#toggleout div').saveState().toggle('fast').toggle('fast',checkState);
1.406 +});
1.407 +
1.408 +test("Chain slideDown slideUp", function() {
1.409 + $('#slidedown div').saveState().slideDown('fast').slideUp('fast',checkState);
1.410 +});
1.411 +test("Chain slideUp slideDown", function() {
1.412 + $('#slideup div').saveState().slideUp('fast').slideDown('fast',checkState);
1.413 +});
1.414 +
1.415 +test("Chain slideToggle in", function() {
1.416 + $('#slidetogglein div').saveState().slideToggle('fast').slideToggle('fast',checkState);
1.417 +});
1.418 +test("Chain slideToggle out", function() {
1.419 + $('#slidetoggleout div').saveState().slideToggle('fast').slideToggle('fast',checkState);
1.420 +});
1.421 +
1.422 +function makeTest( text ){
1.423 + var elem = $("<div></div>")
1.424 + .attr("id", "test" + makeTest.id++)
1.425 + .addClass("box");
1.426 +
1.427 + $("<h4></h4>")
1.428 + .text( text )
1.429 + .appendTo("#fx-tests")
1.430 + .click(function(){
1.431 + $(this).next().toggle();
1.432 + })
1.433 + .after( elem );
1.434 +
1.435 + return elem;
1.436 +}
1.437 +
1.438 +makeTest.id = 1;
