From db96e2a51f83c2b1e42b18d7995e356025083ec7 Mon Sep 17 00:00:00 2001 From: gnarf Date: Tue, 14 Jun 2011 15:11:43 -0500 Subject: Tests: Adding visual/unit tests for scale effect. --- tests/unit/effects/effects.html | 76 ++++++----- tests/unit/effects/effects_scale.js | 61 +++++++++ tests/visual/effects.all.css | 54 -------- tests/visual/effects.all.html | 217 -------------------------------- tests/visual/effects.all.js | 106 ---------------- tests/visual/effects/effects.all.css | 55 ++++++++ tests/visual/effects/effects.all.html | 217 ++++++++++++++++++++++++++++++++ tests/visual/effects/effects.all.js | 106 ++++++++++++++++ tests/visual/effects/effects.scale.html | 159 +++++++++++++++++++++++ 9 files changed, 644 insertions(+), 407 deletions(-) create mode 100644 tests/unit/effects/effects_scale.js delete mode 100644 tests/visual/effects.all.css delete mode 100644 tests/visual/effects.all.html delete mode 100644 tests/visual/effects.all.js create mode 100644 tests/visual/effects/effects.all.css create mode 100644 tests/visual/effects/effects.all.html create mode 100644 tests/visual/effects/effects.all.js create mode 100644 tests/visual/effects/effects.scale.html diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index 6956ebcda..e3c6d2f4e 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -28,40 +28,54 @@ - + + @@ -81,6 +95,8 @@

Slide with relative width

