diff options
Diffstat (limited to 'tests/unit')
| -rw-r--r-- | tests/unit/effects/effects.html | 51 | ||||
| -rw-r--r-- | tests/unit/effects/effects_core.js | 100 | ||||
| -rw-r--r-- | tests/unit/effects/effects_scale.js | 4 |
3 files changed, 112 insertions, 43 deletions
diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index d6cfdb797..a092ce04b 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -88,28 +88,47 @@ width: 100px; } + .relative { + position: relative; + top: 0px; + left: 0px; + } + .absolute { + position: absolute; + top: 0px; + left: 0px; + } + .fixed { + position: fixed; + top: 0px; + left: 0px; + } + .static { + position: static; + } + </style> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"> -<div id="elem" class="test"> -</div> -<div class="hidden test"> - <div>.</div> -</div> -<div class="animateClass test"> - <h2>Child Element Test</h2> -</div> -<div class="relWidth relHeight testAddBorder"> - <h2>Slide with relative width</h2> -</div> -<div class="testScale"> -</div> -<div class="ticket7106"> -</div> - + <div id="elem" class="test"></div> + <div class="hidden test"> + <div>.</div> + </div> + <div class="animateClass test"> + <h2>Child Element Test</h2> + </div> + <div class="relWidth relHeight testAddBorder"> + <h2>Slide with relative width</h2> + </div> + <div class="testScale"></div> + <div class="ticket7106"></div> + <div class="relative"></div> + <div class="absolute"></div> + <div class="fixed"></div> + <div class="static"></div> </div> </body> </html> diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 05db494e6..0c4e5574f 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -1,11 +1,11 @@ (function($) { function present( value, array, message ) { - QUnit.push( jQuery.inArray( value, array ) !== -1 , value, array, message ); + QUnit.push( jQuery.inArray( value, array ) !== -1, value, array, message ); } function notPresent( value, array, message ) { - QUnit.push( jQuery.inArray( value, array ) === -1 , value, array, message ); + QUnit.push( jQuery.inArray( value, array ) === -1, value, array, message ); } // minDuration is used for "short" animate tests where we are only concerned about the final @@ -75,20 +75,6 @@ test( "removeClass", function() { equal( "", element[ 0 ].className ); }); - -/* TODO: Disabled - Can't figure out why this is failing in IE 6/7 -test( "createWrapper and removeWrapper retain focused elements (#7595)", function() { - expect( 2 ); - var test = $( "div.hidden" ).show(), - input = $( "<input type='text'>" ).appendTo( test ).focus(); - - $.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( "effects.core: animateClass" ); asyncTest( "animateClass works with borderStyle", function() { @@ -213,6 +199,44 @@ asyncTest( "animateClass: css and class changes during animation are not lost (# .height( 100 ); }); +test( "createPlaceholder: only created for static or relative elements", function() { + expect( 4 ); + + ok( $.effects.createPlaceholder( $( ".relative" ) ).length, "placeholder created for relative element" ); + ok( $.effects.createPlaceholder( $( ".static" ) ).length, "placeholder created for static element" ); + ok( !$.effects.createPlaceholder( $( ".absolute" ) ), "placeholder not created for absolute element" ); + ok( !$.effects.createPlaceholder( $( ".fixed" ) ), "placeholder not created for fixed element" ); +}); + +test( "createPlaceholder: preserves layout affecting properties", function() { + expect( 7 ); + + var position = 5, + element = $( ".relative" ).css({ + top: position, + left: position + }), + before = { + offset: element.offset(), + outerWidth: element.outerWidth( true ), + outerHeight: element.outerHeight( true ), + "float": element.css( "float" ), + position: element.position() + }, + placeholder = $.effects.createPlaceholder( element ); + + // Placeholders are only placed to preserve the effect on layout. Considering + // top and left do not change layout, they are not preserved, which makes some + // of the math simpler in the implementation. + deepEqual( before.offset.top - position, placeholder.offset().top, "offset top preserved" ); + deepEqual( before.offset.left - position, placeholder.offset().left, "offset left preserved" ); + deepEqual( before.position.top - position, placeholder.position().top, "position top preserved" ); + deepEqual( before.position.left - position, placeholder.position().left, "position left preserved" ); + + deepEqual( before[ "float" ], placeholder.css( "float" ), "float preserved" ); + deepEqual( before.outerWidth, placeholder.outerWidth( true ), "width preserved" ); + deepEqual( before.outerHeight, placeholder.outerHeight( true ), "height preserved" ); +}); $.each( $.effects.effect, function( effect ) { module( "effects." + effect ); @@ -223,7 +247,7 @@ $.each( $.effects.effect, function( effect ) { return; } asyncTest( "show/hide", function() { - expect( 8 ); + expect( 12 ); var hidden = $( "div.hidden" ), count = 0, test = 0; @@ -242,14 +266,40 @@ $.each( $.effects.effect, function( effect ) { }; } - 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() { - deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains"); - start(); - })); + function duringTest( fn ) { + return function( next ) { + setTimeout( fn ); + next(); + }; + } + + hidden + .queue( queueTest() ) + .queue( duringTest(function() { + ok( hidden.is( ":animated" ), + "Hidden is seen as animated during .show(\"" + effect + "\", time)" ); + }) ) + .show( effect, minDuration, queueTest(function() { + equal( hidden.css( "display" ), "block", + "Hidden is shown after .show(\"" + effect + "\", time)" ); + ok( !$( ".ui-effects-placeholder" ).length, + "No placeholder remains after .show(\"" + effect + "\", time)" ); + }) ) + .queue( queueTest() ) + .queue( duringTest(function() { + ok( hidden.is( ":animated" ), + "Hidden is seen as animated during .hide(\"" + effect + "\", time)" ); + }) ) + .hide( effect, minDuration, queueTest(function() { + equal( hidden.css( "display" ), "none", + "Back to hidden after .hide(\"" + effect + "\", time)" ); + ok( !$( ".ui-effects-placeholder" ).length, + "No placeholder remains after .hide(\"" + effect + "\", time)" ); + }) ) + .queue( queueTest(function() { + deepEqual( hidden.queue(), [ "inprogress" ], "Only the inprogress sentinel remains" ); + start(); + }) ); }); asyncTest( "relative width & height - properties are preserved", function() { diff --git a/tests/unit/effects/effects_scale.js b/tests/unit/effects/effects_scale.js index 6abbcb538..caed39c22 100644 --- a/tests/unit/effects/effects_scale.js +++ b/tests/unit/effects/effects_scale.js @@ -6,8 +6,8 @@ function run( position, v, h, vo, ho ) { asyncTest( desc, function() { expect( 2 ); 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 ); + closeEnough( parseInt( test.css( h ), 10 ), target[ h ], 1, "Horizontal Position Correct " + desc ); + closeEnough( parseInt( test.css( v ), 10 ), target[ v ], 1, "Vertical Position Correct " + desc ); start(); } var test = $( ".testScale" ), |