The Tor Browser / file comparison

comparison: dom/tests/mochitest/ajax/scriptaculous/test/unit/slider_test.html

dom/tests/mochitest/ajax/scriptaculous/test/unit/slider_test.html

branch
TOR_BUG_9701
changeset 9
a63d609f5ebe
equal deleted inserted replaced
-1:000000000000 0:d7b689fb0d3c
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4 <head>
5 <title>script.aculo.us Unit test file</title>
6 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7 <script src="../../lib/prototype.js" type="text/javascript"></script>
8 <script src="../../src/scriptaculous.js" type="text/javascript"></script>
9 <script src="../../src/unittest.js" type="text/javascript"></script>
10 <link rel="stylesheet" href="../test.css" type="text/css" />
11 </head>
12 <body>
13 <h1>script.aculo.us Unit test file</h1>
14 <p>
15 Tests for slider.js
16 </p>
17
18 <div id="track1" style="width:200px;background-color:#aaa;height:5px;">
19 <div id="handle1" style="width:15px;height:25px;background-color:#f00;"> </div>
20 </div>
21
22 <div id="track2-vertical" style="height:100px;background-color:#aaa;width:5px;">
23 <div id="handle2-vertical" style="width:25px;height:10px;background-color:#f00;"> </div>
24 </div>
25
26 <div id="track2-horizontal" style="height:5px;background-color:#aaa;width:100px;">
27 <div id="handle2-horizontal" style="width:10px;height:25px;background-color:#f00;"> </div>
28 </div>
29
30 <div id="track3" style="width:300px;background-color:#cfb;height:30px;">
31 <span id="handle3-1">1</span>
32 <span id="handle3-2">2</span>
33 <span id="handle3-3">3</span>
34 </div>
35
36 <div id="track4" style="width:300px;position:relative;background-color:#cbf;height:30px;">
37 <span id="handle4-1" style="top:0;left:0;position:absolute;background-color:#f00;">1</span>
38 <span id="handle4-2" style="top:0;left:0;position:absolute;background-color:#0f0;">2</span>
39 <span id="handle4-3" style="top:0;left:0;position:absolute;background-color:#00f;">3</span>
40 </div>
41
42 <div id="track5" style="width:300px;background-color:#cbf;height:30px;position:relative;z-index:0;">
43 <div id="handle5-1" style="top:0;left:0;position:absolute;background-color:#f00;z-index:2">1</div>
44 <div id="handle5-2" style="top:0;left:0;position:absolute;background-color:#0f0;z-index:2">2</div>
45 <div id="handle5-3" style="top:0;left:0;position:absolute;background-color:#00f;z-index:2">3</div>
46
47 <div id="span5-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div>
48 <div id="span5-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div>
49 </div>
50
51 <div id="track6" style="width:20px;background-color:#cbf;height:100px;position:relative;z-index:0;">
52 <div id="handle6-1" style="top:0;left:0;height:13px;position:absolute;background-color:#f00;z-index:2">1</div>
53 <div id="handle6-2" style="top:0;left:0;height:13px;position:absolute;background-color:#0f0;z-index:2">2</div>
54 <div id="handle6-3" style="top:0;left:0;height:13px;position:absolute;background-color:#00f;z-index:2">3</div>
55
56 <div id="span6-1" style="top:0;left:0;position:absolute;background-color:#000;width:20px;z-index:1;"> </div>
57 <div id="span6-2" style="top:0;left:0;position:absolute;background-color:#444;width:20px;z-index:1;"> </div>
58 </div>
59
60 <div id="track7" style="width:200px;background-color:#cbf;height:30px;position:relative;z-index:0;">
61 <div id="handle7-1" style="top:0;left:0;position:absolute;background-color:#f88;z-index:2">1</div>
62 <div id="handle7-2" style="top:0;left:0;position:absolute;background-color:#8f8;z-index:2">2</div>
63 <div id="handle7-3" style="top:0;left:0;position:absolute;background-color:#88f;z-index:2">3</div>
64
65 <div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div>
66 <div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div>
67
68 <div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:20px;z-index:1;"> </div>
69 <div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:20px;z-index:1;"> </div>
70 </div>
71
72
73 <div id="debug"> </div>
74
75 <!-- Log output -->
76 <div id="testlog"> </div>
77
78 <!-- Tests follow -->
79 <script type="text/javascript" language="javascript" charset="utf-8">
80 // <![CDATA[
81 var globalValue;
82
83 new Test.Unit.Runner({
84
85 testSliderBasics: function() { with(this) {
86 var slider = new Control.Slider('handle1', 'track1');
87 assertInstanceOf(Control.Slider, slider);
88 assertEqual(Prototype.Browser.IE ? 5 : 4, Event.observers.length);
89
90 assertEqual('horizontal', slider.axis);
91 assertEqual(false, slider.disabled);
92 assertEqual(0, slider.value);
93
94 slider.dispose();
95 }},
96
97 testSliderValues: function() { with(this) {
98 ['horizontal', 'vertical'].each( function(axis) {
99 var slider = new Control.Slider('handle2-'+axis, 'track2-'+axis, {values:[0.2,0.4,0.6,0.8,1],axis:axis});
100 assertEqual(axis, slider.axis);
101 assertEqual(0.2, slider.value);
102
103 slider.setValue(0.35);
104 assertEqual(0.4, slider.value);
105
106 slider.setValueBy(0.1);
107 assertEqual(0.6, slider.value);
108 slider.setValueBy(-0.6);
109 assertEqual(0.2, slider.value);
110
111 slider.setValue(1);
112 assertEqual(1, slider.value);
113
114 slider.setValue(-2);
115 assertEqual(0.2, slider.value);
116
117 slider.setValue(55555);
118 assertEqual(1, slider.value);
119
120 // leave active to be able to play around with the sliders
121 // slider.dispose();
122 });
123 assertEqual("90px", $('handle2-horizontal').style.left);
124 assertEqual("90px", $('handle2-vertical').style.top);
125 }},
126
127 testSliderInitialValues: function() { with(this) {
128 var slider = new Control.Slider('handle1', 'track1',{sliderValue:0.5});
129 assertEqual(0.5, slider.value);
130
131 var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
132 sliderValue:[50,145,170],
133 values:[50,150,160,170,180],
134 range:$R(50,180)
135 });
136 assertEqual(50, slider.value);
137 assertEqual(50, slider.values[0]);
138 assertEqual(150, slider.values[1]);
139 assertEqual(170, slider.values[2]);
140 slider.dispose();
141
142 var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
143 sliderValue:[50,145,170],
144 values:[50,150,160,170,180]
145 });
146 assertEqual(50, slider.value);
147 assertEqual(50, slider.values[0]);
148 assertEqual(150, slider.values[1]);
149 assertEqual(170, slider.values[2]);
150 slider.dispose();
151
152 var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
153 restricted:true,
154 sliderValue:[50,145,170],
155 values:[50,150,160,170,180]
156 });
157 assertEqual(50, slider.value);
158 assertEqual(50, slider.values[0]);
159 assertEqual(150, slider.values[1]);
160 assertEqual(170, slider.values[2]);
161 slider.dispose();
162 }},
163
164 testSliderOnChange: function() { with(this) {
165 var slider = new Control.Slider('handle1', 'track1', { onChange:function(v){ globalValue = v; } });
166 slider.setValue(1);
167 assert(1, globalValue);
168 assert(1, slider.value);
169
170 slider.setDisabled();
171 slider.setValue(0.5);
172 assert(1, globalValue);
173 assert(1, slider.value);
174
175 slider.setEnabled();
176 slider.setValue(0.2);
177 assert(0.2, globalValue);
178 assert(0.2, slider.value);
179
180 // s.event should be null if setValue is called from script
181 var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', {
182 onChange:function(v, s){ if(!s.event) globalValue = v; } });
183
184 slider.setValue(0.5,1);
185 assertEqual([0,0.5,0].inspect(), globalValue.inspect());
186 assert(!slider.event);
187
188 slider.dispose();
189 }},
190
191 testMultipleHandles: function() { with(this) {
192 var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', {range:$R(0,300)});
193 assertInstanceOf(Control.Slider, slider);
194
195 slider.setValue(20, 0);
196 slider.setValue(50, 1);
197 slider.setValue(70, 2);
198 assertEqual(20, slider.values[0]);
199 assertEqual(50, slider.values[1]);
200 assertEqual(70, slider.values[2]);
201 assertEqual("20px", slider.handles[0].style.left);
202 assertEqual("49px", slider.handles[1].style.left);
203 assertEqual("68px", slider.handles[2].style.left);
204
205 // should change last manipulated handled by -10,
206 // so check for handle with idx 2
207 slider.setValueBy(-10);
208 assertEqual(60, slider.values[2]);
209
210 slider.setValueBy(10, 0);
211 assertEqual(20, slider.values[0]);
212 slider.setValueBy(10, 1);
213 assertEqual(60, slider.values[1]);
214 slider.setValueBy(20, slider.activeHandleIdx);
215 assertEqual(80, slider.values[1]);
216 }},
217
218 testMultipleHandlesValues: function() { with(this) {
219 var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {values:[50,150,160,170,180],range:$R(50,180)});
220 assertInstanceOf(Control.Slider, slider);
221
222 slider.setValue(20, 0);
223 slider.setValue(150, 2);
224 slider.setValue(179, 1);
225
226 assertEqual(50, slider.values[0]);
227 assertEqual(150, slider.values[2]);
228 assertEqual(180, slider.values[1]);
229
230 assertEqual("0px", slider.handles[0].style.left);
231 assertEqual("225px", slider.handles[2].style.left);
232 assertEqual("293px", slider.handles[1].style.left);
233
234 assertEqual($R(50,150).inspect(), slider.getRange().inspect());
235 assertEqual(30, slider.getRange(1).end-slider.getRange(1).start);
236 }},
237
238 testMultipleHandlesSpans: function() { with(this) {
239 var slider = new Control.Slider(['handle5-1','handle5-2','handle5-3'], 'track5',
240 {spans:['span5-1','span5-2'],range:$R(0,300)});
241 assertInstanceOf(Control.Slider, slider);
242
243 slider.setValue(20, 0);
244 slider.setValue(100, 1);
245 slider.setValue(150, 2);
246
247 assertEqual("20px", $('span5-1').style.left);
248 assertEqual("78px", $('span5-1').style.width);
249 assertEqual("98px", $('span5-2').style.left);
250 assertEqual("49px", $('span5-2').style.width);
251
252 slider.setValue(30, 0);
253 slider.setValue(110, 1);
254 slider.setValue(90, 2);
255
256 assertEqual("29px", $('span5-1').style.left);
257 assertEqual("59px", $('span5-1').style.width);
258 assertEqual("88px", $('span5-2').style.left);
259 assertEqual("20px", $('span5-2').style.width);
260
261 slider.dispose();
262 }},
263
264 testMultipleHandlesSpansStartEnd: function() { with(this) {
265 var slider = new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
266 { spans:['span7-1','span7-2'],
267 startSpan:'span7-start',
268 endSpan:'span7-end',
269 range:$R(0,200) });
270 assertInstanceOf(Control.Slider, slider);
271
272 slider.setValue(20, 0);
273 slider.setValue(100, 1);
274 slider.setValue(150, 2);
275 assertEqual("0px", $('span7-start').style.left);
276 assertEqual("19px", $('span7-start').style.width);
277 assertEqual("145px", $('span7-end').style.left);
278 assertEqual("48px", $('span7-end').style.width);
279
280 slider.dispose();
281 }},
282
283 testSingleHandleSpansStartEnd: function() { with(this) {
284 var slider = new Control.Slider('handle7-1', 'track7',
285 { spans:['span7-1','span7-2'],
286 startSpan:'span7-start',
287 endSpan:'span7-end',
288 range:$R(0,200) });
289 assertInstanceOf(Control.Slider, slider);
290
291 slider.setValue(20, 0);
292 assertEqual("0px", $('span7-start').style.left);
293 assertEqual("19px", $('span7-start').style.width);
294 assertEqual("19px", $('span7-end').style.left);
295 assertEqual("174px", $('span7-end').style.width);
296
297 slider.dispose();
298 }},
299
300 testMultipleHandlesStyles: function() { with(this) {
301 var slider = new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
302 { spans:['span7-1','span7-2'],
303 startSpan:'span7-start',
304 endSpan:'span7-end',
305 range:$R(0,200) });
306 assertInstanceOf(Control.Slider, slider);
307 assert(Element.hasClassName('handle7-1','selected'));
308 assert(!Element.hasClassName('handle7-2','selected'));
309 assert(!Element.hasClassName('handle7-3','selected'));
310
311 slider.setValue(20, 0);
312 assert(Element.hasClassName('handle7-1','selected'));
313 assert(!Element.hasClassName('handle7-2','selected'));
314 assert(!Element.hasClassName('handle7-3','selected'));
315
316 slider.setValue(100, 1);
317 assert(!Element.hasClassName('handle7-1','selected'));
318 assert(Element.hasClassName('handle7-2','selected'));
319 assert(!Element.hasClassName('handle7-3','selected'));
320
321 slider.setValue(150, 2);
322 assert(!Element.hasClassName('handle7-1','selected'));
323 assert(!Element.hasClassName('handle7-2','selected'));
324 assert(Element.hasClassName('handle7-3','selected'));
325
326 slider.dispose();
327 }},
328
329 testMultipleHandlesSpansRestricted: function() { with(this) {
330 var slider = new Control.Slider(['handle5-1','handle5-2','handle5-3'], 'track5',
331 {restricted:true,spans:['span5-1','span5-2'],range:$R(0,300)});
332 assertInstanceOf(Control.Slider, slider);
333
334 slider.setValue(20, 0);
335 slider.setValue(100, 1);
336 slider.setValue(150, 2);
337 assertEqual(0, slider.values[0]);
338 assertEqual(0, slider.values[1]);
339 assertEqual(150, slider.values[2]);
340
341 slider.setValue(150, 2);
342 slider.setValue(100, 1);
343 slider.setValue(20, 0);
344 assertEqual(20, slider.values[0]);
345 assertEqual(100, slider.values[1]);
346 assertEqual(150, slider.values[2]);
347 assertEqual("20px", $('span5-1').style.left);
348 assertEqual("78px", $('span5-1').style.width);
349 assertEqual("98px", $('span5-2').style.left);
350 assertEqual("49px", $('span5-2').style.width);
351
352 slider.setValue(30, 0);
353 slider.setValue(110, 1);
354 slider.setValue(90, 2);
355 assertEqual(30, slider.values[0]);
356 assertEqual(110, slider.values[1]);
357 assertEqual(110, slider.values[2], '???');
358
359 assertEqual("29px", $('span5-1').style.left);
360 assertEqual("78px", $('span5-1').style.width);
361 assertEqual("107px", $('span5-2').style.left);
362 assertEqual("0px", $('span5-2').style.width);
363
364 slider.dispose();
365 }},
366
367 testMultipleHandlesSpansVertical: function() { with(this) {
368 var slider = new Control.Slider(['handle6-1','handle6-2','handle6-3'], 'track6', {axis:'vertical',spans:['span6-1','span6-2'],range:$R(0,100)});
369 assertInstanceOf(Control.Slider, slider);
370
371 slider.setValue(20, 0);
372 slider.setValue(80, 1);
373 slider.setValue(90, 2);
374
375 assertEqual("17px", $('span6-1').style.top);
376 assertEqual("52px", $('span6-1').style.height);
377 assertEqual("70px", $('span6-2').style.top);
378 assertEqual("9px", $('span6-2').style.height);
379
380 slider.setValue(30, 0);
381 slider.setValue(20, 1);
382 slider.setValue(95, 2);
383
384 assertEqual("17px", $('span6-1').style.top);
385 assertEqual("9px", $('span6-1').style.height);
386 assertEqual("26px", $('span6-2').style.top);
387 assertEqual("57px", $('span6-2').style.height);
388 }},
389
390 testRange: function() { with(this) {
391 var slider = new Control.Slider('handle1','track1');
392 assertEqual(0, slider.value);
393 slider.setValue(1);
394 assertEqual("185px", $('handle1').style.left);
395 slider.dispose();
396
397 var slider = new Control.Slider('handle1','track1',{range:$R(10,20)});
398 assertEqual(10, slider.value);
399 assertEqual("0px", $('handle1').style.left);
400 slider.setValue(15);
401 assertEqual("93px", $('handle1').style.left);
402 slider.setValue(20);
403 assertEqual("185px", $('handle1').style.left);
404 slider.dispose();
405 }},
406
407 // test for #3732
408 testRangeValues: function() { with(this) {
409 // test for non-zero starting range
410 var slider = new Control.Slider('handle1','track1',{
411 range:$R(1,3), values:[1,2,3]
412 });
413 assertEqual(1, slider.value);
414 assertEqual("0px", $('handle1').style.left);
415 slider.setValue(2);
416 assertEqual("93px", $('handle1').style.left);
417 slider.setValue(3);
418 assertEqual("185px", $('handle1').style.left);
419 slider.dispose();
420
421 // test zero-starting range
422 var slider = new Control.Slider('handle1','track1',{
423 range:$R(0,2), values:[0,1,2]
424 });
425 assertEqual(0, slider.value);
426 assertEqual("0px", $('handle1').style.left);
427 slider.setValue(1);
428 assertEqual("93px", $('handle1').style.left);
429 slider.setValue(2);
430 assertEqual("185px", $('handle1').style.left);
431 slider.dispose();
432 }}
433
434 }, "testlog");
435 // ]]>
436 </script>
437 </body>
438 </html>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial