1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/tests/mochitest/ajax/scriptaculous/test/unit/slider_test.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,438 @@
1.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
1.5 + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.6 +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
1.7 +<head>
1.8 + <title>script.aculo.us Unit test file</title>
1.9 + <meta http-equiv="content-type" content="text/html; charset=utf-8" />
1.10 + <script src="../../lib/prototype.js" type="text/javascript"></script>
1.11 + <script src="../../src/scriptaculous.js" type="text/javascript"></script>
1.12 + <script src="../../src/unittest.js" type="text/javascript"></script>
1.13 + <link rel="stylesheet" href="../test.css" type="text/css" />
1.14 +</head>
1.15 +<body>
1.16 +<h1>script.aculo.us Unit test file</h1>
1.17 +<p>
1.18 + Tests for slider.js
1.19 +</p>
1.20 +
1.21 +<div id="track1" style="width:200px;background-color:#aaa;height:5px;">
1.22 + <div id="handle1" style="width:15px;height:25px;background-color:#f00;"> </div>
1.23 +</div>
1.24 +
1.25 +<div id="track2-vertical" style="height:100px;background-color:#aaa;width:5px;">
1.26 + <div id="handle2-vertical" style="width:25px;height:10px;background-color:#f00;"> </div>
1.27 +</div>
1.28 +
1.29 +<div id="track2-horizontal" style="height:5px;background-color:#aaa;width:100px;">
1.30 + <div id="handle2-horizontal" style="width:10px;height:25px;background-color:#f00;"> </div>
1.31 +</div>
1.32 +
1.33 +<div id="track3" style="width:300px;background-color:#cfb;height:30px;">
1.34 + <span id="handle3-1">1</span>
1.35 + <span id="handle3-2">2</span>
1.36 + <span id="handle3-3">3</span>
1.37 +</div>
1.38 +
1.39 +<div id="track4" style="width:300px;position:relative;background-color:#cbf;height:30px;">
1.40 + <span id="handle4-1" style="top:0;left:0;position:absolute;background-color:#f00;">1</span>
1.41 + <span id="handle4-2" style="top:0;left:0;position:absolute;background-color:#0f0;">2</span>
1.42 + <span id="handle4-3" style="top:0;left:0;position:absolute;background-color:#00f;">3</span>
1.43 +</div>
1.44 +
1.45 +<div id="track5" style="width:300px;background-color:#cbf;height:30px;position:relative;z-index:0;">
1.46 + <div id="handle5-1" style="top:0;left:0;position:absolute;background-color:#f00;z-index:2">1</div>
1.47 + <div id="handle5-2" style="top:0;left:0;position:absolute;background-color:#0f0;z-index:2">2</div>
1.48 + <div id="handle5-3" style="top:0;left:0;position:absolute;background-color:#00f;z-index:2">3</div>
1.49 +
1.50 + <div id="span5-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div>
1.51 + <div id="span5-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div>
1.52 +</div>
1.53 +
1.54 +<div id="track6" style="width:20px;background-color:#cbf;height:100px;position:relative;z-index:0;">
1.55 + <div id="handle6-1" style="top:0;left:0;height:13px;position:absolute;background-color:#f00;z-index:2">1</div>
1.56 + <div id="handle6-2" style="top:0;left:0;height:13px;position:absolute;background-color:#0f0;z-index:2">2</div>
1.57 + <div id="handle6-3" style="top:0;left:0;height:13px;position:absolute;background-color:#00f;z-index:2">3</div>
1.58 +
1.59 + <div id="span6-1" style="top:0;left:0;position:absolute;background-color:#000;width:20px;z-index:1;"> </div>
1.60 + <div id="span6-2" style="top:0;left:0;position:absolute;background-color:#444;width:20px;z-index:1;"> </div>
1.61 +</div>
1.62 +
1.63 +<div id="track7" style="width:200px;background-color:#cbf;height:30px;position:relative;z-index:0;">
1.64 + <div id="handle7-1" style="top:0;left:0;position:absolute;background-color:#f88;z-index:2">1</div>
1.65 + <div id="handle7-2" style="top:0;left:0;position:absolute;background-color:#8f8;z-index:2">2</div>
1.66 + <div id="handle7-3" style="top:0;left:0;position:absolute;background-color:#88f;z-index:2">3</div>
1.67 +
1.68 + <div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div>
1.69 + <div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div>
1.70 +
1.71 + <div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:20px;z-index:1;"> </div>
1.72 + <div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:20px;z-index:1;"> </div>
1.73 +</div>
1.74 +
1.75 +
1.76 +<div id="debug"> </div>
1.77 +
1.78 +<!-- Log output -->
1.79 +<div id="testlog"> </div>
1.80 +
1.81 +<!-- Tests follow -->
1.82 +<script type="text/javascript" language="javascript" charset="utf-8">
1.83 +// <![CDATA[
1.84 + var globalValue;
1.85 +
1.86 + new Test.Unit.Runner({
1.87 +
1.88 + testSliderBasics: function() { with(this) {
1.89 + var slider = new Control.Slider('handle1', 'track1');
1.90 + assertInstanceOf(Control.Slider, slider);
1.91 + assertEqual(Prototype.Browser.IE ? 5 : 4, Event.observers.length);
1.92 +
1.93 + assertEqual('horizontal', slider.axis);
1.94 + assertEqual(false, slider.disabled);
1.95 + assertEqual(0, slider.value);
1.96 +
1.97 + slider.dispose();
1.98 + }},
1.99 +
1.100 + testSliderValues: function() { with(this) {
1.101 + ['horizontal', 'vertical'].each( function(axis) {
1.102 + var slider = new Control.Slider('handle2-'+axis, 'track2-'+axis, {values:[0.2,0.4,0.6,0.8,1],axis:axis});
1.103 + assertEqual(axis, slider.axis);
1.104 + assertEqual(0.2, slider.value);
1.105 +
1.106 + slider.setValue(0.35);
1.107 + assertEqual(0.4, slider.value);
1.108 +
1.109 + slider.setValueBy(0.1);
1.110 + assertEqual(0.6, slider.value);
1.111 + slider.setValueBy(-0.6);
1.112 + assertEqual(0.2, slider.value);
1.113 +
1.114 + slider.setValue(1);
1.115 + assertEqual(1, slider.value);
1.116 +
1.117 + slider.setValue(-2);
1.118 + assertEqual(0.2, slider.value);
1.119 +
1.120 + slider.setValue(55555);
1.121 + assertEqual(1, slider.value);
1.122 +
1.123 + // leave active to be able to play around with the sliders
1.124 + // slider.dispose();
1.125 + });
1.126 + assertEqual("90px", $('handle2-horizontal').style.left);
1.127 + assertEqual("90px", $('handle2-vertical').style.top);
1.128 + }},
1.129 +
1.130 + testSliderInitialValues: function() { with(this) {
1.131 + var slider = new Control.Slider('handle1', 'track1',{sliderValue:0.5});
1.132 + assertEqual(0.5, slider.value);
1.133 +
1.134 + var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
1.135 + sliderValue:[50,145,170],
1.136 + values:[50,150,160,170,180],
1.137 + range:$R(50,180)
1.138 + });
1.139 + assertEqual(50, slider.value);
1.140 + assertEqual(50, slider.values[0]);
1.141 + assertEqual(150, slider.values[1]);
1.142 + assertEqual(170, slider.values[2]);
1.143 + slider.dispose();
1.144 +
1.145 + var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
1.146 + sliderValue:[50,145,170],
1.147 + values:[50,150,160,170,180]
1.148 + });
1.149 + assertEqual(50, slider.value);
1.150 + assertEqual(50, slider.values[0]);
1.151 + assertEqual(150, slider.values[1]);
1.152 + assertEqual(170, slider.values[2]);
1.153 + slider.dispose();
1.154 +
1.155 + var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
1.156 + restricted:true,
1.157 + sliderValue:[50,145,170],
1.158 + values:[50,150,160,170,180]
1.159 + });
1.160 + assertEqual(50, slider.value);
1.161 + assertEqual(50, slider.values[0]);
1.162 + assertEqual(150, slider.values[1]);
1.163 + assertEqual(170, slider.values[2]);
1.164 + slider.dispose();
1.165 + }},
1.166 +
1.167 + testSliderOnChange: function() { with(this) {
1.168 + var slider = new Control.Slider('handle1', 'track1', { onChange:function(v){ globalValue = v; } });
1.169 + slider.setValue(1);
1.170 + assert(1, globalValue);
1.171 + assert(1, slider.value);
1.172 +
1.173 + slider.setDisabled();
1.174 + slider.setValue(0.5);
1.175 + assert(1, globalValue);
1.176 + assert(1, slider.value);
1.177 +
1.178 + slider.setEnabled();
1.179 + slider.setValue(0.2);
1.180 + assert(0.2, globalValue);
1.181 + assert(0.2, slider.value);
1.182 +
1.183 + // s.event should be null if setValue is called from script
1.184 + var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', {
1.185 + onChange:function(v, s){ if(!s.event) globalValue = v; } });
1.186 +
1.187 + slider.setValue(0.5,1);
1.188 + assertEqual([0,0.5,0].inspect(), globalValue.inspect());
1.189 + assert(!slider.event);
1.190 +
1.191 + slider.dispose();
1.192 + }},
1.193 +
1.194 + testMultipleHandles: function() { with(this) {
1.195 + var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', {range:$R(0,300)});
1.196 + assertInstanceOf(Control.Slider, slider);
1.197 +
1.198 + slider.setValue(20, 0);
1.199 + slider.setValue(50, 1);
1.200 + slider.setValue(70, 2);
1.201 + assertEqual(20, slider.values[0]);
1.202 + assertEqual(50, slider.values[1]);
1.203 + assertEqual(70, slider.values[2]);
1.204 + assertEqual("20px", slider.handles[0].style.left);
1.205 + assertEqual("49px", slider.handles[1].style.left);
1.206 + assertEqual("68px", slider.handles[2].style.left);
1.207 +
1.208 + // should change last manipulated handled by -10,
1.209 + // so check for handle with idx 2
1.210 + slider.setValueBy(-10);
1.211 + assertEqual(60, slider.values[2]);
1.212 +
1.213 + slider.setValueBy(10, 0);
1.214 + assertEqual(20, slider.values[0]);
1.215 + slider.setValueBy(10, 1);
1.216 + assertEqual(60, slider.values[1]);
1.217 + slider.setValueBy(20, slider.activeHandleIdx);
1.218 + assertEqual(80, slider.values[1]);
1.219 + }},
1.220 +
1.221 + testMultipleHandlesValues: function() { with(this) {
1.222 + var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {values:[50,150,160,170,180],range:$R(50,180)});
1.223 + assertInstanceOf(Control.Slider, slider);
1.224 +
1.225 + slider.setValue(20, 0);
1.226 + slider.setValue(150, 2);
1.227 + slider.setValue(179, 1);
1.228 +
1.229 + assertEqual(50, slider.values[0]);
1.230 + assertEqual(150, slider.values[2]);
1.231 + assertEqual(180, slider.values[1]);
1.232 +
1.233 + assertEqual("0px", slider.handles[0].style.left);
1.234 + assertEqual("225px", slider.handles[2].style.left);
1.235 + assertEqual("293px", slider.handles[1].style.left);
1.236 +
1.237 + assertEqual($R(50,150).inspect(), slider.getRange().inspect());
1.238 + assertEqual(30, slider.getRange(1).end-slider.getRange(1).start);
1.239 + }},
1.240 +
1.241 + testMultipleHandlesSpans: function() { with(this) {
1.242 + var slider = new Control.Slider(['handle5-1','handle5-2','handle5-3'], 'track5',
1.243 + {spans:['span5-1','span5-2'],range:$R(0,300)});
1.244 + assertInstanceOf(Control.Slider, slider);
1.245 +
1.246 + slider.setValue(20, 0);
1.247 + slider.setValue(100, 1);
1.248 + slider.setValue(150, 2);
1.249 +
1.250 + assertEqual("20px", $('span5-1').style.left);
1.251 + assertEqual("78px", $('span5-1').style.width);
1.252 + assertEqual("98px", $('span5-2').style.left);
1.253 + assertEqual("49px", $('span5-2').style.width);
1.254 +
1.255 + slider.setValue(30, 0);
1.256 + slider.setValue(110, 1);
1.257 + slider.setValue(90, 2);
1.258 +
1.259 + assertEqual("29px", $('span5-1').style.left);
1.260 + assertEqual("59px", $('span5-1').style.width);
1.261 + assertEqual("88px", $('span5-2').style.left);
1.262 + assertEqual("20px", $('span5-2').style.width);
1.263 +
1.264 + slider.dispose();
1.265 + }},
1.266 +
1.267 + testMultipleHandlesSpansStartEnd: function() { with(this) {
1.268 + var slider = new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
1.269 + { spans:['span7-1','span7-2'],
1.270 + startSpan:'span7-start',
1.271 + endSpan:'span7-end',
1.272 + range:$R(0,200) });
1.273 + assertInstanceOf(Control.Slider, slider);
1.274 +
1.275 + slider.setValue(20, 0);
1.276 + slider.setValue(100, 1);
1.277 + slider.setValue(150, 2);
1.278 + assertEqual("0px", $('span7-start').style.left);
1.279 + assertEqual("19px", $('span7-start').style.width);
1.280 + assertEqual("145px", $('span7-end').style.left);
1.281 + assertEqual("48px", $('span7-end').style.width);
1.282 +
1.283 + slider.dispose();
1.284 + }},
1.285 +
1.286 + testSingleHandleSpansStartEnd: function() { with(this) {
1.287 + var slider = new Control.Slider('handle7-1', 'track7',
1.288 + { spans:['span7-1','span7-2'],
1.289 + startSpan:'span7-start',
1.290 + endSpan:'span7-end',
1.291 + range:$R(0,200) });
1.292 + assertInstanceOf(Control.Slider, slider);
1.293 +
1.294 + slider.setValue(20, 0);
1.295 + assertEqual("0px", $('span7-start').style.left);
1.296 + assertEqual("19px", $('span7-start').style.width);
1.297 + assertEqual("19px", $('span7-end').style.left);
1.298 + assertEqual("174px", $('span7-end').style.width);
1.299 +
1.300 + slider.dispose();
1.301 + }},
1.302 +
1.303 + testMultipleHandlesStyles: function() { with(this) {
1.304 + var slider = new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
1.305 + { spans:['span7-1','span7-2'],
1.306 + startSpan:'span7-start',
1.307 + endSpan:'span7-end',
1.308 + range:$R(0,200) });
1.309 + assertInstanceOf(Control.Slider, slider);
1.310 + assert(Element.hasClassName('handle7-1','selected'));
1.311 + assert(!Element.hasClassName('handle7-2','selected'));
1.312 + assert(!Element.hasClassName('handle7-3','selected'));
1.313 +
1.314 + slider.setValue(20, 0);
1.315 + assert(Element.hasClassName('handle7-1','selected'));
1.316 + assert(!Element.hasClassName('handle7-2','selected'));
1.317 + assert(!Element.hasClassName('handle7-3','selected'));
1.318 +
1.319 + slider.setValue(100, 1);
1.320 + assert(!Element.hasClassName('handle7-1','selected'));
1.321 + assert(Element.hasClassName('handle7-2','selected'));
1.322 + assert(!Element.hasClassName('handle7-3','selected'));
1.323 +
1.324 + slider.setValue(150, 2);
1.325 + assert(!Element.hasClassName('handle7-1','selected'));
1.326 + assert(!Element.hasClassName('handle7-2','selected'));
1.327 + assert(Element.hasClassName('handle7-3','selected'));
1.328 +
1.329 + slider.dispose();
1.330 + }},
1.331 +
1.332 + testMultipleHandlesSpansRestricted: function() { with(this) {
1.333 + var slider = new Control.Slider(['handle5-1','handle5-2','handle5-3'], 'track5',
1.334 + {restricted:true,spans:['span5-1','span5-2'],range:$R(0,300)});
1.335 + assertInstanceOf(Control.Slider, slider);
1.336 +
1.337 + slider.setValue(20, 0);
1.338 + slider.setValue(100, 1);
1.339 + slider.setValue(150, 2);
1.340 + assertEqual(0, slider.values[0]);
1.341 + assertEqual(0, slider.values[1]);
1.342 + assertEqual(150, slider.values[2]);
1.343 +
1.344 + slider.setValue(150, 2);
1.345 + slider.setValue(100, 1);
1.346 + slider.setValue(20, 0);
1.347 + assertEqual(20, slider.values[0]);
1.348 + assertEqual(100, slider.values[1]);
1.349 + assertEqual(150, slider.values[2]);
1.350 + assertEqual("20px", $('span5-1').style.left);
1.351 + assertEqual("78px", $('span5-1').style.width);
1.352 + assertEqual("98px", $('span5-2').style.left);
1.353 + assertEqual("49px", $('span5-2').style.width);
1.354 +
1.355 + slider.setValue(30, 0);
1.356 + slider.setValue(110, 1);
1.357 + slider.setValue(90, 2);
1.358 + assertEqual(30, slider.values[0]);
1.359 + assertEqual(110, slider.values[1]);
1.360 + assertEqual(110, slider.values[2], '???');
1.361 +
1.362 + assertEqual("29px", $('span5-1').style.left);
1.363 + assertEqual("78px", $('span5-1').style.width);
1.364 + assertEqual("107px", $('span5-2').style.left);
1.365 + assertEqual("0px", $('span5-2').style.width);
1.366 +
1.367 + slider.dispose();
1.368 + }},
1.369 +
1.370 + testMultipleHandlesSpansVertical: function() { with(this) {
1.371 + var slider = new Control.Slider(['handle6-1','handle6-2','handle6-3'], 'track6', {axis:'vertical',spans:['span6-1','span6-2'],range:$R(0,100)});
1.372 + assertInstanceOf(Control.Slider, slider);
1.373 +
1.374 + slider.setValue(20, 0);
1.375 + slider.setValue(80, 1);
1.376 + slider.setValue(90, 2);
1.377 +
1.378 + assertEqual("17px", $('span6-1').style.top);
1.379 + assertEqual("52px", $('span6-1').style.height);
1.380 + assertEqual("70px", $('span6-2').style.top);
1.381 + assertEqual("9px", $('span6-2').style.height);
1.382 +
1.383 + slider.setValue(30, 0);
1.384 + slider.setValue(20, 1);
1.385 + slider.setValue(95, 2);
1.386 +
1.387 + assertEqual("17px", $('span6-1').style.top);
1.388 + assertEqual("9px", $('span6-1').style.height);
1.389 + assertEqual("26px", $('span6-2').style.top);
1.390 + assertEqual("57px", $('span6-2').style.height);
1.391 + }},
1.392 +
1.393 + testRange: function() { with(this) {
1.394 + var slider = new Control.Slider('handle1','track1');
1.395 + assertEqual(0, slider.value);
1.396 + slider.setValue(1);
1.397 + assertEqual("185px", $('handle1').style.left);
1.398 + slider.dispose();
1.399 +
1.400 + var slider = new Control.Slider('handle1','track1',{range:$R(10,20)});
1.401 + assertEqual(10, slider.value);
1.402 + assertEqual("0px", $('handle1').style.left);
1.403 + slider.setValue(15);
1.404 + assertEqual("93px", $('handle1').style.left);
1.405 + slider.setValue(20);
1.406 + assertEqual("185px", $('handle1').style.left);
1.407 + slider.dispose();
1.408 + }},
1.409 +
1.410 + // test for #3732
1.411 + testRangeValues: function() { with(this) {
1.412 + // test for non-zero starting range
1.413 + var slider = new Control.Slider('handle1','track1',{
1.414 + range:$R(1,3), values:[1,2,3]
1.415 + });
1.416 + assertEqual(1, slider.value);
1.417 + assertEqual("0px", $('handle1').style.left);
1.418 + slider.setValue(2);
1.419 + assertEqual("93px", $('handle1').style.left);
1.420 + slider.setValue(3);
1.421 + assertEqual("185px", $('handle1').style.left);
1.422 + slider.dispose();
1.423 +
1.424 + // test zero-starting range
1.425 + var slider = new Control.Slider('handle1','track1',{
1.426 + range:$R(0,2), values:[0,1,2]
1.427 + });
1.428 + assertEqual(0, slider.value);
1.429 + assertEqual("0px", $('handle1').style.left);
1.430 + slider.setValue(1);
1.431 + assertEqual("93px", $('handle1').style.left);
1.432 + slider.setValue(2);
1.433 + assertEqual("185px", $('handle1').style.left);
1.434 + slider.dispose();
1.435 + }}
1.436 +
1.437 + }, "testlog");
1.438 +// ]]>
1.439 +</script>
1.440 +</body>
1.441 +</html>
1.442 \ No newline at end of file
