slider_test.html (17014B)
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>