The Tor Browser: dom/tests/mochitest/ajax/scriptaculous/test/unit/slider

dom/tests/mochitest/ajax/scriptaculous/test/unit/slider_test.html@a63d609f5ebe (annotated)

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

Thu, 15 Jan 2015 15:55:04 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Thu, 15 Jan 2015 15:55:04 +0100
branch: TOR_BUG_9701
changeset 9: a63d609f5ebe
permissions: -rw-r--r--

Back out 97036ab72558 which inappropriately compared turds to third parties.

 <!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>

The Tor Browser / annotate

dom/tests/mochitest/ajax/scriptaculous/test/unit/slider_test.html@a63d609f5ebe (annotated)

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