Skip to content

Commit db96e2a

Browse files
gnarfgnarf
committed
Tests: Adding visual/unit tests for scale effect.
1 parent c1f71f1 commit db96e2a

File tree

6 files changed

+286
-49
lines changed

6 files changed

+286
-49
lines changed

‎tests/unit/effects/effects.html

Lines changed: 46 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,40 +28,54 @@
2828
<script src="../../jquery.simulate.js"></script>
2929
<script src="../testsuite.js"></script>
3030
<script src="effects_core.js"></script>
31-
31+
<script src="effects_scale.js"></script>
32+
3233
<script src="../swarminject.js"></script>
3334

3435
<style type="text/css">
35-
.hidden {
36-
display: none;
37-
}
38-
.test {
39-
background: #000;
40-
border: 0;
41-
width: 100px;
42-
height: 100px;
43-
}
44-
.testAddBorder {
45-
border: 10px solid #000;
46-
}
47-
.testChildren,
48-
.testChangeBackground {
49-
background: #fff;
50-
}
51-
.test h2 {
52-
font-size: 10px;
53-
}
54-
.testChildren h2 {
55-
font-size: 20px;
56-
}
57-
58-
.relWidth {
59-
width: 50%;
60-
}
36+
#qunit-fixture {
37+
width: 1000px;
38+
height: 1000px;
39+
}
40+
.hidden {
41+
display: none;
42+
}
43+
.test {
44+
background: #000;
45+
border: 0;
46+
width: 100px;
47+
height: 100px;
48+
}
49+
.testAddBorder {
50+
border: 10px solid #000;
51+
}
52+
.testChildren,
53+
.testChangeBackground {
54+
background: #fff;
55+
}
56+
.test h2 {
57+
font-size: 10px;
58+
}
59+
.testChildren h2 {
60+
font-size: 20px;
61+
}
62+
63+
.relWidth {
64+
width: 50%;
65+
}
66+
67+
.relHeight {
68+
height: 50%;
69+
}
70+
71+
.testScale {
72+
border: 5px solid #000;
73+
padding: 5px;
74+
margin: 5px;
75+
width: 50px;
76+
height: 50px;
77+
}
6178

62-
.relHeight {
63-
height: 50%;
64-
}
6579
</style>
6680
</head>
6781
<body>
@@ -81,6 +95,8 @@ <h2>Child Element Test</h2>
8195
<div class="relWidth relHeight testAddBorder">
8296
<h2>Slide with relative width</d2>
8397
</div>
98+
<div class="testScale">
99+
</div>
84100
</div>
85101

86102
</body>

‎tests/unit/effects/effects_scale.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
(function( $ ) {
2+
module( "effect.scale: Scale" );
3+
4+
function run( position, v, h, vo, ho ) {
5+
var desc = "End Position Correct: " + position + " (" + v + "," + h + ") - origin: (" + vo + "," + ho + ")";
6+
asyncTest( desc, function() {
7+
var test = $( ".testScale" ),
8+
css = {
9+
position: position
10+
},
11+
effect = {
12+
effect: "scale",
13+
mode: "effect",
14+
percent: 200,
15+
origin: [ vo, ho ],
16+
complete: complete,
17+
duration: 1
18+
},
19+
target = {},
20+
relative = position === "relative";
21+
22+
css[ h ] = 33;
23+
css[ v ] = 33;
24+
target[ h ] = h === ho ? css[ h ] : ho == "center" ? css[ h ] - 35 : css[ h ] - 70;
25+
target[ v ] = v === vo ? css[ v ] : vo == "middle" ? css[ v ] - 35 : css[ v ] - 70;
26+
if ( relative && h == "right" ) {
27+
target[ h ] += 70;
28+
}
29+
if ( relative && v == "bottom" ) {
30+
target[ v ] += 70;
31+
}
32+
test.css( css );
33+
test.effect( effect );
34+
35+
function complete() {
36+
equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc );
37+
equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc );
38+
start();
39+
}
40+
});
41+
}
42+
43+
function suite( position ) {
44+
run( position, "top", "left", "top", "left" );
45+
run( position, "top", "left", "middle", "center" );
46+
run( position, "top", "left", "bottom", "right" );
47+
run( position, "bottom", "right", "top", "left" );
48+
run( position, "bottom", "right", "middle", "center" );
49+
run( position, "bottom", "right", "bottom", "right" );
50+
}
51+
52+
$(function() {
53+
suite( "absolute" );
54+
suite( "relative" );
55+
$.offset.initialize();
56+
if ( $.offset.supportsFixedPosition ) {
57+
suite( "fixed" );
58+
}
59+
});
60+
61+
})( jQuery );

