aboutsummaryrefslogtreecommitdiffstats
path: root/tests
diff options
context:
space:
mode:
authorMike Sherov <mike.sherov@gmail.com>2012-12-26 08:35:42 -0500
committerMike Sherov <mike.sherov@gmail.com>2014-12-10 16:58:38 -0500
commitb6bec797d6a8ef0b377a866c38c67e66a626b45f (patch)
tree2e38a21f1a3894ebe6c44283fd568243611cc403 /tests
parent2a99bb7d37b7084b22b106040441a94f43785a05 (diff)
downloadjquery-ui-b6bec797d6a8ef0b377a866c38c67e66a626b45f.tar.gz
jquery-ui-b6bec797d6a8ef0b377a866c38c67e66a626b45f.zip
Effects: Rewrite
1. Introduces a set of helper methods to easily create and define new effects. 2. Uses clip animations and placeholders instead of wrappers for clip effects. 3. Ensures all animations are detectable as animated Fixes #10599 Fixes #9477 Fixes #9257 Fixes #9066 Fixes #8867 Fixes #8671 Fixes #8505 Fixes #7885 Fixes #7041 Closes gh-1017
Diffstat (limited to 'tests')
-rw-r--r--tests/unit/effects/effects.html51
-rw-r--r--tests/unit/effects/effects_core.js100
-rw-r--r--tests/unit/effects/effects_scale.js4
-rw-r--r--tests/visual/effects/all.html2
-rw-r--r--tests/visual/effects/clip.html3
-rw-r--r--tests/visual/effects/effects.js2
-rw-r--r--tests/visual/effects/image.pngbin0 -> 3894 bytes
-rw-r--r--tests/visual/index.html1
8 files changed, 118 insertions, 45 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" ),
diff --git a/tests/visual/effects/all.html b/tests/visual/effects/all.html
index 9fb4cf9c4..c1bdd9fa3 100644
--- a/tests/visual/effects/all.html
+++ b/tests/visual/effects/all.html
@@ -14,8 +14,10 @@
<script src="../../../ui/effect-fade.js"></script>
<script src="../../../ui/effect-fold.js"></script>
<script src="../../../ui/effect-highlight.js"></script>
+ <script src="../../../ui/effect-puff.js"></script>
<script src="../../../ui/effect-pulsate.js"></script>
<script src="../../../ui/effect-scale.js"></script>
+ <script src="../../../ui/effect-size.js"></script>
<script src="../../../ui/effect-shake.js"></script>
<script src="../../../ui/effect-slide.js"></script>
<script src="../../../ui/effect-transfer.js"></script>
diff --git a/tests/visual/effects/clip.html b/tests/visual/effects/clip.html
index 49efa6d8b..f56f54189 100644
--- a/tests/visual/effects/clip.html
+++ b/tests/visual/effects/clip.html
@@ -70,6 +70,7 @@
<p>EXPECTED: Clicking "Toggle" or "Effect Toggle" a second time reverses the animation, first showing all elements at their original dimensions, and restoring them to their original state.</p>
<p>EXPECTED: Clicking "Effect Default" should always perform a "hide" animation.</p>
<p>EXPECTED: Clicking any of the buttons in quick succession should queue the relevant animations.</p>
+<p>EXPECTED CANTFIX: In IE8, the clip animation jumps due to a bug that causes .css('clip') to return undefined unless the clip property is an inline style.</p>
<div class="container">
<button class="toggle">Toggle</button>
@@ -80,7 +81,7 @@
<p>Jerky corned beef short loin fatback jowl tail. Rump spare ribs shoulder pork belly. Sausage cow ground round bacon. Bresaola kielbasa pastrami brisket ham hock. Andouille kielbasa ham, pork beef tenderloin ground round beef ribs flank turkey pancetta tri-tip.</p>
<div class="column">
<p>Shankle filet mignon ribeye chicken, bacon jowl drumstick frankfurter swine short loin capicola leberkas tenderloin pig. Shankle bacon shank pork loin, shoulder ham drumstick biltong. Shankle ham pastrami ball tip turkey leberkas pork loin ground round. Chicken strip steak venison shoulder biltong ham. Bacon pork loin tenderloin kielbasa, prosciutto sausage leberkas jowl ribeye turducken. Flank short loin venison tenderloin spare ribs boudin, tongue pork chop shank sirloin. Ground round ham pork belly, corned beef jowl strip steak short ribs prosciutto pig bresaola spare ribs.</p>
- <img class="target" style="margin: 10px 20px 30px 40px;" src="../../images/jquery_521x191.png" alt="jQuery Logo">
+ <img class="target margin" src="../../images/jquery_521x191.png" alt="jQuery Logo">
<p>Pork loin biltong ball tip tail jerky beef ribs prosciutto short loin turducken. Turkey chicken jowl pork loin shank tri-tip swine brisket. Doner prosciutto leberkas venison ground round, short loin capicola hamburger pork bacon. Spare ribs beef pork tenderloin rump shoulder pork belly turducken cow beef ribs pastrami tail flank. Spare ribs tri-tip shank, pork beef ribs ribeye chicken bacon boudin shoulder venison. Sirloin beef ribs boudin, andouille doner tail ball tip biltong prosciutto chicken beef turkey tongue hamburger tri-tip.</p>
</div>
<p>Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
diff --git a/tests/visual/effects/effects.js b/tests/visual/effects/effects.js
index 624e0b128..f0963a99d 100644
--- a/tests/visual/effects/effects.js
+++ b/tests/visual/effects/effects.js
@@ -57,7 +57,7 @@ effect( "#highlight", "highlight", {} );
effect( "#pulsate", "pulsate", { times: 2 } );
-effect( "#puff", "puff", { times: 2 } );
+effect( "#puff", "puff", {} );
effect( "#scale", "scale", {} );
effect( "#size", "size", {} );
$( "#sizeToggle" ).click(function() {
diff --git a/tests/visual/effects/image.png b/tests/visual/effects/image.png
new file mode 100644
index 000000000..4ec90439a
--- /dev/null
+++ b/tests/visual/effects/image.png
Binary files differ
diff --git a/tests/visual/index.html b/tests/visual/index.html
index f7d516f20..0c9b14da8 100644
--- a/tests/visual/index.html
+++ b/tests/visual/index.html
@@ -48,6 +48,7 @@
<h2>Effects</h2>
<ul>
<li><a href="effects/all.html">All</a></li>
+ <li><a href="effects/clip.html">Clip</a></li>
<li><a href="effects/scale.html">Scale</a></li>
<li><a href="effects/shake.html">Shake</a></li>
</ul>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-25 18:24:40 +0000