root/lang/javascript/jstweener/trunk/test/test.html @ 8372

Revision 8372, 6.1 kB (checked in by os0x, 5 years ago)

lang/javascript/jstweener/trunk/src/JSTweener.js:
lang/javascript/jstweener/trunk/test/test.html:

  • delay:0 を指定したときにエラーになるバグを修正
  • Property svn:mime-type set to text/html
Line 
1<html>
2  <head>
3    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4    <meta http-equiv="Content-Style-Type" content="text/css">
5    <meta http-equiv="Content-Script-Type" content="text/javascript">
6    <title>JSTweener Test</title>
7    <script language="JavaScript" src="../src/JSTweener.js"></script>
8    <script language="JavaScript" src="utils.js"></script>
9    <style>
10        #test1 {
11            position: absolute;
12        }
13
14        .testTemplate {
15            position: absolute;
16            top:100px;
17            left:100px;
18        }
19
20        ul {
21            font-size: 80%;
22        }
23    </style>
24  </head>
25  <body>
26      <div id="test1" style="top:100px; height:0px;left:100px;width:0px;"></div>
27      <h1>JSTweener Test</h1>
28      <div id="result"></div>
29  </body>
30</html>
31<script>
32    is(JSTweener.toNumber('10px'), 10, 'toNumber');
33    is(JSTweener.toNumber('#100000', '#'), 100000, 'toNumber prefix');
34    is(JSTweener.toNumber('10pt',null , 'pt'), 10, 'toNumber suffix');
35
36    var o1 = {x:100, y:100};
37
38    JSTweener.addTween(o1, {
39        time: 0.5,
40        transition: 'linear',
41        onStart: function() {
42           ok(true, 'o1 start');
43           testFunc.later(250)(function() {
44               return (o1.x  > 105 && o1.y > 105 && o1.x  < 195 && o1.y < 195);
45           }, 'o1 value');
46        },
47        onComplete: function() {
48            ok(o1.x == 200 && o1.y == 200, 'o1 complete');
49        },
50        x: 200,
51        y: 200
52    });
53
54    var test1 = document.getElementById('test1');
55    JSTweener.addTween(test1.style, {
56        time: 0.5,
57        transition: 'linear',
58        onStart: function() {
59           ok(true, 'test1 start');
60           testFunc.later(250)(function() {
61               return (
62               JSTweener.toNumber(test1.style.top)  > 105 &&
63               JSTweener.toNumber(test1.style.left) > 105 &&
64               JSTweener.toNumber(test1.style.top)  < 195 &&
65               JSTweener.toNumber(test1.style.left) < 195
66               );
67           }, 'test1.style value');
68        },
69        onComplete: function() {
70            ok(
71            JSTweener.toNumber(test1.style.top) == 200 &&
72            JSTweener.toNumber(test1.style.left) == 200, 'test1.style complete');
73        },
74        top: 200,
75        left: 200
76    });
77
78    var createTestElement = function(idname) {
79        var div = document.createElement('div');
80        div.className = 'testTemplate';
81        div.id = idname;
82        document.body.appendChild(div);
83        return div;
84    }
85
86    var test2 = createTestElement('test2');
87    JSTweener.Utils.allSetStyleProperties(test2);
88
89    is(test2.style.top, '100px', 'test2 allSetStyleProperties');
90
91    JSTweener.addTween(test2.style, {
92        time: 0.5,
93        transition: 'linear',
94        onStart: function() {
95           ok(true, 'test2 start');
96           testFunc.later(250)(function() {
97               return (
98               JSTweener.toNumber(test2.style.top)  > 105 &&
99               JSTweener.toNumber(test2.style.left) > 105 &&
100               JSTweener.toNumber(test2.style.top)  < 195 &&
101               JSTweener.toNumber(test2.style.left) < 195
102               );
103           }, 'test2.style value');
104        },
105        onComplete: function() {
106            ok(
107            JSTweener.toNumber(test2.style.top) == 200 &&
108            JSTweener.toNumber(test2.style.left) == 200, 'test2.style complete');
109        },
110        top: 200,
111        left: 200
112    });
113
114    var test3 = createTestElement('test3');
115    JSTweener.Utils.allSetStyleProperties(test3);
116
117    test3.style.top = '100pt';
118    test3.style.left = '100pt';
119
120    JSTweener.addTween(test3.style, {
121        time: 0.5,
122        transition: 'linear',
123        onStart: function() {
124           ok(true, 'test3 start (suffix tests)');
125           testFunc.later(250)(function() {
126               return (
127               JSTweener.toNumber(test3.style.top, null, 'pt')  > 105 &&
128               JSTweener.toNumber(test3.style.left, null, 'pt') > 105 &&
129               JSTweener.toNumber(test3.style.top, null, 'pt')  < 195 &&
130               JSTweener.toNumber(test3.style.left, null, 'pt') < 195
131               );
132           }, 'test3.style value');
133        },
134        suffix: {
135            top: 'pt',
136            left: 'pt'
137        },
138        onComplete: function() {
139            ok(
140            test3.style.top == '200pt' &&
141            test3.style.left == '200pt', 'test3.style complete');
142        },
143        top: 200,
144        left: 200
145    });
146
147    var test4 = createTestElement('test4');
148    JSTweener.Utils.allSetStyleProperties(test4);
149
150    is(test4.style.top, '100px', 'test4 allSetStyleProperties');
151
152    JSTweener.addTween(test4.style, {
153        time: 0.5,
154        transition: 'linear',
155        onStart: function() {
156           ok(true, 'test4(left) start');
157           testFunc.later(250)(function() {
158               return (
159               JSTweener.toNumber(test4.style.left) > 105 &&
160               JSTweener.toNumber(test4.style.left) < 195
161               );
162           }, 'test4(left).style value');
163        },
164        onComplete: function() {
165            ok(JSTweener.toNumber(test4.style.left) == 200, 'test4(left).style complete');
166        },
167        left: 200
168    });
169
170    JSTweener.addTween(test4.style, {
171        time: 0.5,
172        transition: 'easeInSine',
173        onStart: function() {
174           ok(true, 'test4(top) start');
175           testFunc.later(250)(function() {
176               return (
177               JSTweener.toNumber(test4.style.top) > 105 &&
178               JSTweener.toNumber(test4.style.top) < 195
179               );
180           }, 'test4(top).style value');
181        },
182        onComplete: function() {
183            ok(JSTweener.toNumber(test4.style.top) == 200, 'test4(top).style complete');
184        },
185        top: 200
186    });
187
188    var a5 = [{x:0, y:0},{x:100, y:100},{x:200, y:200}];
189
190(function(){
191    for (var i = 0;i<a5.length;i++) {
192      var o = a5[i];
193      JSTweener.addTween(o, {
194          time: 0.5,
195          transition: 'linear',
196          delay:i,
197          onComplete: function() {
198              ok(true, 'test5 o' + this.delay + ' complete');
199          },
200          x: 200,
201          y: 200
202      });
203    }
204})();
205</script>
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
Note: See TracBrowser for help on using the browser.