diff options
| author | ddstreet <ddstreet@ieee.org> | 2011-10-25 17:40:37 -0500 |
|---|---|---|
| committer | Corey Frang <gnarf@gnarf.net> | 2011-10-25 17:40:37 -0500 |
| commit | e3156ea28617e6cc30a3389ee8d3f30514b9d894 (patch) | |
| tree | 7a44d647efd777ec1c64fe3c4d896cbddf7191ed /tests/unit/effects | |
| parent | 4cc61b459d73af78dd40f01e3250f2546d9f04bd (diff) | |
| download | jquery-ui-e3156ea28617e6cc30a3389ee8d3f30514b9d894.tar.gz jquery-ui-e3156ea28617e6cc30a3389ee8d3f30514b9d894.zip | |
Effects Core: Do not overwrite css or class changes that aren't animated during class animation. Fixed #7106 - animateClass: css and class changes during animation are lost
Diffstat (limited to 'tests/unit/effects')
| -rw-r--r-- | tests/unit/effects/effects.html | 10 | ||||
| -rw-r--r-- | tests/unit/effects/effects_core.js | 136 |
2 files changed, 87 insertions, 59 deletions
diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index f2c447ef7..f5dac54c7 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -75,6 +75,14 @@ height: 50px; } + .ticket7106 { + width: 50px; + height: 50px; + } + .ticket7106.animate { + width: 100px; + } + </style> </head> <body> @@ -94,6 +102,8 @@ </div> <div class="testScale"> </div> +<div class="ticket7106"> +</div> </div> </body> diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 1e5da2113..e1d52bd80 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -31,59 +31,19 @@ test( "Immediate Return Conditions", function() { equal( ++count, 3, "Both Functions worked properly" ); }); -$.each( $.effects.effect, function( effect ) { - if ( effect === "transfer" ) { - return; - } - module( "effect."+effect ); - asyncTest( "show/hide", function() { - var hidden = $( "div.hidden" ); - expect( 8 ); - - var count = 0, - test = 0; - - function queueTest( fn ) { - count++; - var point = count; - return function( next ) { - test++; - equal( point, test, "Queue function fired in order" ); - if ( fn ) { - fn(); - } else { - setTimeout( next, minDuration ); - } - }; - } - - hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() { - equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" ); - })).queue( queueTest() ).hide( effect, minDuration, queueTest(function() { - equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" ); - })).queue( queueTest(function(next) { - deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains"); - start(); - })); - }); - - asyncTest( "relative width & height - properties are preserved", function() { - var test = $("div.relWidth.relHeight"), - width = test.width(), height = test.height(), - cssWidth = test[0].style.width, cssHeight = test[0].style.height; +test( "createWrapper and removeWrapper retain focused elements (#7595)", function() { + expect( 2 ); + var test = $( "div.hidden" ).show(), + input = $( "<input>" ).appendTo( test ).focus(); - expect( 4 ); - test.toggle( effect, minDuration, function() { - equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" ); - equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" ); - start(); - }); - equal( test.width(), width, "Width is the same px after animation started" ); - equal( test.height(), height, "Height is the same px after animation started" ); - }); + $.effects.createWrapper( test ); + equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" ); + $.effects.removeWrapper( test ); + equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" ); }); -module("animateClass"); + +module( "effects.core: animateClass" ); asyncTest( "animateClass works with borderStyle", function() { var test = $("div.animateClass"), @@ -150,15 +110,73 @@ asyncTest( "animateClass clears style properties when stopped", function() { start(); }); -test( "createWrapper and removeWrapper retain focused elements (#7595)", function() { - expect( 2 ); - var test = $( "div.hidden" ).show(), - input = $( "<input>" ).appendTo( test ).focus(); +asyncTest( "animateClass: css and class changes during animation are not lost (#7106)", function() { + var test = $( "div.ticket7106" ); - $.effects.createWrapper( test ); - equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" ); - $.effects.removeWrapper( test ); - equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" ); -}) + // add a class and change a style property after starting an animated class + test.addClass( "animate", minDuration, animationComplete ) + .addClass( "testClass" ) + .height( 100 ); + + // ensure the class stays and that the css property stays + function animationComplete() { + ok( test.hasClass( "testClass" ), "class change during animateClass was not lost" ); + equal( test.height(), 100, "css change during animateClass was not lost" ); + start(); + } +}); + + +$.each( $.effects.effect, function( effect ) { + if ( effect === "transfer" ) { + return; + } + module( "effect."+effect ); + asyncTest( "show/hide", function() { + var hidden = $( "div.hidden" ); + expect( 8 ); + + var count = 0, + test = 0; + + function queueTest( fn ) { + count++; + var point = count; + return function( next ) { + test++; + equal( point, test, "Queue function fired in order" ); + if ( fn ) { + fn(); + } else { + setTimeout( next, minDuration ); + } + }; + } + + hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() { + equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" ); + })).queue( queueTest() ).hide( effect, minDuration, queueTest(function() { + equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" ); + })).queue( queueTest(function(next) { + deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains"); + start(); + })); + }); + + asyncTest( "relative width & height - properties are preserved", function() { + var test = $("div.relWidth.relHeight"), + width = test.width(), height = test.height(), + cssWidth = test[0].style.width, cssHeight = test[0].style.height; + + expect( 4 ); + test.toggle( effect, minDuration, function() { + equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" ); + equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" ); + start(); + }); + equal( test.width(), width, "Width is the same px after animation started" ); + equal( test.height(), height, "Height is the same px after animation started" ); + }); +}); })(jQuery); |