‎tests/visual/effects.all.css renamed to ‎tests/visual/effects/effects.all.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ body,html {
55
font-size: 12px;
66
font-family: Arial;
77
background: #191919;
8+
color: #fff;
89
}
910
body { margin: 1em; }
1011

‎tests/visual/effects.all.html renamed to ‎tests/visual/effects/effects.all.html

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Effects Test Suite</title>
6-
<link rel="stylesheet" href="effects.all.css" type="text/css" />
7-
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
12-
<script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
13-
<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
14-
<script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script>
15-
<script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
16-
<script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
17-
<script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
18-
<script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script>
19-
<script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script>
20-
<script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script>
21-
<script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script>
22-
<script type="text/javascript" src="effects.all.js"></script>
6+
<link rel="stylesheet" href="effects.all.css" type="text/css">
7+
<script src="../../../jquery-1.5.1.js"></script>
8+
<script src="../../../ui/jquery.effects.core.js"></script>
9+
<script src="../../../ui/jquery.effects.blind.js"></script>
10+
<script src="../../../ui/jquery.effects.bounce.js"></script>
11+
<script src="../../../ui/jquery.effects.clip.js"></script>
12+
<script src="../../../ui/jquery.effects.drop.js"></script>
13+
<script src="../../../ui/jquery.effects.explode.js"></script>
14+
<script src="../../../ui/jquery.effects.fade.js"></script>
15+
<script src="../../../ui/jquery.effects.fold.js"></script>
16+
<script src="../../../ui/jquery.effects.highlight.js"></script>
17+
<script src="../../../ui/jquery.effects.pulsate.js"></script>
18+
<script src="../../../ui/jquery.effects.scale.js"></script>
19+
<script src="../../../ui/jquery.effects.shake.js"></script>
20+
<script src="../../../ui/jquery.effects.slide.js"></script>
21+
<script src="../../../ui/jquery.effects.transfer.js"></script>
22+
<script src="effects.all.js"></script>
2323
</head>
2424
<body>
2525

‎tests/visual/effects.all.js renamed to ‎tests/visual/effects/effects.all.js

File renamed without changes.