+
+
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 ); diff --git a/tests/visual/effects.all.css b/tests/visual/effects.all.css deleted file mode 100644 index d2ed94026..000000000 --- a/tests/visual/effects.all.css +++ /dev/null @@ -1,54 +0,0 @@ - -body,html { - margin: 0; - padding: 0; - font-size: 12px; - font-family: Arial; - background: #191919; -} -body { margin: 1em; } - -ul.effects { - list-style-type: none; - margin: 0; - padding: 0; -} - -ul.effects li { - list-style-type: none; - margin: 0; - padding: 0; - width: 120px; - height: 100px; - float: left; - margin-top: 20px; - margin-left: 20px; -} - -div.effect { - width: 120px; - height: 100px; - background: #ccc; - border: 5px outset #aaa; - float: left; - cursor: pointer; - cursor: hand; -} - -div.current { - border: 5px outset #FF9C08; - background: #FF9C08; -} - -div.effect p { - color: #191919; - font-weight: bold; - margin: 0px; - padding: 10px; -} - -.ui-effects-transfer { - border: 1px dotted #fff; - background: #666; - opacity: 0.5; -} diff --git a/tests/visual/effects.all.html b/tests/visual/effects.all.html deleted file mode 100644 index fed35de8a..000000000 --- a/tests/visual/effects.all.html +++ /dev/null @@ -1,217 +0,0 @@ - - - - - jQuery UI Effects Test Suite - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/tests/visual/effects.all.js b/tests/visual/effects.all.js deleted file mode 100644 index a28c41a89..000000000 --- a/tests/visual/effects.all.js +++ /dev/null @@ -1,106 +0,0 @@ - -$(function() { - var duration = 1000, wait = 500; - - $("div.effect") - .hover(function() { $(this).addClass("hover"); }, - function() { $(this).removeClass("hover"); }); - - var effect = function(el, n, o) { - - $.extend(o, { - easing: "easeOutQuint" - }); - - $(el).bind("click", function() { - - $(this).addClass("current") - // delaying the initial animation makes sure that the queue stays in tact - .delay( 10 ) - .hide( n, o, duration ) - .delay( wait ) - .show( n, o, duration, function() { - $( this ).removeClass("current"); - }); - }); - - }; - - $("#hide").click(function() { - var el = $(this); - el.addClass("current").hide(duration, function() { - setTimeout(function() { - el.show(duration, function() { el.removeClass("current"); }); - }, wait); - }); - }); - - effect("#blindLeft", "blind", { direction: "left" }); - effect("#blindUp", "blind", { direction: "up" }); - effect("#blindRight", "blind", { direction: "right" }); - effect("#blindDown", "blind", { direction: "down" }); - - effect("#bounce3times", "bounce", { times: 3 }); - - effect("#clipHorizontally", "clip", { direction: "horizontal" }); - effect("#clipVertically", "clip", { direction: "vertical" }); - - effect("#dropDown", "drop", { direction: "down" }); - effect("#dropUp", "drop", { direction: "up" }); - effect("#dropLeft", "drop", { direction: "left" }); - effect("#dropRight", "drop", { direction: "right" }); - - effect("#explode9", "explode", {}); - effect("#explode36", "explode", { pieces: 36 }); - - effect("#fade", "fade", {}); - - effect("#fold", "fold", { size: 50 }); - - effect("#highlight", "highlight", {}); - - effect("#pulsate", "pulsate", { times: 2 }); - - effect("#puff", "puff", { times: 2 }); - effect("#scale", "scale", {}); - effect("#size", "size", {}); - $("#sizeToggle").bind("click", function() { - var opts = { to: { width: 300, height: 300 }}; - $(this).addClass('current') - .toggle("size", opts, duration) - .delay(wait) - .toggle("size", opts, duration, function() { - $(this).removeClass("current"); - }); - }); - - $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); }); - - effect("#slideDown", "slide", { direction: "down" }); - effect("#slideUp", "slide", { direction: "up" }); - effect("#slideLeft", "slide", { direction: "left" }); - effect("#slideRight", "slide", { direction: "right" }); - - $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); }); - - $("#addClass").click(function() { - $(this).addClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration, function() { - $(this).removeClass("current"); - }); - }); - $("#removeClass").click(function() { - $(this).addClass("current").removeClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); - $("#toggleClass").click(function() { - $(this).toggleClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); -}); diff --git a/tests/visual/effects/effects.all.css b/tests/visual/effects/effects.all.css new file mode 100644 index 000000000..1d531b026 --- /dev/null +++ b/tests/visual/effects/effects.all.css @@ -0,0 +1,55 @@ + +body,html { + margin: 0; + padding: 0; + font-size: 12px; + font-family: Arial; + background: #191919; + color: #fff; +} +body { margin: 1em; } + +ul.effects { + list-style-type: none; + margin: 0; + padding: 0; +} + +ul.effects li { + list-style-type: none; + margin: 0; + padding: 0; + width: 120px; + height: 100px; + float: left; + margin-top: 20px; + margin-left: 20px; +} + +div.effect { + width: 120px; + height: 100px; + background: #ccc; + border: 5px outset #aaa; + float: left; + cursor: pointer; + cursor: hand; +} + +div.current { + border: 5px outset #FF9C08; + background: #FF9C08; +} + +div.effect p { + color: #191919; + font-weight: bold; + margin: 0px; + padding: 10px; +} + +.ui-effects-transfer { + border: 1px dotted #fff; + background: #666; + opacity: 0.5; +} diff --git a/tests/visual/effects/effects.all.html b/tests/visual/effects/effects.all.html new file mode 100644 index 000000000..a2f8f62ef --- /dev/null +++ b/tests/visual/effects/effects.all.html @@ -0,0 +1,217 @@ + + + + + jQuery UI Effects Test Suite + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/visual/effects/effects.all.js b/tests/visual/effects/effects.all.js new file mode 100644 index 000000000..a28c41a89 --- /dev/null +++ b/tests/visual/effects/effects.all.js @@ -0,0 +1,106 @@ + +$(function() { + var duration = 1000, wait = 500; + + $("div.effect") + .hover(function() { $(this).addClass("hover"); }, + function() { $(this).removeClass("hover"); }); + + var effect = function(el, n, o) { + + $.extend(o, { + easing: "easeOutQuint" + }); + + $(el).bind("click", function() { + + $(this).addClass("current") + // delaying the initial animation makes sure that the queue stays in tact + .delay( 10 ) + .hide( n, o, duration ) + .delay( wait ) + .show( n, o, duration, function() { + $( this ).removeClass("current"); + }); + }); + + }; + + $("#hide").click(function() { + var el = $(this); + el.addClass("current").hide(duration, function() { + setTimeout(function() { + el.show(duration, function() { el.removeClass("current"); }); + }, wait); + }); + }); + + effect("#blindLeft", "blind", { direction: "left" }); + effect("#blindUp", "blind", { direction: "up" }); + effect("#blindRight", "blind", { direction: "right" }); + effect("#blindDown", "blind", { direction: "down" }); + + effect("#bounce3times", "bounce", { times: 3 }); + + effect("#clipHorizontally", "clip", { direction: "horizontal" }); + effect("#clipVertically", "clip", { direction: "vertical" }); + + effect("#dropDown", "drop", { direction: "down" }); + effect("#dropUp", "drop", { direction: "up" }); + effect("#dropLeft", "drop", { direction: "left" }); + effect("#dropRight", "drop", { direction: "right" }); + + effect("#explode9", "explode", {}); + effect("#explode36", "explode", { pieces: 36 }); + + effect("#fade", "fade", {}); + + effect("#fold", "fold", { size: 50 }); + + effect("#highlight", "highlight", {}); + + effect("#pulsate", "pulsate", { times: 2 }); + + effect("#puff", "puff", { times: 2 }); + effect("#scale", "scale", {}); + effect("#size", "size", {}); + $("#sizeToggle").bind("click", function() { + var opts = { to: { width: 300, height: 300 }}; + $(this).addClass('current') + .toggle("size", opts, duration) + .delay(wait) + .toggle("size", opts, duration, function() { + $(this).removeClass("current"); + }); + }); + + $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); }); + + effect("#slideDown", "slide", { direction: "down" }); + effect("#slideUp", "slide", { direction: "up" }); + effect("#slideLeft", "slide", { direction: "left" }); + effect("#slideRight", "slide", { direction: "right" }); + + $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); }); + + $("#addClass").click(function() { + $(this).addClass(function() { + window.console && console.log(arguments); + return "current"; + }, duration, function() { + $(this).removeClass("current"); + }); + }); + $("#removeClass").click(function() { + $(this).addClass("current").removeClass(function() { + window.console && console.log(arguments); + return "current"; + }, duration); + }); + $("#toggleClass").click(function() { + $(this).toggleClass(function() { + window.console && console.log(arguments); + return "current"; + }, duration); + }); +}); diff --git a/tests/visual/effects/effects.scale.html b/tests/visual/effects/effects.scale.html new file mode 100644 index 000000000..9521a1872 --- /dev/null +++ b/tests/visual/effects/effects.scale.html @@ -0,0 +1,159 @@ + + + + + jQuery UI Effects Test Suite + + + + + + + + + +
+
+
+
+
+ + + + +
+ + + + +
+ \ No newline at end of file -- cgit v1.2.3