diff options
Diffstat (limited to 'tests/unit/effects')
| -rw-r--r-- | tests/unit/effects/effects.html | 73 | ||||
| -rw-r--r-- | tests/unit/effects/effects_core.js | 42 | ||||
| -rw-r--r-- | tests/unit/effects/effects_scale.js | 61 |
3 files changed, 153 insertions, 23 deletions
diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index ecfae9aa4..3199ba4a8 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -28,32 +28,54 @@ <script src="../../jquery.simulate.js"></script> <script src="../testsuite.js"></script> <script src="effects_core.js"></script> - + <script src="effects_scale.js"></script> + <script src="../swarminject.js"></script> <style type="text/css"> - .hidden { - display: none; - } - .test { - background: #000; - border: 0; - width: 100px; - height: 100px; - } - .testAddBorder { - border: 10px solid #000; - } - .testChildren, - .testChangeBackground { - background: #fff; - } - .test h2 { - font-size: 10px; - } - .testChildren h2 { - font-size: 20px; - } + #qunit-fixture { + width: 1000px; + height: 1000px; + } + .hidden { + display: none; + } + .test { + background: #000; + border: 0; + width: 100px; + height: 100px; + } + .testAddBorder { + border: 10px solid #000; + } + .testChildren, + .testChangeBackground { + background: #fff; + } + .test h2 { + font-size: 10px; + } + .testChildren h2 { + font-size: 20px; + } + + .relWidth { + width: 50%; + } + + .relHeight { + height: 50%; + } + + .testScale { + border: 5px solid #000; + padding: 5px; + margin: 5px; + width: 50px; + height: 50px; + } + </style> </head> <body> @@ -70,6 +92,11 @@ <div class="animateClass test"> <h2>Child Element Test</h2> </div> + <div class="relWidth relHeight testAddBorder"> + <h2>Slide with relative width</d2> + </div> + <div class="testScale"> + </div> </div> </body> diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index ed9fbf9ba..7c20e22fe 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -19,6 +19,18 @@ var minDuration = 15, module( "effects.core" ); +test( "Immediate Return Conditions", function() { + var hidden = $( "div.hidden" ), + count = 0; + expect( 3 ); + hidden.hide( "blind", function() { + equal( ++count, 1, "Hide on hidden returned immediately" ); + }).show().show( "blind", function() { + equal( ++count, 2, "Show on shown returned immediately" ); + }); + equal( ++count, 3, "Both Functions worked properly" ); +}); + $.each( $.effects.effect, function( effect ) { if ( effect === "transfer" ) { return; @@ -54,6 +66,21 @@ $.each( $.effects.effect, function( effect ) { 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" ); + }); }); module("animateClass"); @@ -108,4 +135,19 @@ asyncTest( "animateClass works with children", function() { }}); }); +asyncTest( "animateClass clears style properties when stopped", function() { + var test = $("div.animateClass"), + style = test[0].style, + orig = style.cssText; + + expect( 2 ); + + test.addClass( "testChangeBackground", duration ); + notEqual( orig, style.cssText, "cssText is the not the same after starting animation" ); + + test.stop( true, true ); + equal( orig, style.cssText, "cssText is the same after stopping animation midway" ); + start(); +}); + })(jQuery); diff --git a/tests/unit/effects/effects_scale.js b/tests/unit/effects/effects_scale.js new file mode 100644 index 000000000..1436cd030 --- /dev/null +++ b/tests/unit/effects/effects_scale.js @@ -0,0 +1,61 @@ +(function( $ ) { +module( "effect.scale: Scale" ); + +function run( position, v, h, vo, ho ) { + var desc = "End Position Correct: " + position + " (" + v + "," + h + ") - origin: (" + vo + "," + ho + ")"; + asyncTest( desc, function() { + var test = $( ".testScale" ), + css = { + position: position + }, + effect = { + effect: "scale", + mode: "effect", + percent: 200, + origin: [ vo, ho ], + complete: complete, + duration: 1 + }, + target = {}, + relative = position === "relative"; + + css[ h ] = 33; + css[ v ] = 33; + target[ h ] = h === ho ? css[ h ] : ho == "center" ? css[ h ] - 35 : css[ h ] - 70; + target[ v ] = v === vo ? css[ v ] : vo == "middle" ? css[ v ] - 35 : css[ v ] - 70; + if ( relative && h == "right" ) { + target[ h ] += 70; + } + if ( relative && v == "bottom" ) { + target[ v ] += 70; + } + test.css( css ); + test.effect( effect ); + + function complete() { + equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc ); + equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc ); + start(); + } + }); +} + +function suite( position ) { + run( position, "top", "left", "top", "left" ); + run( position, "top", "left", "middle", "center" ); + run( position, "top", "left", "bottom", "right" ); + run( position, "bottom", "right", "top", "left" ); + run( position, "bottom", "right", "middle", "center" ); + run( position, "bottom", "right", "bottom", "right" ); +} + +$(function() { + suite( "absolute" ); + suite( "relative" ); + $.offset.initialize(); + if ( $.offset.supportsFixedPosition ) { + suite( "fixed" ); + } +}); + +})( jQuery ); |