‎tests/visual/effects/effects.scale.html

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Effects Test Suite</title>
6+
<link rel="stylesheet" href="effects.all.css" type="text/css">
7+
<script src="../../../jquery-1.5.1.js"></script>
8+
<script src="../../../ui/jquery.effects.core.js"></script>
9+
<script src="../../../ui/jquery.effects.scale.js"></script>
10+
<script src="effects.all.js"></script>
11+
<script type="text/javascript" charset="utf-8">
12+
jQuery(function( $ ) {
13+
var test = $( "#testBox" ),
14+
opts = $( ".arg" ),
15+
optsRev = $( opts.get().reverse() ),
16+
doer = $( "#doAnim" ),
17+
current = $( "#current" ),
18+
cleanStyle = test[0].style,
19+
total = 1;
20+
21+
opts.each(function() {
22+
total *= this.options.length;
23+
});
24+
25+
opts.change( doAnim );
26+
doer.click( doAnim );
27+
$( "#cyclePrev" ).click(function() {
28+
cycle( -1 );
29+
});
30+
$( "#cycleNext" ).click(function() {
31+
cycle( 1 );
32+
});
33+
34+
function cycle( direction ) {
35+
optsRev.each(function() {
36+
var cur = this.selectedIndex,
37+
next = cur + direction,
38+
len = this.options.length;
39+
40+
this.selectedIndex = ( next + len ) % len;
41+
42+
if ( ( next+len ) % len === next ) return false;
43+
});
44+
doAnim();
45+
}
46+
47+
48+
function doAnim() {
49+
var cur = 0;
50+
opts.each(function() {
51+
cur *= this.options.length
52+
cur += this.selectedIndex;
53+
});
54+
cur++;
55+
current.text( "Configuration: " + cur + " of " + total );
56+
run.apply(test, opts.map(function() {
57+
return $(this).val();
58+
}).get());
59+
}
60+
61+
function run( position, v, h, vo, ho ) {
62+
var el = this,
63+
style = el[0].style,
64+
effect = {
65+
effect: "scale",
66+
mode: "effect",
67+
percent: 200,
68+
origin: [ vo, ho ],
69+
duration: 500
70+
};
71+
el.stop(true, true);
72+
if ( typeof style === "object" ) {
73+
style.cssText = "";
74+
} else {
75+
el[0].style = "";
76+
}
77+
el.css( "position", position )
78+
.css( h, 5 )
79+
.css( v, 5 )
80+
.delay( 100 )
81+
.effect( effect );
82+
}
83+
});
84+
</script>
85+
<style type="text/css">
86+
#testArea {
87+
/* border: 5px dashed #777;*/
88+
width: 200px;
89+
height: 200px;
90+
position: relative;
91+
}
92+
#testBox {
93+
width: 50px;
94+
height: 50px;
95+
background-color: #bada55;
96+
color: black;
97+
border: 10px solid #fff;
98+
margin: 10px;
99+
padding: 10px;
100+
}
101+
label {
102+
display: block;
103+
}
104+
#controls {
105+
position: absolute;
106+
z-index: 300;
107+
left: 50%;
108+
top: 50%;
109+
margin-left: -200px;
110+
width: 400px;
111+
opacity: 0.8;
112+
}
113+
</style>
114+
</head>
115+
<body>
116+
<div id="testArea">
117+
<div id="testBox">
118+
</div>
119+
</div>
120+
<div id="controls">
121+
<label for="pos">Positioning
122+
<select id="pos" class="arg">
123+
<option value="absolute">absolute</option>
124+
<option value="relative">relative</option>
125+
<option value="fixed">fixed</option>
126+
</select>
127+
</label>
128+
<label for="vertPos">Vertical Positioning
129+
<select id="vertPos" class="arg">
130+
<option value="top">top</option>
131+
<option value="bottom">bottom</option>
132+
</select>
133+
</label>
134+
<label for="horizPos">Horizontal Positioning
135+
<select id="horizPos" class="arg">
136+
<option value="left">left</option>
137+
<option value="right">right</option>
138+
</select>
139+
</label>
140+
<label for="vertOrigin">Vertical Origin
141+
<select id="vertOrigin" class="arg">
142+
<option value="top">top</option>
143+
<option value="middle">middle</option>
144+
<option value="bottom">bottom</option>
145+
</select>
146+
</label>
147+
<label for="horizOrigin">Horizontal Origin
148+
<select id="horizOrigin" class="arg">
149+
<option value="left">left</option>
150+
<option value="center">center</option>
151+
<option value="right">right</option>
152+
</select>
153+
</label><br />
154+
<label id="current">jQuery UI Scale Animation Test</label>
155+
<button id="cyclePrev">Back</button>
156+
<button id="doAnim">Run Animation</button>
157+
<button id="cycleNext">Forward</button>
158+
</div>
159+
</body>

0 commit comments

Comments
 (0)