aboutsummaryrefslogtreecommitdiffstats
path: root/tests
diff options
context:
space:
mode:
authorgnarf <gnarf@gnarf.net>2011-06-14 15:11:43 -0500
committergnarf <gnarf@gnarf.net>2011-06-14 15:11:43 -0500
commitdb96e2a51f83c2b1e42b18d7995e356025083ec7 (patch)
tree05590cb926129244196b78fbe9d95dc806769e7a /tests
parentc1f71f1c2f732e58a8fbca91185a284ea8db6b1b (diff)
downloadjquery-ui-db96e2a51f83c2b1e42b18d7995e356025083ec7.tar.gz
jquery-ui-db96e2a51f83c2b1e42b18d7995e356025083ec7.zip
Tests: Adding visual/unit tests for scale effect.
Diffstat (limited to 'tests')
-rw-r--r--tests/unit/effects/effects.html76
-rw-r--r--tests/unit/effects/effects_scale.js61
-rw-r--r--tests/visual/effects/effects.all.css (renamed from tests/visual/effects.all.css)1
-rw-r--r--tests/visual/effects/effects.all.html (renamed from tests/visual/effects.all.html)38
-rw-r--r--tests/visual/effects/effects.all.js (renamed from tests/visual/effects.all.js)0
-rw-r--r--tests/visual/effects/effects.scale.html159
6 files changed, 286 insertions, 49 deletions
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 @@
<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;
- }
-
- .relWidth {
- width: 50%;
- }
+ #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;
+ }
- .relHeight {
- height: 50%;
- }
</style>
</head>
<body>
@@ -81,6 +95,8 @@
<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_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/effects.all.css
index d2ed94026..1d531b026 100644
--- a/tests/visual/effects.all.css
+++ b/tests/visual/effects/effects.all.css
@@ -5,6 +5,7 @@ body,html {
font-size: 12px;
font-family: Arial;
background: #191919;
+ color: #fff;
}
body { margin: 1em; }
diff --git a/tests/visual/effects.all.html b/tests/visual/effects/effects.all.html
index fed35de8a..a2f8f62ef 100644
--- a/tests/visual/effects.all.html
+++ b/tests/visual/effects/effects.all.html
@@ -1,25 +1,25 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
- <link rel="stylesheet" href="effects.all.css" type="text/css" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script>
- <script type="text/javascript" src="effects.all.js"></script>
+ <link rel="stylesheet" href="effects.all.css" type="text/css">
+ <script src="../../../jquery-1.5.1.js"></script>
+ <script src="../../../ui/jquery.effects.core.js"></script>
+ <script src="../../../ui/jquery.effects.blind.js"></script>
+ <script src="../../../ui/jquery.effects.bounce.js"></script>
+ <script src="../../../ui/jquery.effects.clip.js"></script>
+ <script src="../../../ui/jquery.effects.drop.js"></script>
+ <script src="../../../ui/jquery.effects.explode.js"></script>
+ <script src="../../../ui/jquery.effects.fade.js"></script>
+ <script src="../../../ui/jquery.effects.fold.js"></script>
+ <script src="../../../ui/jquery.effects.highlight.js"></script>
+ <script src="../../../ui/jquery.effects.pulsate.js"></script>
+ <script src="../../../ui/jquery.effects.scale.js"></script>
+ <script src="../../../ui/jquery.effects.shake.js"></script>
+ <script src="../../../ui/jquery.effects.slide.js"></script>
+ <script src="../../../ui/jquery.effects.transfer.js"></script>
+ <script src="effects.all.js"></script>
</head>
<body>
diff --git a/tests/visual/effects.all.js b/tests/visual/effects/effects.all.js
index a28c41a89..a28c41a89 100644
--- a/tests/visual/effects.all.js
+++ b/tests/visual/effects/effects.all.js
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 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Effects Test Suite</title>
+ <link rel="stylesheet" href="effects.all.css" type="text/css">
+ <script src="../../../jquery-1.5.1.js"></script>
+ <script src="../../../ui/jquery.effects.core.js"></script>
+ <script src="../../../ui/jquery.effects.scale.js"></script>
+ <script src="effects.all.js"></script>
+ <script type="text/javascript" charset="utf-8">
+ jQuery(function( $ ) {
+ var test = $( "#testBox" ),
+ opts = $( ".arg" ),
+ optsRev = $( opts.get().reverse() ),
+ doer = $( "#doAnim" ),
+ current = $( "#current" ),
+ cleanStyle = test[0].style,
+ total = 1;
+
+ opts.each(function() {
+ total *= this.options.length;
+ });
+
+ opts.change( doAnim );
+ doer.click( doAnim );
+ $( "#cyclePrev" ).click(function() {
+ cycle( -1 );
+ });
+ $( "#cycleNext" ).click(function() {
+ cycle( 1 );
+ });
+
+ function cycle( direction ) {
+ optsRev.each(function() {
+ var cur = this.selectedIndex,
+ next = cur + direction,
+ len = this.options.length;
+
+ this.selectedIndex = ( next + len ) % len;
+
+ if ( ( next+len ) % len === next ) return false;
+ });
+ doAnim();
+ }
+
+
+ function doAnim() {
+ var cur = 0;
+ opts.each(function() {
+ cur *= this.options.length
+ cur += this.selectedIndex;
+ });
+ cur++;
+ current.text( "Configuration: " + cur + " of " + total );
+ run.apply(test, opts.map(function() {
+ return $(this).val();
+ }).get());
+ }
+
+ function run( position, v, h, vo, ho ) {
+ var el = this,
+ style = el[0].style,
+ effect = {
+ effect: "scale",
+ mode: "effect",
+ percent: 200,
+ origin: [ vo, ho ],
+ duration: 500
+ };
+ el.stop(true, true);
+ if ( typeof style === "object" ) {
+ style.cssText = "";
+ } else {
+ el[0].style = "";
+ }
+ el.css( "position", position )
+ .css( h, 5 )
+ .css( v, 5 )
+ .delay( 100 )
+ .effect( effect );
+ }
+ });
+ </script>
+ <style type="text/css">
+ #testArea {
+/* border: 5px dashed #777;*/
+ width: 200px;
+ height: 200px;
+ position: relative;
+ }
+ #testBox {
+ width: 50px;
+ height: 50px;
+ background-color: #bada55;
+ color: black;
+ border: 10px solid #fff;
+ margin: 10px;
+ padding: 10px;
+ }
+ label {
+ display: block;
+ }
+ #controls {
+ position: absolute;
+ z-index: 300;
+ left: 50%;
+ top: 50%;
+ margin-left: -200px;
+ width: 400px;
+ opacity: 0.8;
+ }
+ </style>
+</head>
+<body>
+ <div id="testArea">
+ <div id="testBox">
+ </div>
+ </div>
+ <div id="controls">
+ <label for="pos">Positioning
+ <select id="pos" class="arg">
+ <option value="absolute">absolute</option>
+ <option value="relative">relative</option>
+ <option value="fixed">fixed</option>
+ </select>
+ </label>
+ <label for="vertPos">Vertical Positioning
+ <select id="vertPos" class="arg">
+ <option value="top">top</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </label>
+ <label for="horizPos">Horizontal Positioning
+ <select id="horizPos" class="arg">
+ <option value="left">left</option>
+ <option value="right">right</option>
+ </select>
+ </label>
+ <label for="vertOrigin">Vertical Origin
+ <select id="vertOrigin" class="arg">
+ <option value="top">top</option>
+ <option value="middle">middle</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </label>
+ <label for="horizOrigin">Horizontal Origin
+ <select id="horizOrigin" class="arg">
+ <option value="left">left</option>
+ <option value="center">center</option>
+ <option value="right">right</option>
+ </select>
+ </label><br />
+ <label id="current">jQuery UI Scale Animation Test</label>
+ <button id="cyclePrev">Back</button>
+ <button id="doAnim">Run Animation</button>
+ <button id="cycleNext">Forward</button>
+ </div>
+</body> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-30 23:06:08 +0000