diff options
Diffstat (limited to 'dom/tests/mochitest/ajax/scriptaculous/test/unit/slider_test.html')
| -rw-r--r-- | dom/tests/mochitest/ajax/scriptaculous/test/unit/slider_test.html | 438 |
1 files changed, 438 insertions, 0 deletions
diff --git a/dom/tests/mochitest/ajax/scriptaculous/test/unit/slider_test.html b/dom/tests/mochitest/ajax/scriptaculous/test/unit/slider_test.html new file mode 100644 index 0000000000..018b45d078 --- /dev/null +++ b/dom/tests/mochitest/ajax/scriptaculous/test/unit/slider_test.html @@ -0,0 +1,438 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> +<head> + <title>script.aculo.us Unit test file</title> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <script src="../../lib/prototype.js" type="text/javascript"></script> + <script src="../../src/scriptaculous.js" type="text/javascript"></script> + <script src="../../src/unittest.js" type="text/javascript"></script> + <link rel="stylesheet" href="../test.css" type="text/css" /> +</head> +<body> +<h1>script.aculo.us Unit test file</h1> +<p> + Tests for slider.js +</p> + +<div id="track1" style="width:200px;background-color:#aaa;height:5px;"> + <div id="handle1" style="width:15px;height:25px;background-color:#f00;"> </div> +</div> + +<div id="track2-vertical" style="height:100px;background-color:#aaa;width:5px;"> + <div id="handle2-vertical" style="width:25px;height:10px;background-color:#f00;"> </div> +</div> + +<div id="track2-horizontal" style="height:5px;background-color:#aaa;width:100px;"> + <div id="handle2-horizontal" style="width:10px;height:25px;background-color:#f00;"> </div> +</div> + +<div id="track3" style="width:300px;background-color:#cfb;height:30px;"> + <span id="handle3-1">1</span> + <span id="handle3-2">2</span> + <span id="handle3-3">3</span> +</div> + +<div id="track4" style="width:300px;position:relative;background-color:#cbf;height:30px;"> + <span id="handle4-1" style="top:0;left:0;position:absolute;background-color:#f00;">1</span> + <span id="handle4-2" style="top:0;left:0;position:absolute;background-color:#0f0;">2</span> + <span id="handle4-3" style="top:0;left:0;position:absolute;background-color:#00f;">3</span> +</div> + +<div id="track5" style="width:300px;background-color:#cbf;height:30px;position:relative;z-index:0;"> + <div id="handle5-1" style="top:0;left:0;position:absolute;background-color:#f00;z-index:2">1</div> + <div id="handle5-2" style="top:0;left:0;position:absolute;background-color:#0f0;z-index:2">2</div> + <div id="handle5-3" style="top:0;left:0;position:absolute;background-color:#00f;z-index:2">3</div> + + <div id="span5-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div> + <div id="span5-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div> +</div> + +<div id="track6" style="width:20px;background-color:#cbf;height:100px;position:relative;z-index:0;"> + <div id="handle6-1" style="top:0;left:0;height:13px;position:absolute;background-color:#f00;z-index:2">1</div> + <div id="handle6-2" style="top:0;left:0;height:13px;position:absolute;background-color:#0f0;z-index:2">2</div> + <div id="handle6-3" style="top:0;left:0;height:13px;position:absolute;background-color:#00f;z-index:2">3</div> + + <div id="span6-1" style="top:0;left:0;position:absolute;background-color:#000;width:20px;z-index:1;"> </div> + <div id="span6-2" style="top:0;left:0;position:absolute;background-color:#444;width:20px;z-index:1;"> </div> +</div> + +<div id="track7" style="width:200px;background-color:#cbf;height:30px;position:relative;z-index:0;"> + <div id="handle7-1" style="top:0;left:0;position:absolute;background-color:#f88;z-index:2">1</div> + <div id="handle7-2" style="top:0;left:0;position:absolute;background-color:#8f8;z-index:2">2</div> + <div id="handle7-3" style="top:0;left:0;position:absolute;background-color:#88f;z-index:2">3</div> + + <div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div> + <div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div> + + <div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:20px;z-index:1;"> </div> + <div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:20px;z-index:1;"> </div> +</div> + + +<div id="debug"> </div> + +<!-- Log output --> +<div id="testlog"> </div> + +<!-- Tests follow --> +<script type="text/javascript" language="javascript" charset="utf-8"> +// <![CDATA[ + var globalValue; + + new Test.Unit.Runner({ + + testSliderBasics: function() { with(this) { + var slider = new Control.Slider('handle1', 'track1'); + assertInstanceOf(Control.Slider, slider); + assertEqual(Prototype.Browser.IE ? 5 : 4, Event.observers.length); + + assertEqual('horizontal', slider.axis); + assertEqual(false, slider.disabled); + assertEqual(0, slider.value); + + slider.dispose(); + }}, + + testSliderValues: function() { with(this) { + ['horizontal', 'vertical'].each( function(axis) { + var slider = new Control.Slider('handle2-'+axis, 'track2-'+axis, {values:[0.2,0.4,0.6,0.8,1],axis:axis}); + assertEqual(axis, slider.axis); + assertEqual(0.2, slider.value); + + slider.setValue(0.35); + assertEqual(0.4, slider.value); + + slider.setValueBy(0.1); + assertEqual(0.6, slider.value); + slider.setValueBy(-0.6); + assertEqual(0.2, slider.value); + + slider.setValue(1); + assertEqual(1, slider.value); + + slider.setValue(-2); + assertEqual(0.2, slider.value); + + slider.setValue(55555); + assertEqual(1, slider.value); + + // leave active to be able to play around with the sliders + // slider.dispose(); + }); + assertEqual("90px", $('handle2-horizontal').style.left); + assertEqual("90px", $('handle2-vertical').style.top); + }}, + + testSliderInitialValues: function() { with(this) { + var slider = new Control.Slider('handle1', 'track1',{sliderValue:0.5}); + assertEqual(0.5, slider.value); + + var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', { + sliderValue:[50,145,170], + values:[50,150,160,170,180], + range:$R(50,180) + }); + assertEqual(50, slider.value); + assertEqual(50, slider.values[0]); + assertEqual(150, slider.values[1]); + assertEqual(170, slider.values[2]); + slider.dispose(); + + var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', { + sliderValue:[50,145,170], + values:[50,150,160,170,180] + }); + assertEqual(50, slider.value); + assertEqual(50, slider.values[0]); + assertEqual(150, slider.values[1]); + assertEqual(170, slider.values[2]); + slider.dispose(); + + var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', { + restricted:true, + sliderValue:[50,145,170], + values:[50,150,160,170,180] + }); + assertEqual(50, slider.value); + assertEqual(50, slider.values[0]); + assertEqual(150, slider.values[1]); + assertEqual(170, slider.values[2]); + slider.dispose(); + }}, + + testSliderOnChange: function() { with(this) { + var slider = new Control.Slider('handle1', 'track1', { onChange:function(v){ globalValue = v; } }); + slider.setValue(1); + assert(1, globalValue); + assert(1, slider.value); + + slider.setDisabled(); + slider.setValue(0.5); + assert(1, globalValue); + assert(1, slider.value); + + slider.setEnabled(); + slider.setValue(0.2); + assert(0.2, globalValue); + assert(0.2, slider.value); + + // s.event should be null if setValue is called from script + var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', { + onChange:function(v, s){ if(!s.event) globalValue = v; } }); + + slider.setValue(0.5,1); + assertEqual([0,0.5,0].inspect(), globalValue.inspect()); + assert(!slider.event); + + slider.dispose(); + }}, + + testMultipleHandles: function() { with(this) { + var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', {range:$R(0,300)}); + assertInstanceOf(Control.Slider, slider); + + slider.setValue(20, 0); + slider.setValue(50, 1); + slider.setValue(70, 2); + assertEqual(20, slider.values[0]); + assertEqual(50, slider.values[1]); + assertEqual(70, slider.values[2]); + assertEqual("20px", slider.handles[0].style.left); + assertEqual("49px", slider.handles[1].style.left); + assertEqual("68px", slider.handles[2].style.left); + + // should change last manipulated handled by -10, + // so check for handle with idx 2 + slider.setValueBy(-10); + assertEqual(60, slider.values[2]); + + slider.setValueBy(10, 0); + assertEqual(20, slider.values[0]); + slider.setValueBy(10, 1); + assertEqual(60, slider.values[1]); + slider.setValueBy(20, slider.activeHandleIdx); + assertEqual(80, slider.values[1]); + }}, + + testMultipleHandlesValues: function() { with(this) { + var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {values:[50,150,160,170,180],range:$R(50,180)}); + assertInstanceOf(Control.Slider, slider); + + slider.setValue(20, 0); + slider.setValue(150, 2); + slider.setValue(179, 1); + + assertEqual(50, slider.values[0]); + assertEqual(150, slider.values[2]); + assertEqual(180, slider.values[1]); + + assertEqual("0px", slider.handles[0].style.left); + assertEqual("225px", slider.handles[2].style.left); + assertEqual("293px", slider.handles[1].style.left); + + assertEqual($R(50,150).inspect(), slider.getRange().inspect()); + assertEqual(30, slider.getRange(1).end-slider.getRange(1).start); + }}, + + testMultipleHandlesSpans: function() { with(this) { + var slider = new Control.Slider(['handle5-1','handle5-2','handle5-3'], 'track5', + {spans:['span5-1','span5-2'],range:$R(0,300)}); + assertInstanceOf(Control.Slider, slider); + + slider.setValue(20, 0); + slider.setValue(100, 1); + slider.setValue(150, 2); + + assertEqual("20px", $('span5-1').style.left); + assertEqual("78px", $('span5-1').style.width); + assertEqual("98px", $('span5-2').style.left); + assertEqual("49px", $('span5-2').style.width); + + slider.setValue(30, 0); + slider.setValue(110, 1); + slider.setValue(90, 2); + + assertEqual("29px", $('span5-1').style.left); + assertEqual("59px", $('span5-1').style.width); + assertEqual("88px", $('span5-2').style.left); + assertEqual("20px", $('span5-2').style.width); + + slider.dispose(); + }}, + + testMultipleHandlesSpansStartEnd: function() { with(this) { + var slider = new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7', + { spans:['span7-1','span7-2'], + startSpan:'span7-start', + endSpan:'span7-end', + range:$R(0,200) }); + assertInstanceOf(Control.Slider, slider); + + slider.setValue(20, 0); + slider.setValue(100, 1); + slider.setValue(150, 2); + assertEqual("0px", $('span7-start').style.left); + assertEqual("19px", $('span7-start').style.width); + assertEqual("145px", $('span7-end').style.left); + assertEqual("48px", $('span7-end').style.width); + + slider.dispose(); + }}, + + testSingleHandleSpansStartEnd: function() { with(this) { + var slider = new Control.Slider('handle7-1', 'track7', + { spans:['span7-1','span7-2'], + startSpan:'span7-start', + endSpan:'span7-end', + range:$R(0,200) }); + assertInstanceOf(Control.Slider, slider); + + slider.setValue(20, 0); + assertEqual("0px", $('span7-start').style.left); + assertEqual("19px", $('span7-start').style.width); + assertEqual("19px", $('span7-end').style.left); + assertEqual("174px", $('span7-end').style.width); + + slider.dispose(); + }}, + + testMultipleHandlesStyles: function() { with(this) { + var slider = new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7', + { spans:['span7-1','span7-2'], + startSpan:'span7-start', + endSpan:'span7-end', + range:$R(0,200) }); + assertInstanceOf(Control.Slider, slider); + assert(Element.hasClassName('handle7-1','selected')); + assert(!Element.hasClassName('handle7-2','selected')); + assert(!Element.hasClassName('handle7-3','selected')); + + slider.setValue(20, 0); + assert(Element.hasClassName('handle7-1','selected')); + assert(!Element.hasClassName('handle7-2','selected')); + assert(!Element.hasClassName('handle7-3','selected')); + + slider.setValue(100, 1); + assert(!Element.hasClassName('handle7-1','selected')); + assert(Element.hasClassName('handle7-2','selected')); + assert(!Element.hasClassName('handle7-3','selected')); + + slider.setValue(150, 2); + assert(!Element.hasClassName('handle7-1','selected')); + assert(!Element.hasClassName('handle7-2','selected')); + assert(Element.hasClassName('handle7-3','selected')); + + slider.dispose(); + }}, + + testMultipleHandlesSpansRestricted: function() { with(this) { + var slider = new Control.Slider(['handle5-1','handle5-2','handle5-3'], 'track5', + {restricted:true,spans:['span5-1','span5-2'],range:$R(0,300)}); + assertInstanceOf(Control.Slider, slider); + + slider.setValue(20, 0); + slider.setValue(100, 1); + slider.setValue(150, 2); + assertEqual(0, slider.values[0]); + assertEqual(0, slider.values[1]); + assertEqual(150, slider.values[2]); + + slider.setValue(150, 2); + slider.setValue(100, 1); + slider.setValue(20, 0); + assertEqual(20, slider.values[0]); + assertEqual(100, slider.values[1]); + assertEqual(150, slider.values[2]); + assertEqual("20px", $('span5-1').style.left); + assertEqual("78px", $('span5-1').style.width); + assertEqual("98px", $('span5-2').style.left); + assertEqual("49px", $('span5-2').style.width); + + slider.setValue(30, 0); + slider.setValue(110, 1); + slider.setValue(90, 2); + assertEqual(30, slider.values[0]); + assertEqual(110, slider.values[1]); + assertEqual(110, slider.values[2], '???'); + + assertEqual("29px", $('span5-1').style.left); + assertEqual("78px", $('span5-1').style.width); + assertEqual("107px", $('span5-2').style.left); + assertEqual("0px", $('span5-2').style.width); + + slider.dispose(); + }}, + + testMultipleHandlesSpansVertical: function() { with(this) { + var slider = new Control.Slider(['handle6-1','handle6-2','handle6-3'], 'track6', {axis:'vertical',spans:['span6-1','span6-2'],range:$R(0,100)}); + assertInstanceOf(Control.Slider, slider); + + slider.setValue(20, 0); + slider.setValue(80, 1); + slider.setValue(90, 2); + + assertEqual("17px", $('span6-1').style.top); + assertEqual("52px", $('span6-1').style.height); + assertEqual("70px", $('span6-2').style.top); + assertEqual("9px", $('span6-2').style.height); + + slider.setValue(30, 0); + slider.setValue(20, 1); + slider.setValue(95, 2); + + assertEqual("17px", $('span6-1').style.top); + assertEqual("9px", $('span6-1').style.height); + assertEqual("26px", $('span6-2').style.top); + assertEqual("57px", $('span6-2').style.height); + }}, + + testRange: function() { with(this) { + var slider = new Control.Slider('handle1','track1'); + assertEqual(0, slider.value); + slider.setValue(1); + assertEqual("185px", $('handle1').style.left); + slider.dispose(); + + var slider = new Control.Slider('handle1','track1',{range:$R(10,20)}); + assertEqual(10, slider.value); + assertEqual("0px", $('handle1').style.left); + slider.setValue(15); + assertEqual("93px", $('handle1').style.left); + slider.setValue(20); + assertEqual("185px", $('handle1').style.left); + slider.dispose(); + }}, + + // test for #3732 + testRangeValues: function() { with(this) { + // test for non-zero starting range + var slider = new Control.Slider('handle1','track1',{ + range:$R(1,3), values:[1,2,3] + }); + assertEqual(1, slider.value); + assertEqual("0px", $('handle1').style.left); + slider.setValue(2); + assertEqual("93px", $('handle1').style.left); + slider.setValue(3); + assertEqual("185px", $('handle1').style.left); + slider.dispose(); + + // test zero-starting range + var slider = new Control.Slider('handle1','track1',{ + range:$R(0,2), values:[0,1,2] + }); + assertEqual(0, slider.value); + assertEqual("0px", $('handle1').style.left); + slider.setValue(1); + assertEqual("93px", $('handle1').style.left); + slider.setValue(2); + assertEqual("185px", $('handle1').style.left); + slider.dispose(); + }} + + }, "testlog"); +// ]]> +</script> +</body> +</html>
\ No newline at end of file |