mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
438 lines
17 KiB
HTML
438 lines
17 KiB
HTML
|
<!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>
|