nickpons666/ventas_php
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Primer commit del sistema avantika sin cambios

Browse Source
This commit is contained in:
nickpons666
2026-01-06 19:42:24 -06:00
commit 3ae4be5957
7127 changed files with 440072 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
javascript/scoluos/test/functional/_ajax_inplaceeditor_result.html Executable file
View File

@@ -0,0 +1 @@
Server received: To be edited

1
javascript/scoluos/test/functional/_ajax_inplaceeditor_text.html Executable file
View File

@@ -0,0 +1 @@
Text from server

9
javascript/scoluos/test/functional/_autocomplete_result.html Executable file
View File

@@ -0,0 +1,9 @@
<ul>
<li>test1<span class="selectme">selectme1</span></li><li><span class="selectme">selectme2</span>test2</li>
<li>test3<span class="selectme">selectme3</span></li>
<li><b>BOLD</b><span class="selectme">selectme4<b>boldinselectme</b></span></li>
<li><span class="informal">(GET ME NOT)</span>(GET &lt;ME&gt; INSTEAD)<span class="selectme">(forselectme!)</span></li>
<li><span class="selectme">Here we have <a href="_autocomplete_result.html">a link</a> which should work</span></li>
</ul>

3
javascript/scoluos/test/functional/_autocomplete_result_single.html Executable file
View File

@@ -0,0 +1,3 @@
<ul>
<li>test1<span class="selectme">selectme1</span></li>
</ul>

86
javascript/scoluos/test/functional/ajax_autocompleter2_test.html Executable file
View File

@@ -0,0 +1,86 @@
<!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 Autocompleter functional 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>
<style type="text/css" media="screen">
.selected { background-color: #888; }
</style>
</head>
<body>
<h1>script.aculo.us Autocompleter functional test file</h1>
This is an incremental Ajax autocompleter. Type something, then type a comma, than type more. This autocompleter features an indicator.<br/>
<div id="ac1_indicator" style="display:none">NOW FETCHING RESULTS</div>
Autocompleter ac1: <input type="text" id="ac1" autocomplete="off"/>
<div id="ac1update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac1','ac1update','_autocomplete_result.html', {
tokens: ',', indicator: 'ac1_indicator'
} );
// ]]>
</script>
<br/><br/>
Non-incremental Ajax autocompleter.<br/>
Autocompleter ac2: <input id="ac2" type="text" autocomplete="off"/>
<div id="ac2update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac2','ac2update','_autocomplete_result.html');
// ]]>
</script>
<br/><br/>
Non-incremental Ajax autocompleter.<br/>
Autocompleter ac3: <input id="ac3" type="text" autocomplete="off"/>
<div id="ac3update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac3','ac3update','_autocomplete_result.html');
// ]]>
</script>
<br/><br/>
Local incremental array autocompleter ac4<br/> with full-search. Type 'Jac', hit enter a few <br/>times, type 'gne'.<br/> <textarea rows=5 cols=40 id="ac4" autocomplete="off"></textarea>
<div id="ac4update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Autocompleter.Local('ac4','ac4update',
new Array("John Jackson", "", "Jack Johnson", "", "Jane Agnews"), { tokens: new Array(',','\n'), fullSearch: true, partialSearch: true });
// ]]>
</script>
<br/><br/>
Local incremental array autocompleter ac5<br/> with fixed height and scrollbar. Type 'Jac', hit enter a few <br/>times, type 'gne'.<br/> <input id="ac5" type="text" autocomplete="off"/>
<div id="ac5update" style="display:none;border:1px solid black;background-color:white;height:50px;overflow:auto;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Autocompleter.Local('ac5','ac5update',
new Array("John Jackson", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews"), { tokens: new Array(',','\n'), fullSearch: true, partialSearch: true });
// ]]>
</script>
<br /><br /><br />
<br /><br /><br />
<div id="debug" style="font-size:11px;"></div>
</body>
</html>

71
javascript/scoluos/test/functional/ajax_autocompleter_test.html Executable file
View File

@@ -0,0 +1,71 @@
<!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 Autocompleter functional 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>
<style type="text/css" media="screen">
.selected { background-color: #888; }
</style>
</head>
<body>
<h1>script.aculo.us Autocompleter functional test file</h1>
Autocompleter ac1 (updated panel is relative, so no overlapping should occur): <input id="ac1" name="ac1" type="text"/>
<div id="ac1update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac1','ac1update','_autocomplete_result.html');
// ]]>
</script>
<br/>
Autocompleter ac2 w/ parameters: <input id="ac2" type="text" name="ac2"/>
<div id="ac2update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac2','ac2update','_autocomplete_result.html',{parameters:'a=b&b=c'});
// ]]>
</script>
<br/>
Autocompleter ac3 (nested in postion:relative div, selects "selectme" class):
<br/>
<div style="position:relative">
<input id="ac3" type="text"/>
<div id="ac3update" style="display:none;border:1px solid black;background-color:white;"></div>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac3','ac3update','_autocomplete_result.html',{select:'selectme'});
// ]]>
</script>
<br/><select><option>First Item</option><option>Second Item</option><option>Third Item</option></select>
<br/><br/>
Autocompleter ac4 (autoselects option if single single option is returned):
<br/>
<input id="ac4" type="text"/>
<div id="ac4update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac4','ac4update','_autocomplete_result_single.html',{select:'selectme',autoSelect:true});
// ]]>
</script>
<div id="debug" style="font-size:11px;"></div>
</body>
</html>

60
javascript/scoluos/test/functional/ajax_inplacecollectioneditor_test.html Executable file
View File

@@ -0,0 +1,60 @@
<!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 Demo</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>
<style type="text/css" media="screen">
.inplaceeditor-saving { background: url(wait.gif) bottom right no-repeat; }
</style>
</head>
<body>
<h1>script.aculo.us Demo</h1>
<p>
Demo of the Ajax.InPlaceCollectionEditor.
</p>
<p id="tobeedited">three</p> (should autoselect "three")
<script>
new Ajax.InPlaceCollectionEditor(
'tobeedited', '_ajax_inplaceeditor_result.html', {
collection: ['one','two','three'],
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<p id="tobeedited2">two</p> (should autoselect "two")
<script>
new Ajax.InPlaceCollectionEditor(
'tobeedited2', '_ajax_inplaceeditor_result.html', {
collection: [[0,'one'],[1,'two'],[2,'three']],
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<p id="tobeedited3">three</p> (should manually select "one")
<script>
new Ajax.InPlaceCollectionEditor(
'tobeedited3', '_ajax_inplaceeditor_result.html', {
collection: [[0,'one'],[1,'two'],[2,'three']],
value: 0,
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<p id="tobeedited4">one</p> (should manually select "two")
<script>
new Ajax.InPlaceCollectionEditor(
'tobeedited4', '_ajax_inplaceeditor_result.html', {
collection: ['one','two','three'],
value: 'two',
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
</body>
</html>

116
javascript/scoluos/test/functional/ajax_inplaceeditor_test.html Executable file
View File

@@ -0,0 +1,116 @@
<!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 Demo</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>
<style type="text/css" media="screen">
.inplaceeditor-saving { background: url(wait.gif) bottom right no-repeat; }
</style>
</head>
<body>
<h1>script.aculo.us Demo</h1>
<p>
Demo of the Ajax.InPlaceEditor.
</p>
<h1 id="tobeedited">To be edited</h1>
<script>
new Ajax.InPlaceEditor($('tobeedited'), '_ajax_inplaceeditor_result.html', {
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<h1 id="tobeeditedblur">To be edited w/ blur</h1>
<script>
new Ajax.InPlaceEditor($('tobeeditedblur'), '_ajax_inplaceeditor_result.html', {
submitOnBlur: true, okButton: false, cancelLink: true,
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<h1 id="tobeeditedoklink">To be edited w/ okLink and cancelButton</h1>
<script>
new Ajax.InPlaceEditor($('tobeeditedoklink'),
'_ajax_inplaceeditor_result.html', {
okButton: false,
okLink: true,
cancelButton: true,
cancelLink: false,
textBeforeControls: ' ---> ',
textBetweenControls: ' | ',
textAfterControls: ' <--- ',
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<h1 id="tobeeditedoklinkonly">To be edited w/ okLink only </h1>
<script>
new Ajax.InPlaceEditor($('tobeeditedoklinkonly'),
'_ajax_inplaceeditor_result.html', {
okButton: false,
okLink: true,
cancelButton: false,
cancelLink: false,
textBeforeControls: ' ---> ',
textBetweenControls: ' | ', // will not be used, as one control only
textAfterControls: ' <--- ',
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<span id="tobeedited2">With external edit control and custom parameter name</span> &nbsp; <a id="tobeedited2EditControl" href="#">edit</a>
<script>
new Ajax.InPlaceEditor($('tobeedited2'), '_ajax_inplaceeditor_result.html', {
externalControl: 'tobeedited2EditControl',
paramName: 'foobar',
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<table>
<tbody>
<tr>
<td><span id="tobeeditedTD">test</span></td>
<td><a id="tobeeditedTDEditControl" href="#">edit</a></td>
</tr>
</tbody>
</table>
<script>
new Ajax.InPlaceEditor($('tobeeditedTD'), '_ajax_inplaceeditor_result.html', {
externalControl: 'tobeeditedTDEditControl'
});
</script>
<p id="tobeedited3">Multi row editor: Lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p>
<script>
new Ajax.InPlaceEditor($('tobeedited3'), '_ajax_inplaceeditor_result.html', {
rows:5,
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<p id="tobeedited4">Loads text from server</p>
<script>
new Ajax.InPlaceEditor($('tobeedited4'), '_ajax_inplaceeditor_result.html',
{ajaxOptions: {method: 'get'}, //override so we can use a static for the result and to load the text
loadTextURL: '_ajax_inplaceeditor_text.html'
});
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="tobeeditedFarDown">Editor very far down to test scrolling bug</h1>
<script>
new Ajax.InPlaceEditor($('tobeeditedFarDown'), '../unit/_ajax_inplaceeditor_result.html');
</script>
</body>
</html>

85
javascript/scoluos/test/functional/dragdrop2_test.html Executable file
View File

@@ -0,0 +1,85 @@
<!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 Drag and drop functional 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>
<style type="text/css" media="screen">
#thelist li { background: green; margin:5px; padding: 30px; }
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
</style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>Draggables/Droppables</h2>
<div id="revertbox1" class="box1" style="z-index:1000;width:150px;height:150px;background:#bbf;">
<span id="handle1">drag here</span><br/>
<input type="checkbox" id="shouldrevert1"/> Revert?
</div>
<div id="revertbox2" class="box" style="z-index:1000;width:150px;height:150px;background:#bbf;">
<span id="handle2">drag here</span><br/>
<input type="checkbox" id="shouldrevert2"/> Revert?
I've onStart, onDrag and onEnd events!<br/>
<span id="event-info"></span>
</div>
<div id="specialbox" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
This box overrides the default endeffect
</div>
<div id="specialbox2" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
This box overrides the default starteffect
</div>
<div id="specialbox3" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
This box overrides the default end- and starteffects
</div>
<div id="droptarget1" style="width:200px;height:200px;background-color:#eee;">accepts first box</div>
<div id="droptarget2" style="width:200px;height:200px;background-color:#eee;">accepts second box</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Draggable('revertbox1',{scroll:window,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
new Draggable('revertbox2',{
handle:'handle2',
revert:function(element){return ($('shouldrevert2').checked)},
onStart:function(){$('revertbox2').setStyle({backgroundColor:'#bfb'})},
onDrag:function(){$('event-info').update('drag!')},
onEnd:function(){alert('end!')}
});
Droppables.add('droptarget1',{accept:['box1','otherstuff'],onDrop:function(){alert('drop!')}});
Droppables.add('droptarget2',{accept:'box',onDrop:function(){alert('drop!')}});
new Draggable('specialbox',{
endeffect:function(){
new Effect.Highlight('specialbox',{queue:'end'});
}
});
new Draggable('specialbox2',{
starteffect:function(){
new Effect.Highlight('specialbox2',{queue:'end'});
}
});
new Draggable('specialbox3',{
starteffect:function(){
new Effect.Highlight('specialbox3',{queue:'end'});
},
endeffect:function(){
new Effect.Highlight('specialbox3',{queue:'end'});
}
});
// ]]>
</script>
</body>
</html>

90
javascript/scoluos/test/functional/dragdrop3_test.html Executable file
View File

@@ -0,0 +1,90 @@
<!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 Drag and drop functional 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>
<style type="text/css" media="screen">
#thelist li { background: green; margin:5px; padding: 30px; }
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
</style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>Draggables/Droppables</h2>
<div style="width:400px;height:400px;overflow:scroll;position:relative;" id="scroll-container">
<ul id="thelist2" style="padding: 2px; background:red;">
<li>Relatively here!</li>
<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</div>
<pre id="debug"></pre>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
Position.includeScrollOffsets = true;
Sortable.create('thelist2',{scroll:'scroll-container'});
// ]]>
</script>
</body>
</html>

41
javascript/scoluos/test/functional/dragdrop4_test.html Executable file
View File

@@ -0,0 +1,41 @@
<!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 Drag and drop functional 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>
</head>
<body style="background-color:#eee;">
<div style="position:relative;margin-left:100px;top:40px;background-color:white;">
(inside position:relative container)
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>Draggables/Droppables</h2>
<div id="absolute_positioned_element" class="box1" style="width:150px;height:150px;background:#bbf;">
<b>Ghosting effect</b>
<input type="text" value="blah"/>
<div id="hurradiegams">test!</div>
<br/>
</div>
<a href="#" onclick="alert($('hurradiegams').innerHTML); return false;">alert contents of test div</a>
<div id="absolute_positioned_element2" class="box1" style="width:150px;height:150px;background:#bbf;">
<span id="handle1">Ghost effect</span><br/>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Position.includeScrollOffsets = true;
new Draggable('absolute_positioned_element',{ghosting: true});
new Draggable('absolute_positioned_element2',{ghosting: true, revert:true});
// ]]>
</script>
</div>
</body>
</html>

42
javascript/scoluos/test/functional/dragdrop5_test.html Executable file
View File

@@ -0,0 +1,42 @@
<html>
<head>
<title>script.aculo.us Drag and drop functional test file</title>
<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>
</head>
<style>
div.hoverclass123 {
border:1px solid red;
}
</style>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>w/o hoverclass</h2>
<div id="cart" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba">
### DROP HERE ###
</div>
<script type="text/javascript">Droppables.add('cart', {onDrop:function(element,dropon){alert('w/o hoverclass, should be \'product_id\':' + encodeURIComponent(element.id) + ', dropon should be \'cart\':' + dropon.id)}})</script>
<br/>
<img alt="Product2" id="product_id" src="icon.png" /> &lt;-- drag this!
<script type="text/javascript">new Draggable('product_id', {revert:true})</script>
<h2>w/ hoverclass</h2>
<div id="carth" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba">
### DROP HERE ###
</div>
<script type="text/javascript">Droppables.add('carth', {hoverclass:'hoverclass123',onDrop:function(element, dropon, event){alert('w/ hoverclass: should be \'product_id\':' + encodeURIComponent(element.id) + ', dropon should be \'carth\':' + dropon.id)}})</script>
</body>
</html>

76
javascript/scoluos/test/functional/dragdrop6_test.html Executable file
View File

@@ -0,0 +1,76 @@
<!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 Drag and drop functional 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>
<style type="text/css" media="screen">
div.box { background: green; width:100px; height:100px }
div.box-container { background: yellow; width:200px; height:200px }
</style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>Draggables/Droppables</h2>
<div id="box-normal" class="box">
Normal box
</div>
<div id="box-grid-numeric" class="box">
snap: 25
</div>
<div id="box-grid-array" class="box">
snap: [5,25]
</div>
<div id="box-grid-procedural" class="box">
snap: procedural (e.g. constrain to box)
</div>
<div class="box-container">
<div id="box-grid-procedural-gets-draggable" class="box">
snap: procedural (e.g. constrain to parent element)
</div>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Draggable('box-normal',{snap:false,revert:true});
new Draggable('box-grid-numeric',{snap:25,revert:true});
new Draggable('box-grid-array',{snap:[5,25],revert:true});
new Draggable('box-grid-procedural',{
snap: function(x,y) {
return[
x<100 ? (x > 0 ? x : 0 ) : 100,
y<50 ? (y > 0 ? y : 0) : 50];
},
revert:true
});
new Draggable('box-grid-procedural-gets-draggable',{
snap: function(x,y,draggable) {
function constrain(n, lower, upper) {
if (n > upper) return upper;
else if (n < lower) return lower;
else return n;
}
element_dimensions = Element.getDimensions(draggable.element);
parent_dimensions = Element.getDimensions(draggable.element.parentNode);
return[
constrain(x, 0, parent_dimensions.width - element_dimensions.width),
constrain(y, 0, parent_dimensions.height - element_dimensions.height)];
},
revert:true
});
// ]]>
</script>
</body>
</html>

211
javascript/scoluos/test/functional/dragdrop7_test.html Executable file
View File

@@ -0,0 +1,211 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Position.includeScrollOffsets = true;
Draggables.clear = function (event) {
while (Draggables.drags.length) {
var d = Draggables.drags.pop();
var e = d.element;
d.stopScrolling();
d.destroy();
d.element = null;
if (e.parentNode) {e.parentNode.removeChild(e)};
}
}
function cleanup() { //try to remove circular references
lis = document.getElementsByTagName("li");
for (i = 0; i < lis.length; i++) {
if (lis[i].longListItem) {lis[i].longListItem.destroy();}
else if (lis[i].container) {lis[i].container.destroy();}
}
Draggables.clear();
}
window.onload = function() {
var li = $("masterList").getElementsByTagName('LI');
for (var i = 0; i < li.length; i++) {
//var d = new LongListItem(li[i]);
//li[i].onmousedown = d.onMouseDown.bindAsEventListener(d);
var d = new Draggable(li[i],
{revert: true,
ghosting: false,
scroll: "rightContainers"
});
}
var divs = $("rightContainers").getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className && Element.hasClassName(divs[i], "container")) {
Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"});
}
}
Event.observe(window, 'unload', cleanup, false);
}
//]]>
</script>
<style type="text/css">
html, body {
margin:0; padding: 0;
height: 100% !important;
}
body {
position:relative;
color: black;
background-color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
h1 {font-size:115%;}
h2 {font-size: 110%;}
h3 {font-size: 105%;}
div, p, li, td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
p {margin: 0 0 .7em 0; padding:0;}
ul {
position:relative;
list-style: none;
margin:0; padding:0;
overflow: visible;
}
li {position:relative;}
.instructions {font-style:italic;}
#leftDiv {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 30%;
margin: 0; padding: 7px;
border-right: 2px solid #bb9;
background-color: #eed;
}
#leftDiv li, #rightContainers div.container li {
margin: 3px 0; padding: 3px 3em 3px 10px;
border: 2px solid #456;
background-color: #cde;
cursor: move;
}
#rightContainers {
padding: .5em;
position: absolute;
top: 0; bottom: 0; right: 0; left: 35%;
overflow:auto;
}
#rightContainers div.container{
background-color: #bb9;
margin: 0 0 40px 0; padding: 0 0 1px 0;
border: 2px solid #775;
}
#rightContainers div.container h2{
margin:0; padding: 2px 1em 0 1em;
text-align:center;
}
#rightContainers div.container ul {
margin: 5px; padding: 0 3px;
background-color: white;
border: 1px solid black;
}
#rightContainers div.container ul.empty {
padding: 3px 0;
}
#rightContainers div.hover {
background-color: #eed;
}
</style>
<!--[if IE]><style type="text/css">
#leftDiv {
height: expression((document.body.clientHeight - 44) + "px");
}
#leftDiv ul{width:93%;}
#leftDiv li div.count {
right:4px;
top:4px;
}
#rightContainers li a.remove {
display:block;
float:none;
position:absolute;
top: 4px;
right: 1.6em;
margin:0; padding:0 .2em;
}
</style><![endif]-->
</head>
<body>
<div id="leftDiv" class="">
<form id="frmContinue" action="#" method="post">
<p class="instructions">Shrink your window until the right-hand pane is scrollable.</p>
<p class="instructions">Drag from the list on left to groups on the right, force the right-hand pane to scroll.</p>
<input name="data" type="hidden" value=" ">
</form>
<ul id="masterList">
<li id="drag1">One</li>
<li id="drag2">Two</li>
<li id="drag3">Three</li>
<li id="drag4">Four</li>
<li id="drag5">Five</li>
<li id="drag6">Six</li>
<li id="drag7">Seven</li>
<li id="drag8">Eight</li>
</ul>
</div>
<div id="rightContainers" class="">
</form>
<div id="grp1" class="container">
<h2><span id="grp1_name">Group 1</span></h2>
<ul id="grp1ul" class="empty"></ul>
</div>
<div id="grp2" class="container">
<h2><span id="grp2_name">Group 2</span></h2>
<ul id="grp2ul" class="empty"></ul>
</div>
<div id="grp3" class="container">
<h2><span id="grp3_name">Group 3</span></h2>
<ul id="grp3ul" class="empty"></ul>
</div>
<div id="grp4" class="container">
<h2><span id="grp4_name">Group 4</span></h2>
<ul id="grp4ul" class="empty"></ul>
</div>
<div id="grp5" class="container">
<h2><span id="grp5_name">Group 5</span></h2>
<ul id="grp5ul" class="empty"></ul>
</div>
<div id="grp6" class="container">
<h2><span id="grp6_name">Group 6</span></h2>
<ul id="grp6ul" class="empty"></ul>
</div>
<div id="grp7" class="container">
<h2><span id="grp7_name">Group 7</span></h2>
<ul id="grp7ul" class="empty"></ul>
</div>
<div id="grp8" class="container">
<h2><span id="grp8_name">Group 8</span></h2>
<ul id="grp8ul" class="empty"></ul>
</div>
<div id="grp9" class="container">
<h2><span id="grp9_name">Group 9</span></h2>
<ul id="grp9ul" class="empty"></ul>
</div>
</div>
</body>
</html>

142
javascript/scoluos/test/functional/dragdrop8_test.html Executable file
View File

@@ -0,0 +1,142 @@
<html>
<head>
<title>Drag &amp; Drop</title>
<style type="text/css">
td
{
width: 10em;
text-align: center;
}
table.mytable {
list-style-type: none;
padding: 4px 4px 0 4px;
margin: 0px;
font-size: 13px;
font-family: Arial, sans-serif;
}
table.mytable tr {
margin-bottom: 4px;
padding: 2px 2px;
border: 1px solid #c00;
background-color: #eee;
}
div.draggable {
cursor:move;
padding:2px;
background-color: #BBCCDD;
}
div.dropsite {
padding:2px;
background-color: #DDBB99;
}
div.hoverclass123
{
border:1px solid red;
}
</style>
<script language="JavaScript" type="text/javascript" src="../../lib/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="../../src/scriptaculous.js"></script>
<script language="JavaScript" type="text/javascript">
Position.includeScrollOffsets = true;
window.onload = function()
{
var t1 = document.getElementById("t1");
add_divs(t1, 'td', 'draggable');
var trs = t1.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++)
{
var divs = document.getElementsByClassName("draggable", trs[i]);
var drag_text = divs[2].innerHTML;
for (var j = 0; j < divs.length; ++j)
{
new Draggable(divs[j], {ghosting:true, revert:true});
}
}
var t2 = document.getElementById("t2");
add_divs(t2, 'td', 'dropsite');
var divs = document.getElementsByClassName("dropsite", t2);
for (var j = 0; j < divs.length; ++j)
{
Droppables.add(divs[j], {accept:'draggable',
hoverclass:'hoverclass123',
onDrop:function(element, dropon, event)
{ debug("dropped " + element.innerHTML + " on "
+ dropon.innerHTML + "\n")}});
}
};
function debug(text)
{
document.getElementById('debug').innerHTML
= "<pre>" + text + "</pre>";
}
function add_divs(table, tag, classname)
{
var items = table.getElementsByTagName(tag);
for (var i = 0; i < items.length; i++)
items[i].innerHTML =
"<div class='" + classname + "'>" + items[i].innerHTML + "</div>";
}
</script>
</head>
<body>
<p>Drag from this table:</p>
<DIV STYLE="padding-left: 50pt;">
<DIV STYLE="overflow: auto; width: 250; height: 100;
border: 1px gray solid;
padding:0px; margin: 0px;">
<table id="t1" class="sortable mytable">
<tr><td>one</td><td>1</td><td>uno</td></tr>
<tr><td>two</td><td>2</td><td>dos</td></tr>
<tr><td>three</td><td>3</td><td>tres</td></tr>
<tr><td>four</td><td>4</td><td>quatro</td></tr>
<tr><td>five</td><td>5</td><td>cinco</td></tr>
<tr><td>six</td><td>6</td><td>seis</td></tr>
<tr><td>seven</td><td>7</td><td>siete</td></tr>
<tr><td>eight</td><td>8</td><td>ocho</td></tr>
<tr><td>nine</td><td>9</td><td>nueve</td></tr>
<tr><td>ten</td><td>10</td><td>diez</td></tr>
</table>
</DIV>
</DIV>
<p>
<p>Drop on this table:</p>
<DIV STYLE="padding-left: 50pt;">
<DIV STYLE="overflow: auto; width: 250; height: 100;
border: 1px gray solid;
padding:0px; margin: 0px;">
<table id="t2" class="sortable mytable">
<tr><td>eleven</td><td>11</td><td>once</td></tr>
<tr><td>twelve</td><td>12</td><td>doce</td></tr>
<tr><td>thirteen</td><td>13</td><td>trece</td></tr>
<tr><td>fourteen</td><td>14</td><td>catorce</td></tr>
<tr><td>fifteen</td><td>15</td><td>quince</td></tr>
<tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr>
<tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr>
<tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr>
<tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr>
<tr><td>twenty</td><td>20</td><td>veinte</td></tr>
</table>
</DIV>
</DIV>
<p>
<div id="debug"></div>
</p>
</body>
</html>

47
javascript/scoluos/test/functional/dragdrop9_test.html Executable file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<div id="source" style="height: 100px; width: 100px; background-color: gray;">
Draggable
</div>
<script type="text/javascript">
//<![CDATA[
new Draggable("source", {
revert:"failure",
onDropped: function(element){ $(element).update('I WAS DROPPED!') },
reverteffect: function(element, top_offset, left_offset) {
var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
new Effect.Move(element, {
x: -left_offset, y: -top_offset, duration: dur,
transition: Effect.Transitions.spring,
queue: {scope:'_draggable', position:'end'}
});
}
});
//]]>
</script>
<br/>
<div id="target" style="height: 100px; width: 100px; background-color: green;">
Good Target
</div>
<script type="text/javascript">
//<![CDATA[
Droppables.add("target", {
onDrop:function(element){ Effect.Puff($('source')); }
});
//]]>
</script>
<br/>
</body>
</html>

84
javascript/scoluos/test/functional/dragdrop_delay_test.html Executable file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>script.aculo.us functional test</title>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/effects.js"></script>
<script type="text/javascript" src="../../src/dragdrop.js"></script>
<script type="text/javascript">
//<![CDATA[
var myStartEffect = function(element) {
element._opacity = Element.getOpacity(element);
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
new Effect.Highlight(element, {});
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
h1 {font-size: 1.2em; text-align:center;}
li {
margin: 5px auto;
padding: 2px;
width: 200px;
text-align:center;
list-style-type:none;
border: 2px solid #779;
background-color: #dde
}
div {
margin: 5px auto;
padding: 2px;
width: 300px;
text-align:center;
border: 2px solid #797;
background-color: #ded
}
/*]]>*/
</style>
</head>
<body>
<h1>No delay sortable</h1>
<ul id="sort1">
<li id="s1_1">one</li>
<li id="s1_2">two</li>
<li id="s1_3">three</li>
</ul>
<h1>Delayed sortable (500 ms)</h1>
<ul id="sort2">
<li id="s2_1">one</li>
<li id="s2_2">two</li>
<li id="s2_3">three</li>
</ul>
<h1>No delay draggable</h1>
<div id="drag1">
Lorem ipsum
</div>
<h1>Delayed draggable (1000 ms)</h1>
<div id="drag2">
Lorem ipsum
</div>
<script type="text/javascript" charset="utf-8">
Sortable.create('sort1', {starteffect: myStartEffect});
Sortable.create('sort2', {starteffect:myStartEffect, delay:500});
new Draggable('drag1', {starteffect:myStartEffect});
new Draggable('drag2', {starteffect:myStartEffect, delay:1000});
</script>
</body>
</html>

120
javascript/scoluos/test/functional/dragdrop_test.html Executable file
View File

@@ -0,0 +1,120 @@
<!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 Drag and drop functional 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>
<style type="text/css" media="screen">
#thelist li { background: green; margin:5px; padding: 30px; }
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
#revertbox2 { position:absolute;top:40px;left:50px;z-index:1000;width:150px;height:150px;background:#bbf; }
</style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>Draggables/Droppables</h2>
<a href="#" onclick="alert($H(Sortable.sortables).inspect());return false">inspect sortables</a>
<div id="revertbox1" class="box1" style="opacity:0.5;z-index:1000;width:150px;height:150px;background:#bfb;">
<span class="handle1">drag here</span>
<span class="handle1">(but not here)</span><br/>
<input type="checkbox" id="shouldrevert1"/> Revert?
</div>
<div id="revertbox2" class="box">
<span id="handle2">drag here</span><br/>
<input type="checkbox" id="shouldrevert2"/> Revert?
</div>
<div id="xxxx">testtest</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Draggable('revertbox1',{scroll:window,zindex:-5,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
new Draggable('revertbox2',{scroll:window,handle:'handle2',revert:function(element){return ($('shouldrevert2').checked)}});
Droppables.add('xxxx',{accept:['box1','box2'],onDrop:function(){alert('drop!')}});
// ]]>
</script>
<ul id="thelist" style="padding: 10px; position: absolute; top:20px; left:200px;z-index:1000;">
<li id="thelist_4">Hey there! I'm absolutely positioned</li>
<li id="thelist_1">one<br/><form id="form1"><input type="checkbox" onclick="this.checked = !this.checked" value="x" name="x" id="xyz"/><input type="text" id="xxx"></input></form></li>
<li id="thelist_2">two<br/><form id="form2"><input type="text" id="xyx"></input></form></li>
<li id="thelist_3">three<br/><form id="form3"><input type="text" id="xu3"></input></form></li>
</ul>
<ul id="thelist2" style="padding: 2px; background:red;">
<li>Relatively here!</li>
<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
Sortable.create('thelist');
Sortable.create('thelist2');
// ]]>
</script>
</body>
</html>

BIN
javascript/scoluos/test/functional/dropmarker.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 B

35
javascript/scoluos/test/functional/effect_direct_test.html Executable file
View File

@@ -0,0 +1,35 @@
<!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 Effects functional 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>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #888; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('highlight',{duration:1.5}) }); return false;">Highlight</a> |
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('blind_up','d1',{duration:1.5}) }); return false;">BlindUp</a> |
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('blind_down',{duration:1.5}) }); return false;">BlindDown</a> |
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('slide_up',{duration:1.5}) }); return false;">SlideUp</a> |
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('slide_down',{duration:1.5}) }); return false;">SlideDown</a>
<div class="d"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
<div class="d"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
</body>
</html>

65
javascript/scoluos/test/functional/effect_puff_test.html Executable file
View File

@@ -0,0 +1,65 @@
<!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 Effects functional 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>
<script type="text/javascript" charset="utf-8">
Position.includeScrollOffsets = true;
</script>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Puff</h2>
<div id="p1" style="width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
click to test puff, no position set
</div>
<div id="p2" style="float:right;width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
click to test puff, floats
</div>
<div id="p3" style="position:absolute;left:200px;top:100px;width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
click to test puff, absolute position set
</div>
<h3>Floating inside a container</h3>
<div style="width:300px;height:300px;border:1px solid red">
<div style="float:left;width:100px;height:100px;background-color:#888;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#999;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#aaa;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#bbb;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#ccc;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#ddd;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#eee;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#777;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#666;" onclick="Effect.Puff(this)">
click to puff
</div>
</div>
</div>
</body>
</html>

29
javascript/scoluos/test/functional/effect_scale_test.html Executable file
View File

@@ -0,0 +1,29 @@
<!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 Effects functional 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>
<style type="text/css" media="screen">
/* <![CDATA[ */
#scaleable { background-color: #888; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<a href="#" onclick="new Effect.Scale( 'scaleable', 20,{ scaleX: true, scaleY: false }); return false;">Scale X only</a> |
<a href="#" onclick="new Effect.Scale( 'scaleable', 20,{ scaleX: false, scaleY: true }); return false;">Scale Y only</a> |
<a href="#" onclick="new Effect.Scale( 'scaleable', 20,{ scaleX: true, scaleY: true }); return false;">Scale X and Y</a>
<div id="scaleable">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div>
</body>
</html>

55
javascript/scoluos/test/functional/effect_shake.html Executable file
View File

@@ -0,0 +1,55 @@
<!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 Effects functional 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>
<body>
<h1>script.aculo.us Effect.shake functional test file</h1>
<h2>Effect.Shake</h2>
<div id="debug"> </div>
<a href="#" onclick="new Effect.Shake(this); return false;">shake</a><br/>
<a href="#" onclick="new Effect.Shake(this, {distance:2}); return false;">shake 2</a><br/>
<a href="#" onclick="new Effect.Shake(this, {distance:30}); return false;">shake 30</a><br/>
<a href="#" onclick="new Effect.Shake(this, {distance:60}); return false;">shake 60</a><br/>
<style type="text/css" media="screen">
/* <![CDATA[ */
#shake10, #shake20, #shake30 { margin-left: 50px; }
/* ]]> */
</style>
<a href="#" onclick="shake_these();return false;">shake these</a><br/>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function shake_these(){
new Effect.Shake("shake10", {distance:10});
new Effect.Shake("shake20", {distance:20});
new Effect.Shake("shake30", {distance:30});
}
// ]]>
</script>
<div id="shake10">shake 10</div>
<div id="shake20">shake 20</div>
<div id="shake30">shake 30</div>
<a href="#" onclick="new Effect.Shake(this, {duration:2.0}); return false;">shake slow</a><br/>
<a href="#" onclick="new Effect.Shake(this, {duration:0.2}); return false;">shake fast</a><br/>
<a href="#" onclick="new Effect.Shake(this, {distance:2, duration:2.0}); return false;">shake 2 slow</a><br/>
<a href="#" onclick="new Effect.Shake(this, {distance:60, duration:0.2}); return false;">shake 60 fast</a><br/>
</body>
</html>

63
javascript/scoluos/test/functional/effects2_test.html Executable file
View File

@@ -0,0 +1,63 @@
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#menu {
width: 300px;
border: 1px #000 solid;
}
.menu_header {
background-color: #00CC99;
color: #FFFFFF;
}
.menu_block {
background-color: #006699;
color: #FFFFFF;
overflow:hidden;
}
.menu_block div {
}
.close_block {
position: relative;
width: 100%;
bottom: 0px;
height: 15px;
text-align: center;
display: block;
}
</style>
<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>
</head>
<body>
<div id="menu">
<div class="menu_header" id="menu_header1"><a href="#" onClick="new Effect.SlideDown('menu_block1'); return false;">HEADER 1</a></div>
<div class="menu_block_container" id="menu_block_container1">
<div class="menu_block" id="menu_block1"><div>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
<a href="#" class="close_block" onClick="new Effect.SlideUp('menu_block1'); return false;">close</a></div></div>
</div>
<div class="menu_header" id="menu_header2"><a href="#" onClick="new Effect.SlideDown('menu_block2'); return false;">HEADER 2</a></div>
<div class="menu_block_container" id="menu_block_container2">
<div class="menu_block" id="menu_block2"><div>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
<a href="#" class="close_block" onClick="new Effect.SlideUp('menu_block2'); return false;">close</a></div></div>
</div>
</div>
</body>
</html>

36
javascript/scoluos/test/functional/effects3_test.html Executable file
View File

@@ -0,0 +1,36 @@
<!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 Effects functional 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>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.SlideDown/Effect.SlideUp</h2>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
var effect_1 = null;
// ]]>
</script>
<a href="#" onclick="effect_1 = Effect.SlideDown('d1',{duration:1.0}); return false;">Start slide down</a> |
<a href="#" onclick="effect_1 = Effect.SlideUp('d1',{duration:1.0}); return false;">Start slide up</a> |
<a href="#" onclick="effect_1.cancel(); return false;">cancel()</a> |
<a href="#" onclick="alert(Object.inspect($('d1').firstChild.style)); return false;">inspect()</a> |
<a href="#" onclick="$('d1').firstChild.innerHTML += $('d1').firstChild.innerHTML; return false;">add content</a>
<div id="d1" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</p>
</div></div>
</body>
</html>

31
javascript/scoluos/test/functional/effects4_test.html Executable file
View File

@@ -0,0 +1,31 @@
<!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 Effects functional 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>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #888; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<a href="#" onclick="new Effect.Highlight('d1',{duration:1.5}); return false;">Highlight</a> |
<a href="#" onclick="new Effect.BlindUp('d1',{duration:1.5}); return false;">BlindUp</a> |
<a href="#" onclick="new Effect.BlindDown('d1',{duration:1.5}); return false;">BlindDown</a> |
<a href="#" onclick="new Effect.SlideUp('d1',{duration:1.5}); return false;">SlideUp</a> |
<a href="#" onclick="new Effect.SlideDown('d1',{duration:1.5}); return false;">SlideDown</a>
<div id="d1"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
</body>
</html>

483
javascript/scoluos/test/functional/effects5_test.html Executable file
View File

@@ -0,0 +1,483 @@
<!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 Effects functional 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>
</head>
<body>
<h1>script.aculo.us ScrollTo effect functional test</h1>
<a href="#" onclick="new Effect.ScrollTo('down-below',{duration:5.0}); return false;">scroll (slow-mo) down-below...</a>,
<a href="#" onclick="new Effect.ScrollTo('last-heading'); return false;">scroll last-heading</a>
<h2 id="first-heading"><b>first-heading</b>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2 id="down-below"><b>DOWN BELOW</b>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<a href="#" onclick="new Effect.ScrollTo('first-heading'); return false;">scroll...</a>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2 id="last-heading">Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>
</html>

39
javascript/scoluos/test/functional/effects5b_test.html Executable file
View File

@@ -0,0 +1,39 @@
<!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 Effects functional 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>
</head>
<body>
<div style="height: 200px;">&nbsp;</div>
<h1>script.aculo.us ScrollTo effect (with floats) functional test</h1>
(this test only applies to Firefox)
<div style="float: right; padding: 10px; background: #ccc; height: 1900px;">
<h2>top of float</h2>
<a href="#" onclick="new Effect.ScrollTo('bottom-of-float');return false;">scroll to bottom!</a>
<div style="height: 1500px;">&nbsp;</div>
<h2 id="bottom-of-float">Bottom of Float</h2>
w00t
</div>
<script>
window.scrollBy(0, 200);
</script>
</body>
</html>

61
javascript/scoluos/test/functional/effects6_test.html Executable file
View File

@@ -0,0 +1,61 @@
<!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 Effects functional 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>
</head>
<body>
<h1>script.aculo.us Fade/Appear effect functional test</h1>
<p>Note: these tests use the browser default CSS style rules.</p>
<h2>DIV</h2>
<div id="test_div">TEST</div>
<a href="#" onclick="Effect.Fade('test_div'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_div'); return false;">Effect.Appear</a>
<h2>SPAN</h2>
<span id="test_span">TEST</span><br/>
<a href="#" onclick="Effect.Fade('test_span'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_span'); return false;">Effect.Appear</a>
<h2>P</h2>
<p id="test_p">TEST</p><br/>
<a href="#" onclick="Effect.Fade('test_p'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_p'); return false;">Effect.Appear</a>
<h2>IMG</h2>
<img id="test_img" src="icon.png" alt="test image" /><br/>
<a href="#" onclick="Effect.Fade('test_img'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_img'); return false;">Effect.Appear</a>
<hr/>
<p style="color:red;">The following elements are not supported with Fade/Appear on all browsers!</p>
<h2>TABLE</h2>
<table id="test_table"><tbody><tr><td>TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade('test_table'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_table'); return false;">Effect.Appear</a>
<h2>TBODY</h2>
<table><tbody id="test_tbody"><tr><td>TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade('test_tbody'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_tbody'); return false;">Effect.Appear</a>
<h2>TR</h2>
<table><tbody><tr id="test_tr"><td>TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade('test_tr'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_tr'); return false;">Effect.Appear</a>
<h2>TD</h2>
<table><tbody><tr><td id="test_td">TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade('test_td'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_td'); return false;">Effect.Appear</a>
</body>
</html>

65
javascript/scoluos/test/functional/effects_blind_test.html Executable file
View File

@@ -0,0 +1,65 @@
<!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 Effects functional 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>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #fcb; width: 200px; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.BlindUp/Effect.BlindDown</h2>
<div id="d1">
Lorem ipsum dolor sit amet
<ul>
<li>test!</li>
<li>test!</li>
</ul>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
Lorem ipsum dolor sit amet
<ul>
<li>test!</li>
<li>test!</li>
</ul>
Lorem ipsum dolor sit amet
<ul>
<li>test!</li>
<li>test!</li>
</ul>
Lorem ipsum dolor sit amet
<ul>
<li>test!</li>
<li>test!</li>
</ul>
</div>
<p>
<a href="#" onclick="Effect.BlindDown('d1');; return false;">BlindDown()</a>
</p>
<p>
<a href="#" onclick="Effect.BlindUp('d1');; return false;">BlindUp()</a>
</p>
</body>
</html>

46
javascript/scoluos/test/functional/effects_float_appear_test.html Executable file
View File

@@ -0,0 +1,46 @@
<!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 Effects functional 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>
</head>
<body>
<h1>script.aculo.us functional test file</h1>
<p>
See if workaround for Safari and floating elements with Effect.Appear works.
</p>
<a href="#" onclick="Effect.Appear('float_div_left'); return false;">float:left</a> |
<a href="#" onclick="Effect.Appear('float_div_right'); return false;">float:right</a> |
<a href="#" onclick="$('float_div_right').setOpacity(1)">float:right (setOpacity 1)</a> |
<a href="#" onclick="Effect.Appear('icon'); return false;">image (non-floating)</a> |
<a href="#" onclick="Effect.Appear('float_icon'); return false;">image (floating)</a> |
<a href="#" onclick="$('float_icon').setOpacity(1);">image (setOpacity 1)</a>
<hr/>
<div id="float_div_left" style="float:left;display:none">
Lorem ipsum dolor sit amet,<br/>
consectetur adipisicing elit,<br/>
sed do eiusmod tempor incididunt<br/>
ut labore et dolore magna aliqua.
</div>
<div id="float_div_right" style="float:right;opacity:0.4">
Lorem ipsum dolor sit amet,<br/>
consectetur adipisicing elit,<br/>
sed do eiusmod tempor incididunt<br/>
ut labore et dolore magna aliqua.
</div>
<img id="icon" src="icon.png" style="display:none" alt="" />
<img id="float_icon" src="icon.png" style="float:left;opacity:0.4" alt="" />
</body>
</html>

38
javascript/scoluos/test/functional/effects_grow_strink_test.html Executable file
View File

@@ -0,0 +1,38 @@
<!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 Effects functional 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>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #fcb; width: 200px; height: 200px; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Grow/Effect.Shrink</h2>
<div id="d1" style="font-size: 2em;">
<p style="font-size:1em;">Lorem ipsum dolor sit amet</p>
</div>
<p>
Grow:
<a href="#" onclick="Effect.Grow('d1');; return false;">Grow()</a>
</p>
<p>
Shrink:
<a href="#" onclick="Effect.Shrink('d1');; return false;">Shrink()</a>
</p>
</body>
</html>

70
javascript/scoluos/test/functional/effects_highlight_bg_image.html Executable file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
//<![CDATA[
Li = {
onMouseDown_image: function(event) {
new Effect.Highlight(this, {keepBackgroundImage:true});
},
onMouseDown_without: function(event) {
new Effect.Highlight(this);
}
}
window.onload = function() {
var li = $("with").getElementsByTagName('LI');
for (var i = 0; i < li.length; i++) {
li[i].onmousedown = Li.onMouseDown_image.bindAsEventListener(li[i]);
}
var li = $("without").getElementsByTagName('LI');
for (i = 0; i < li.length; i++) {
li[i].onmousedown = Li.onMouseDown_without.bindAsEventListener(li[i]);
}
}
//]]>
</script>
<style type="text/css">
body {
color: black;
background-color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul {
list-style: none;
margin:0; padding:0;
}
li {
margin: 3px 0; padding: 3px 3em 3px 24px;
border: 2px solid #456;
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: 3px 3px;
}
#with li {background-color: #cde;}
#without li {background-color: #ced;}
</style>
</head>
<body>
<p>Test of <code>keepBackgroundImage</code> parameter for <code>Effect.Highlight</code>. Click items to show effect.</p>
<p>With the <code>keepBackgroundImage</code> parameter.</p>
<ul id="with">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<p>Without the parameter.</p>
<ul id="without">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>

30
javascript/scoluos/test/functional/effects_queue_limit_test.html Executable file
View File

@@ -0,0 +1,30 @@
<!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 Effects functional 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>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #fcb; width: 200px; height: 200px; float:left; }
#d2 { background-color: #cfb; font-size: 2em; width: 200px; height: 200px; float:left; }
#d3 { background-color: #bcf; font-size: 2em; width: 200px; height: 200px; float:left; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Queue limit</h2>
<a href="#" onclick="Effect.SlideUp('slidingtwice',{queue:{scope:'myscope', position:'end', limit: 1}});">up</a>
<a href="#" onclick="Effect.SlideDown('slidingtwice',{queue:{scope:'myscope', position:'end', limit: 1}});">down</a>
<div id="slidingtwice"><div style="background-color:#000;color:white;font-size:20px;height:300px;width:150px;">
Do a bit sliding in parallel, with a scoped queue, but I am limited to one : ) so don't try over and over again...
</div></div>
</body>
</html>

67
javascript/scoluos/test/functional/effects_queue_test.html Executable file
View File

@@ -0,0 +1,67 @@
<!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 Effects functional 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>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #fcb; width: 200px; height: 200px; float:left; }
#d2 { background-color: #cfb; font-size: 2em; width: 200px; height: 200px; float:left; }
#d3 { background-color: #bcf; font-size: 2em; width: 200px; height: 200px; float:left; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Queue</h2>
<div id="d1" style="font-size: 2em;">
<p style="font-size:1em;">Lorem ipsum dolor sit amet</p>
</div>
<div id="d2">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="d3">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div style="clear: both">
<a href="#" onclick="startTimeline(); return false;">Start queued effects</a> (in 'global' queue)
</div>
<div id="sliding"><div style="background-color:#ccc;font-size:20px;height:300px;width:150px;">
<a href="#" onclick="Effect.SlideUp('sliding',{queue:{scope:'myscope', position:'end'}}); Effect.SlideDown('sliding',{queue:{scope:'myscope', position:'end'}}); return false;">
Do a bit sliding in parallel, with a scoped queue
</a>
</div></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function startTimeline() {
// 3x highlight in front
for(var i=0; i<3; i++)
new Effect.Highlight('d3', { duration: 1.0, queue: 'front' });
// insert scale at very beginning
new Effect.Scale('d1', 75, { scaleContent: true, duration: 1.0, queue: 'front' });
// parallel implied, delay 0.5 sec
new Effect.Highlight('d1', { delay: 0.5 });
// puff at end
new Effect.Puff('d2', { duration: 4.0, queue: 'end' });
}
// ]]>
</script>
</body>
</html>

76
javascript/scoluos/test/functional/effects_random_demo.html Executable file
View File

@@ -0,0 +1,76 @@
<!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 Effects functional 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>
<style type="text/css" media="screen">
/* <![CDATA[ */
div.demo { font-size: 70pt; float: left }
div#info { font: 10px/11px Tahoma, Arial, sans-serif; }
/* ]]> */
</style>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function startDemo() {
$$('div.demo').each( function(d) {
d.visualEffect(
['fade','appear','blind_up','blind_down','puff','switch_off','drop_out','shake',
'slide_up','slide_down','pulsate','squish','fold','grow','shrink'][Math.round(Math.random()*14)],
{ duration:0.5+Math.random()*5, delay: Math.random()*3 });
});
$('info').update(
Effect.Queues.get('global').collect( function(e) {
return e.inspect().escapeHTML()
}).join('<br/>'));
}
// ]]>
</script>
</head>
<body>
<h1>Random effects demo</h1>
<a href="#" onclick="startDemo(); return false;">Start...</a> |
<a href="#" onclick="$('info').toggle(); return false">Show/hide log</a>
<div class="demo" style="background-color:#f00"><div>
DIV1
</div></div>
<div class="demo" style="background-color:#ff0"><div>
DIV2
</div></div>
<div class="demo" style="background-color:#0f0"><div>
DIV3
</div></div>
<div class="demo" style="background-color:#0ff"><div>
DIV4
</div></div>
<div class="demo" style="background-color:#f00"><div>
DIV5
</div></div>
<div class="demo" style="background-color:#ff0"><div>
DIV6
</div></div>
<div class="demo" style="background-color:#f00"><div>
DIV7
</div></div>
<div class="demo" style="background-color:#ff0"><div>
DIV8
</div></div>
<div class="demo" style="background-color:#0f0"><div>
DIV9
</div></div>
<div id="info" style="clear:both; display:none"> </div>
</body>
</html>

74
javascript/scoluos/test/functional/effects_test.html Executable file
View File

@@ -0,0 +1,74 @@
<!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 Effects functional 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>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Highlight</h2>
<div id="debug"> </div>
<a href="#" onclick="new Effect.SlideDown('d1'); return false;">asdasd</a>
<div id="d1" onclick="new Effect.SlideUp('d1');" style="overflow:hidden;"><div style="background-color:#ff8080;">
(highlight to red)
</div></div>
<div id="d2" style="width:100px;height:100px;background-color:#80ff80;">
(highlight to greenish)
</div>
<div id="d3" style="width:100px;height:100px;background-color:#dde;">
(bottom-right-grow)
</div>
<div id="d4" style="width:100px;height:100px;background-color:#dde;" onclick="Effect.Shake(this)">
click to test shake
</div>
<div id="d5" style="width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
click to test puff
</div>
<p>
update callbacks: <span id="d5_after">(waiting)</span> -- <span id="d5_before">(waiting)</span>
</p>
<a href="#" onclick="$('d5').appear({beforeUpdate:before,afterUpdate:after}); return false;">show puff div again</a>
<a href="#" onclick="Effect.Appear('d6')">test appear</a>
<div id="d6" style="width:100px;height:100px;background-color:#dde;display:none">
appear
</div>
<a href="#" onclick="Effect.Grow('d7')">test grow</a>
<div id="d7" style="width:100px;height:100px;background-color:#dde;display:none">
grow
</div>
<a href="#" onclick="Effect.Pulsate('d8')">test pulsate default times (5)</a>
<a href="#" onclick="Effect.Pulsate('d8', {pulses: 2})">test pulsate 2 times</a>
<div id="d8" style="width:100px;height:100px;background-color:#dde;">
pulsate
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Effect.Highlight("d2",{startcolor:"#000000"});
new Effect.Grow("d3",{duration:5.0,direction: 'bottom-right',opacityTransition:Effect.Transitions.linear});
new Effect.BlindDown("d1");
var afterUpdates = 0, beforeUpdates = 0;
function after(){ afterUpdates++; $('d5_after').update(afterUpdates); }
function before(){ beforeUpdates--; $('d5_before').update(beforeUpdates); }
// ]]>
</script>
</body>
</html>

36
javascript/scoluos/test/functional/effects_toggle_test.html Executable file
View File

@@ -0,0 +1,36 @@
<!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 Effects functional 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>
</head>
<body>
<h1>script.aculo.us Effect.toggle functional test file</h1>
<a href="#" onclick="Effect.toggle('d1','slide'); return false;">Toggle slide</a>
<div id="d1" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
</div></div>
<a href="#" onclick="Effect.toggle('d2','BLIND'); return false;">Toggle blind</a>
<div id="d2" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
</div></div>
<a href="#" onclick="Effect.toggle('d3','appear'); return false;">Toggle appear</a>
<div id="d3" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
</div></div>
</body>
</html>

BIN
javascript/scoluos/test/functional/icon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 B

91
javascript/scoluos/test/functional/index.html Executable file
View File

@@ -0,0 +1,91 @@
<!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 functional tests</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 class="navigation">
<h1>script.aculo.us<br/>Functional Tests</h1>
<p id="version"></p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
$('version').innerHTML = 'script.aculo.us version '+Scriptaculous.Version+'<br/>Prototype version ' + Prototype.Version;
// ]]>
</script>
<p><a href="http://wiki.script.aculo.us/scriptaculous/show/UnitTesting" target="test">Documentation</a></p>
<h2>Effects</h2>
<ul>
<li><b><a href="effects_random_demo.html" target="test">Random effects test</a></b></li>
<li><a href="effects_test.html" target="test">effects_test</a></li>
<li><a href="effect_direct_test.html" target="test">$$ selector effects/visualEffect</a></li>
<li><a href="effects_queue_test.html" target="test">effects_queue</a></li>
<li><a href="effects_queue_limit_test.html" target="test">effects_queue_limit</a></li>
<li><a href="effects_toggle_test.html" target="test">Effect.toggle</a></li>
<li><a href="effects2_test.html" target="test">effects2_test</a></li>
<li><a href="effects3_test.html" target="test">effects3_test</a></li>
<li><a href="effects4_test.html" target="test">effects4_test</a></li>
<li><a href="effects5_test.html" target="test">effects5_test</a></li>
<li><a href="effects5b_test.html" target="test">effects5b_test</a></li>
<li><a href="effects6_test.html" target="test">effects6_test</a></li>
<li><a href="effect_shake.html" target="test">effect shake</a></li>
<li><a href="effects_grow_strink_test.html" target="test">Grow/Shrink</a></li>
<li><a href="effects_blind_test.html" target="test">BlindUp/BlindDown</a></li>
<li><a href="effect_scale_test.html" target="test">Effect.Scale</a></li>
<li><a href="effect_puff_test.html" target="test">Effect.Puff</a></li>
<li><a href="effects_float_appear_test.html" target="test">Test for Safari .Appear w/ floats</a></li>
<li><a href="effects_highlight_bg_image.html" target="test">Effect.Highlight keepBackgroundImage option</a></li>
<li><a href="texteffects_test.html" target="test">texteffects_test.html</a></li>
</ul>
<h2>Controls</h2>
<ul>
<li><a href="ajax_autocompleter_test.html" target="test">ajax_autocompleter_test</a></li>
<li><a href="ajax_autocompleter2_test.html" target="test">ajax_autocompleter2_test</a></li>
<li><a href="ajax_inplaceeditor_test.html" target="test">ajax_inplaceeditor_test</a></li>
<li><a href="ajax_inplacecollectioneditor_test.html" target="test">ajax_inplacecollectioneditor_test</a></li>
<li><a href="slider_test.html" target="test">slider_test</a></li>
</ul>
<h2>Drag &amp; Drop</h2>
<ul>
<li><a href="dragdrop_test.html" target="test">dragdrop_test</a></li>
<li><a href="dragdrop2_test.html" target="test">dragdrop2_test</a></li>
<li><a href="dragdrop3_test.html" target="test">dragdrop3_test</a></li>
<li><a href="dragdrop4_test.html" target="test">dragdrop4_test</a></li>
<li><a href="dragdrop5_test.html" target="test">dragdrop5_test</a></li>
<li><a href="dragdrop6_test.html" target="test">dragdrop6_test: snap option</a></li>
<li><a href="dragdrop7_test.html" target="test">dragdrop7_test</a></li>
<li><a href="dragdrop8_test.html" target="test">dragdrop8_test</a></li>
<li><a href="dragdrop9_test.html" target="test">Revert: failure</a></li>
<li><a href="dragdrop_delay_test.html" target="test">dragdrop delay test</a></li>
<li><a href="sortable_test.html" target="test">sortable_test</a></li>
<li><a href="sortable2_test.html" target="test">sortable2_test</a></li>
<li><a href="sortable3_test.html" target="test">sortable3_test</a></li>
<li><a href="sortable4_test.html" target="test">sortable4_test</a></li>
<li><a href="sortable5_test.html" target="test">sortable5_test</a></li>
<li><a href="sortable6_test.html" target="test">sortable5_test</a></li>
<li><a href="sortable_tree_test.html" target="test">Sortable trees</a></li>
</ul>
<h2>Sound (experimental)</h2>
<ul>
<li><a href="sound_test.html" target="test">sound_test.html</a></li>
</ul>
<h2>Miscellaneous</h2>
<ul>
<li><a href="position_clone_test.html" target="test">position_clone_test</a></li>
</ul>
</body>
</html>

124
javascript/scoluos/test/functional/position_clone_test.html Executable file
View File

@@ -0,0 +1,124 @@
<!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>prototype.js Position.clone functional test</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>
<style type="text/css">
.margins { margin:20px; }
.nomargins { margin:0; }
</style>
</head>
<body>
<div id="container" style="position:relative; top:10px; width:300px; height:100px; overflow: auto;">
<div id="container2" style="position:relative; top:10px; width:400px; height:150px; overflow: auto;">
<div id="test1" style="border:1px solid black; position:absolute; left: 100px; top: 10px; width:100px; height:200px;">
abs
</div>
<div id="test2" style="border:1px solid black; position:relative; left: 50px; top: 0px;">
rel
</div>
<div id="test3" style="border:1px solid black; position:static;">
static
</div>
</div>
</div>
<div id="c3" style="position:absolute;top:140px;left:55px;width:100px;height:20px;">
abs-body child
</div>
<p id="p1" style="background-color:#eee;">
unpositioned p
</p>
<script type="text/javascript" language="javascript">
// <![CDATA[
function d(el, marker) {
$('debug').innerHTML =
'orig: ' + Object.inspect(Position.page($(el))) + ', ' +
'clone: ' + Object.inspect(Position.page($(marker)));
}
function testA(el) {
Position.clone(el, 'marker');
d(el, 'marker');
}
function testB(el) {
Element.hide('marker2');
Position.clone(el, 'marker2');
Element.show('marker2');
d(el, 'marker2');
}
function testC(el) {
Position.clone(el, 'marker3');
d(el, 'marker3');
}
function testD(el) {
Position.clone(el, 'marker4');
d(el, 'marker4');
}
// ]]>
</script>
<div id="actions" style="position:absolute;top:400px;">
<a href="#" onclick="Element.toggle('big'); return false;">Toggle page scrolling</a> |
Page margings: <a href="#" onclick="document.body.className = 'margins'">on</a> |
<a href="#" onclick="document.body.className = 'nomargins'">off</a>
<br/><br/>
Absolute marker in position:relative container DIV:<br/>
<a href="#" onclick="testA('test1'); return false;">Mark abs</a> |
<a href="#" onclick="testA('test2'); return false;">Mark rel</a> |
<a href="#" onclick="testA('test3'); return false;">Mark static</a> |
<a href="#" onclick="testA('c3'); return false;">Mark abs-body child</a> |
<a href="#" onclick="testA('p1'); return false;">Mark p</a>
<br/><br/>
Hidden marker (display:none), in position:relative container DIV switched on when clone is finished:<br/>
<a href="#" onclick="testB('test1'); return false;">Mark abs</a> |
<a href="#" onclick="testB('test2'); return false;">Mark rel</a> |
<a href="#" onclick="testB('test3'); return false;">Mark static</a> |
<a href="#" onclick="testB('c3'); return false;">Mark abs-body child</a> |
<a href="#" onclick="testB('p1'); return false;">Mark p</a>
<br/><br/>
Absolute marker, child of BODY:<br/>
<a href="#" onclick="testC('test1'); return false;">Mark abs</a> |
<a href="#" onclick="testC('test2'); return false;">Mark rel</a> |
<a href="#" onclick="testC('test3'); return false;">Mark static</a> |
<a href="#" onclick="testC('c3'); return false;">Mark abs-body child</a> |
<a href="#" onclick="testC('p1'); return false;">Mark p</a>
<br/><br/>
Fixed marker, child of BODY:<br/>
<a href="#" onclick="testD('test1'); return false;">Mark abs</a> |
<a href="#" onclick="testD('test2'); return false;">Mark rel</a> |
<a href="#" onclick="testD('test3'); return false;">Mark static</a> |
<a href="#" onclick="testD('c3'); return false;">Mark abs-body child</a> |
<a href="#" onclick="testD('p1'); return false;">Mark p</a> |
<div id="debug"></div>
</div>
<div id="marker-container" style="position:relative;left:400px;top:20px;width:100px;height:100px;">
<div id="blah" style="top:20px;">
<div id="marker" style="position:absolute;background-color:#f00;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
</div>
<div id="marker2" style="display:none;position:absolute;background-color:#0f0;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
</div>
<div id="marker3" style="position:absolute;background-color:#00f;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
<div id="marker4" style="position:fixed;background-color:#08f;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
<div id="big" style="display:none;height:10000px;"> </div>
</body>
</html>

152
javascript/scoluos/test/functional/slider_test.html Executable file
View File

@@ -0,0 +1,152 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Text effects tests</title>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/scriptaculous.js"></script>
</head>
<body>
<h1>Sliders</h1>
<h2>Standard horizontal slider</h2>
<div id="track1" style="width:200px;background-color:#aaa;height:5px;">
<div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div>
</div>
<p id="debug1"> </p>
<h2>Vertical slider</h2>
<div id="track2" style="height:100px;background-color:#aaa;width:5px;">
<div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div>
</div>
<p id="debug2"> </p>
<h2>Slider with predefined values [2,4,6,8] and a non-default range [2,15]</h2>
<div id="track3" style="width:200px;background-color:#aaa;height:5px;">
<div id="handle3" style="width:5px;height:10px;background-color:#f00;"> </div>
</div>
<p id="debug3"> </p>
<h2>Slider with multiple handles</h2>
<div id="track4" style="width:200px;background-color:#aaa;height:5px;position:relative;">
<div id="handle4-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
<div id="handle4-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
<div id="handle4-3" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div>
</div>
<p id="debug4"> </p>
<h2>Slider with multiple handles and predefined values</h2>
<div id="track5" style="width:200px;background-color:#aaa;height:5px;position:relative;">
<div id="handle5-1" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
<div id="handle5-2" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
<div id="handle5-3" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div>
</div>
<p id="debug5"> </p>
<h2>Slider with multiple handles, external controls, handles are restricted (can't be moved prior/after adjacent handles)</h2>
<div id="track6" style="width:200px;background-color:#aaa;height:5px;position:relative;">
<div id="handle6-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
<div id="handle6-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
</div>
<br/><br/>
<a href="#" onclick="slider6.setValueBy(-0.1);return false;">&lt;--</a>
<a href="#" onclick="slider6.setValueBy(0.1);return false;">--&gt;</a>
<p id="debug6"> </p>
<h2>Fun with spans</h2>
<style>
#track7 div.handle {
background-color:#aaa;
color:#444;
top:0;
left:0;
position:absolute;
z-index:2;
height:100px;
font-size:20px;
}
#track7 div.handle.selected {
background-color:#444;
color:#fff;
}
</style>
<div id="track7" style="width:300px;background-color:#cbf;height:50px;position:relative;z-index:0;">
<div id="handle7-1" class="handle">1</div>
<div id="handle7-2" class="handle">2</div>
<div id="handle7-3" class="handle">3</div>
<div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:50px;z-index:1;"> </div>
<div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:50px;z-index:1;"> </div>
<div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:50px;z-index:1;"> </div>
<div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:50px;z-index:1;"> </div>
</div>
<br/><br/><br/><br/>
<h2>Slider with span and [1,10] range (test for #3731)</h2>
<div id="zoom-track" style="width:300px;background-color:#aaa;height:20px;position:relative;z-index:0;">
<div id="zoom-handle-1" style="position:absolute;background-color:#f00;height:20px;z-index:2">!</div>
<div id="zoom-handle-2" style="position:absolute;background-color:#0f0;height:20px;z-index:2">!</div>
<div id="zoom-track-selected" style="position:absolute;background-color:#00f;height:20px;z-index:1"> </div>
</div>
<!-- FIXME: add more demos here -->
<script type="text/javascript">
// <![CDATA[
new Control.Slider('handle1','track1',{
sliderValue:0.5,
onSlide:function(v){$('debug1').innerHTML='slide: '+v},
onChange:function(v){$('debug1').innerHTML='changed! '+v}});
new Control.Slider('handle2','track2',{axis:'vertical',
onSlide:function(v){$('debug2').innerHTML='slide: '+v},
onChange:function(v){$('debug2').innerHTML='changed! '+v}});
new Control.Slider('handle3','track3',{values:[2,4,6,8],range:$R(2,15),
onSlide:function(v){$('debug3').innerHTML='slide: '+v},
onChange:function(v){$('debug3').innerHTML='changed! '+v}});
new Control.Slider(['handle4-1','handle4-2','handle4-3'],'track4',{
onSlide:function(v){$('debug4').innerHTML='slide: '+v.inspect()},
onChange:function(v){$('debug4').innerHTML='changed! '+v.inspect()}});
new Control.Slider(['handle5-1','handle5-2','handle5-3'],'track5',{values:[0,0.2,0.4,0.6,0.8],
onSlide:function(v){$('debug5').innerHTML='slide: '+v.inspect()},
onChange:function(v){$('debug5').innerHTML='changed! '+v.inspect()}});
var slider6 = new Control.Slider(['handle6-1','handle6-2'],'track6',{
sliderValue:[0.3, 0.8],
restricted:true,
onSlide:function(v){$('debug6').innerHTML='slide: '+v.inspect()},
onChange:function(v){$('debug6').innerHTML='changed! '+v.inspect()}});
new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
{ spans:['span7-1','span7-2'],
startSpan:'span7-start',
endSpan:'span7-end',
range:$R(0,300) });
new Control.Slider(
['zoom-handle-1','zoom-handle-2'],'zoom-track',{
sliderValue:[1,10], range:$R(1,10),
values:[1,2,3,4,5,6,7,8,9,10],
restricted:true,
spans:['zoom-track-selected'] });
// ]]>
</script>
</body>
</html>

148
javascript/scoluos/test/functional/sortable2_test.html Executable file
View File

@@ -0,0 +1,148 @@
<!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 Sortable ghosting functional 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" />
<style>
ul.testlist {
list-style-type:none;
margin:0;
padding:0;
}
ul.testlist li {
width:200px;
font:12px Verdana;
padding:4px;
cursor:move;
}
ul.testlist li.over {
background-color:#fcb;
}
ul.testlist li img {
float:left;
margin-right:8px;
}
div.dropmarker {
height:6px;
width:200px;
background: url(dropmarker.png) left top;
margin-top:-3px;
margin-left:-5px;
z-index:1000;
overflow: hidden;
}
#testlist4 li {
float:left;
}
</style>
</head>
<body>
<h1>script.aculo.us Sortable ghosting functional test file</h1>
<h2>Ghosting</h2>
<ul id="testlist" class="testlist">
<li id="item_1"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_2"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_3"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_4"><img src="icon.png" alt=""/> elit</li>
<li id="item_5"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_6"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_7"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_8"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
<p id="testlist_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('testlist',{ghosting:true,constraint:false,hoverclass:'over',
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<h2>No ghosting</h2>
<ul id="testlist2" class="testlist">
<li id="item_9"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_10"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_11"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_12"><img src="icon.png" alt=""/> elit</li>
<li id="item_13"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_14"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_15"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_16"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
<p id="testlist2_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('testlist2',{ghosting:false,constraint:false,hoverclass:'over',
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist2_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<h2>Ghosting (inside position:relative container)</h2>
<div style="position:relative;left:100px;top:-5px;">
<ul id="testlist3" class="testlist">
<li id="item_17"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_18"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_19"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_20"><img src="icon.png" alt=""/> elit</li>
<li id="item_21"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_22"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_23"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_24"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
</div>
<p id="testlist3_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('testlist3',{ghosting:true,constraint:false,
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist3_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<h2>Ghosting (inside position:relative container)</h2>
<div style="position:relative;left:100px;top:-5px;">
<ul id="testlist4" class="testlist">
<li id="item_417"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_418"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_419"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_420"><img src="icon.png" alt=""/> elit</li>
<li id="item_421"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_422"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_423"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_424"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
</div>
<p id="testlist4_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('testlist4',{overlap:'horizontal',ghosting:true,constraint:false,
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist4_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<div id="debug"></div>
</body>
</html>

40
javascript/scoluos/test/functional/sortable3_test.html Executable file
View File

@@ -0,0 +1,40 @@
<!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 sortable functional 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" />
<style type="text/css" media="screen">
ul { height: 100px; border:1px dotted #888; }
</style>
</head>
<body>
<h1>script.aculo.us Sortable two-lists w/ dropOnEmpty functional test file</h1>
<ul id="thelist1">
<li id="thelist1_1">Hey there! I'm item#1/1</li>
<li id="thelist1_2">Hey there! I'm item#1/2</li>
<li id="thelist1_3">Hey there! I'm item#1/3</li>
</ul>
<ul id="thelist2">
</ul>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('thelist1',{containment:['thelist1','thelist2'], dropOnEmpty:true});
Sortable.create('thelist2',{containment:['thelist1','thelist2'], dropOnEmpty:true});
// ]]>
</script>
<a href="#" onclick="alert(Sortable.serialize('thelist1'));return false;">Serialize sortable1</a>
<a href="#" onclick="alert(Sortable.serialize('thelist2'));return false;">Serialize sortable2</a>
<div id="debug"></div>
</body>
</html>

88
javascript/scoluos/test/functional/sortable4_test.html Executable file
View File

@@ -0,0 +1,88 @@
<!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 sortable functional 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" />
<style type="text/css" media="screen">
ul.sortablelist {
list-style-image:none;
list-style-type:none;
margin-top:5px;
margin:0px;
padding:0px;
}
ul.sortabledemo li {
padding:0px;
margin:0px;
}
span.handle {
background-color: #E8A400;
color:white;
cursor: move;
}
li.green {
background-color: #ECF3E1;
border:1px solid #C5DEA1;
cursor: move;
}
li.orange {
border:1px solid #E8A400;
background-color: #FFF4D8;
}
</style>
</head>
<body>
<h1>script.aculo.us: Two floating sortables with containment and dropOnEmpty</h1>
<div style="height:200px;">
<div style="float:left;">
<h3>This is the first list</h3>
<ul class="sortabledemo" id="firstlist" style="height:150px;width:200px;">
<li class="green" id="firstlist_firstlist1">Item 1 from first list.</li>
<li class="green" id="firstlist_firstlist2">Item 2 from first list.</li>
<li class="green" id="firstlist_firstlist3">Item 3 from first list.</li>
</ul>
</div>
<div style="float:left;">
<h3>And now the second list</h3>
<ul class="sortabledemo" id="secondlist" style="height:150px;width:200px;">
<li class="orange" id="secondlist_secondlist1">
<span class="handle">DRAG HERE</span> Item 1 from second list.
</li>
<li class="orange" id="secondlist_secondlist2">
<span class="handle">DRAG HERE</span> Item 2 from second list.
</li>
<li class="orange" id="secondlist_secondlist3">
<span class="handle">DRAG HERE</span> Item 3 from second list.
</li>
</ul>
</div>
</div>
<hr style="clear:both" />
<pre id="firstlist_debug"></pre>
<pre id="secondlist_debug"></pre>
<script type="text/javascript">
// <![CDATA[
Sortable.create("firstlist",
{dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false,
onChange:function(){$('firstlist_debug').innerHTML = Sortable.serialize('firstlist') }});
Sortable.create("secondlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist"],constraint:false,
onChange:function(){$('secondlist_debug').innerHTML = Sortable.serialize('secondlist') }});
// ]]>
</script>
</body>
</html>

43
javascript/scoluos/test/functional/sortable5_test.html Executable file
View File

@@ -0,0 +1,43 @@
<!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 sortable functional 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>
<div id="container_div">
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
var new_ul_id = 'new_id_123';
var ul = document.createElement("ul");
var ul_id = document.createAttribute("id");
ul_id.nodeValue = new_ul_id;
ul.setAttributeNode(ul_id);
var li = document.createElement("li");
li.setAttribute("id", "test_1");
li.appendChild(document.createTextNode("blah1"));
ul.appendChild(li);
var li2 = document.createElement("li");
li2.setAttribute("id", "test_2");
li2.appendChild(document.createTextNode("blah2"));
ul.appendChild(li2);
$('container_div').appendChild(ul);
Sortable.create(new_ul_id, { onUpdate: function() { alert(Sortable.serialize('new_id_123')); } });
// ]]>
</script>
</body>
</html>

148
javascript/scoluos/test/functional/sortable6_test.html Executable file
View File

@@ -0,0 +1,148 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>script.aculo.us Drag and drop functional 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>
<style type="text/css" media="screen">
#thelist li { background: green; margin:5px; padding: 30px; }
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
</style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<p>Scroll window down to test autoscrolling inside scrollable elements when window is scrolled</p>
<h2>Draggables/Droppables</h2>
<div style="width:400px;height:400px;overflow:scroll;position:relative;" id="scroll-container">
<ul id="thelist2" style="padding: 2px; background:red;">
<li>Relatively here!</li>
<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</div>
<h1> Some space in between</h1>
<div style="width:400px;height:400px;overflow:scroll" id="scroll-container-mod">
<ul id="thelist2-mod" style="padding: 2px; background:red;">
<li>Relatively here!</li>
<li><input onclick="this.checked = !this.checked" name="y" id="y" type="checkbox"/>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</div>
<pre id="debug"></pre>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
Position.includeScrollOffsets = true;
Sortable.create('thelist2',{scroll:'scroll-container'});
Sortable.create('thelist2-mod',{scroll:'scroll-container-mod'});
// ]]>
</script>
</body>
</html>

57
javascript/scoluos/test/functional/sortable_nested_test.html Executable file
View File

@@ -0,0 +1,57 @@
<html>
<head>
<title>Nested Sortable element bug</title>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<ul id ="route">
<li id="39" class="segment">
<h2 id="39_title"> <span id="39_note" class="segment_title">COLLEGE AVE</span></h2>
<ul id="39_entries">
<li id="39:3" class="entry">625</li>
<li id="39:4" class="entry">617</li>
<li id="39:5" class="entry">601</li>
</ul>
</li>
<li id="40" class="segment">
<h2 id="40_title">Right <span id="40_note" class="segment_title">COLLEGE CT</span></h2>
<ul id="40_entries">
<li id="40:7" class="entry">14</li>
<li id="40:8" class="entry">27</li>
<li id="40:9" class="entry">30</li>
</ul>
</li>
</ul>
<script type="text/javascript">
Sortable.create(
"route",
{
handle:'segment_title',
format: /([0-9]+)/
}
);
Sortable.create("39_entries", {
dropOnEmpty:true,
constraint:false,
format: /[0-9]+:([0-9]+)/
}
);
Sortable.create("40_entries", {
dropOnEmpty:true,
constraint:false,
format: /[0-9]+:([0-9]+)/
}
);
</script>
</body>
</html>

141
javascript/scoluos/test/functional/sortable_test.html Executable file
View File

@@ -0,0 +1,141 @@
<!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 sortable functional 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" />
<style type="text/css" media="screen">
#thelist li { background: green; margin:5px; padding: 30px; }
div.dropmarker {
height:6px;
width:200px;
background: url(dropmarker.png) left top;
margin-top:-3px;
margin-left:-5px;
z-index:1000;
overflow: hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
var callsToOnUpdate = 0;
</script>
</head>
<body>
<ul id="thelist">
<li id="thelist_1">Hey there! I'm item#1</li>
<li id="thelist_2">Hey there! I'm item#2</li>
<li id="thelist_3">Hey there! I'm item#3</li>
</ul>
<a href="#" onclick="Sortable.create('thelist',{onUpdate:function(){$('debug').update(++callsToOnUpdate+' call(s) to onUpdate')}});return false;">Create sortable</a> |
<a href="#" onclick="Sortable.destroy('thelist');return false;">Destroy sortable</a> |
<a href="#" onclick="alert(Sortable.serialize('thelist'));return false;">Serialize sortable</a>
<ul id="thehandlelist">
<li id="thehandlelist_1">Hey there! I'm item#1<span class="handle">HANDLE</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
</li>
<li id="thehandlelist_2">Hey there! I'm item#2<span class="handle">HANDLE</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
</li>
<li id="thehandlelist_3">Hey there! I'm item#3<span class="handle">HANDLE</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
</li>
</ul>
<a href="#" onclick="Sortable.create('thehandlelist',{handle:'handle',onUpdate:function(){$('debug').update(++callsToOnUpdate+' call(s) to onUpdate')}});return false;">Create sortable</a> |
<a href="#" onclick="Sortable.destroy('thehandlelist');return false;">Destroy sortable</a> |
<a href="#" onclick="alert(Sortable.serialize('thehandlelist'));return false;">Serialize sortable</a>
<p id="debug">no calls to onUpdate</p>
<ul id="sortable_elements_handles">
<li id="s_1">s1 <span class="handle" id="h_1">handle</span></li>
<li id="s_2">s2 <span class="handle" id="h_2">handle</span></li>
<li id="s_3">s3 <span class="handle" id="h_3">handle</span></li>
<li id="s_4">s4 <span class="handle" id="h_4">handle</span></li>
<li id="s_5">s5 <span class="handle" id="h_5">handle</span></li>
<li id="s_6">s6 <span class="handle" id="h_6">handle</span></li>
<li id="s_7">s7 <span class="handle" id="h_7">handle</span></li>
<li id="s_8">s8 <span class="handle" id="h_8">handle</span></li>
<li id="s_9">s9 <span class="handle" id="h_9">handle</span></li>
<li id="s_10">s10 <span class="handle" id="h_10">handle</span></li>
</ul>
<script type="text/javascript" charset="utf-8">
function initializePreselected(){
Sortable.create('sortable_elements_handles',{
handle: 'handle',
handles: ['h_1','h_2','h_3','h_4','h_5','h_6','h_7','h_8','h_9','h_10'],
elements: ['s_1','s_2','s_3','s_4','s_5','s_6','s_7','s_8','s_9','s_10']
});
}
function initializeNormal(){
Sortable.create('sortable_elements_handles',{
handle: 'handle'
});
}
function benchmark(method,times){
var now = new Date();
times.times(method);
$('benchmark').update((new Date()-now)+'ms');
}
</script>
20 times: <a href="#" onclick="benchmark(function(){initializePreselected()},20);return false">Init with Preselection</a> |
<a href="#" onclick="benchmark(function(){initializeNormal()},20);return false">Init normally</a> <span id="benchmark"></span>
</body>
</html>

185
javascript/scoluos/test/functional/sortable_tree_test.html Executable file
View File

@@ -0,0 +1,185 @@
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sortable tree test</title>
<script src="../../lib/prototype.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script src="../../src/scriptaculous.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<style type="text/css">
ul {padding-top:4px; padding-bottom: 2px; border: 1px solid #ccf;}
li {border: 1px solid #fcc;}
</style>
</head>
<body>
<a href="#" onclick="alert(Sortable.serialize('menu'));return false">serialize 1</a>
<ul id="menu" style="padding-top: 6px; padding-bottom: 6px;">
<li class="edit_link level0" id="t1_7">
System
<ul class="edit_list">
<li class="edit_link level1" id="t1_8">
Page Not Found
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t1_9">
Translation Not Available
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level0" id="t1_10">
Main Menu
<ul class="edit_list">
<li class="edit_link level1" id="t1_1">
Welcome
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t1_2">
Software
<ul class="edit_list">
<li class="edit_link level2" id="t1_4">
Serial Console
<ul class="edit_list">
<li class="edit_link level3" id="t1_6">
Features
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level2" id="t1_5">
Property Manager
<ul class="edit_list"></ul>
</li>
<li class="edit_link level2" id="t1_11">
Geomap
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level1" id="t1_12">
Services
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t1_13">
Software
<ul class="edit_list">
<li class="edit_link level2" id="t1_14">
Serial Console
<ul class="edit_list">
<li class="edit_link level3" id="t1_15">
Features
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level2" id="t1_16">
Property Manager
<ul class="edit_list"></ul>
</li>
<li class="edit_link level2" id="t1_17">
Geomap
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level1" id="t1_18">
Services
<ul class="edit_list"></ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
//<![CDATA[
Sortable.create('menu', {tree:true,scroll:window});
//]]>
</script>
<ul id="menu2" style="padding-top: 6px; padding-bottom: 6px;">
<li class="edit_link level0" id="t2_7">
System
<ul class="edit_list">
<li class="edit_link level1" id="t2_8">
Page Not Found
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t2_9">
Translation Not Available
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level0" id="t2_10">
Main Menu
<ul class="edit_list">
<li class="edit_link level1" id="t2_1">
Welcome
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t2_2">
Software
<ul class="edit_list">
<li class="edit_link level2" id="t2_4">
Serial Console
<ul class="edit_list">
<li class="edit_link level3" id="t2_6">
Features
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level2" id="t2_5">
Property Manager
<ul class="edit_list"></ul>
</li>
<li class="edit_link level2" id="t2_11">
Geomap
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level1" id="t2_12">
Services
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t2_13">
Software
<ul class="edit_list">
<li class="edit_link level2" id="t2_14">
Serial Console
<ul class="edit_list">
<li class="edit_link level3" id="t2_15">
Features
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level2" id="t2_16">
Property Manager
<ul class="edit_list"></ul>
</li>
<li class="edit_link level2" id="t2_17">
Geomap
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level1" id="t2_18">
Services
<ul class="edit_list"></ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
//<![CDATA[
Sortable.create('menu2', {tree:true,scroll:window});
//]]>
</script>
</body>
</html>

21
javascript/scoluos/test/functional/sound_test.html Executable file
View File

@@ -0,0 +1,21 @@
<!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 Sound functional 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>
</head>
<body>
<h1>script.aculo.us Sound test file</h1>
<a href="#" onclick="Sound.play('sword.mp3'); return false">play sound (parallel)</a>
<a href="#" onclick="Sound.play('sword.mp3',{replace:true}); return false">play sound (overwrite)</a>
<a href="#" onclick="Sound.disable(); return false">Mute</a>
<a href="#" onclick="Sound.enable(); return false">Enable sounds</a>
</body>
</html>

BIN
javascript/scoluos/test/functional/sword.mp3 Executable file
View File

Binary file not shown.

52
javascript/scoluos/test/functional/texteffects_test.html Executable file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Text effects tests</title>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/scriptaculous.js"></script>
<style>
div#many_test span { font-size:40pt; color: white; background:black; width:100px; float:left; position: relative; }
</style>
</head>
<body>
<h1 id="h1_text" style="font:20pt Lucida Grande;color:#fff;text-align:center;background-color:#482;">
Maybe this is useful? <img src="icon.png" alt="blah"/> Dunno...
</h1>
<a href="#" onclick="Effect.multiple('h1_text', Effect.Appear, {speed:0.05, afterFinishInternal:function(){}}); return false;">Appear</a> |
<a href="#" onclick="Effect.multiple('h1_text', Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
<a href="#" onclick="Effect.multiple('h1_text', Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a> |
<a href="#" onclick="alert($('h1_text').innerHTML); return false;">show H1 innerHTML</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="p_text" style="font:12px Verdana;color:red;font-weight:bold;">THIS IS A WARNING!</p>
<p>
<a href="#" onclick="Effect.multiple('p_text', Effect.Appear, {speed:0.05, afterFinishInternal:function(){}}); return false;">Appear</a> |
<a href="#" onclick="Effect.multiple('p_text', Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
<a href="#" onclick="Effect.multiple('p_text', Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a>
</p>
<div id="many_test" style="height:50px;">1234567890ABCDEFG</div>
<div style="clear:both;"> </div>
<a href="#" onclick="Effect.multiple('many_test', Effect.Appear, {speed:0.5, duration:3.0, afterFinishInternal:function(){}}); return false;">Appear</a> |
<a href="#" onclick="Effect.multiple('many_test', Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
<a href="#" onclick="Effect.multiple($('many_test').childNodes, Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a> |
<a href="#" onclick="Effect.multiple($('many_test').childNodes, Effect.Highlight, {speed:0.07, afterFinishInternal:function(){}}); return false;">Highlight</a> |
<a href="#" onclick="Effect.multiple($('many_test').childNodes, Effect.BlindDown, {speed:0.15, afterFinishInternal:function(){}}); return false;">BlindDown</a>
<script type="text/javascript" language="javascript">
// <![CDATA[
Effect.tagifyText('h1_text');
Effect.tagifyText('p_text');
Effect.tagifyText('many_test');
// ]]>
</script>
<br/><br/>
<a href="#" onclick="Effect.multiple(document.getElementsByTagName('span'), Effect.Fade, {speed:0.04, afterFinishInternal:function(){}}); return false;">Fade all spans on page</a>
<p id="debug"> <p>
</body>
</html>

20
javascript/scoluos/test/run_functional_tests.html Executable file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>script.aculo.us functional tests</title>
</head>
<frameset cols="250,*">
<frame name="controls" src="functional/index.html" />
<frame name="test" />
</frameset>
<noframes>
<body>
Heya, 1995!
</body>
</noframes>
</html>

20
javascript/scoluos/test/run_unit_tests.html Executable file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>script.aculo.us Unit Test Runner</title>
</head>
<frameset cols="250,*">
<frame name="controls" src="unit/index.html" />
<frame name="test" />
</frameset>
<noframes>
<body>
Heya, 1995!
</body>
</noframes>
</html>

90
javascript/scoluos/test/test.css Executable file
View File

@@ -0,0 +1,90 @@
body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
font-family: sans-serif;
}
body {
font-size:0.8em;
}
.navigation {
background: #9DC569;
color: #fff;
}
.navigation h1 {
font-size: 20px;
}
.navigation h2 {
font-size: 16px;
font-weight: normal;
margin: 0;
border: 1px solid #e8a400;
border-bottom: 0;
background: #ffc;
color: #E8A400;
padding: 8px;
padding-bottom: 0;
}
.navigation ul {
margin-top: 0;
border: 1px solid #E8A400;
border-top: none;
background: #ffc;
padding: 8px;
margin-left: 0;
}
.navigation ul li {
font-size: 12px;
list-style-type: none;
margin-top: 1px;
margin-bottom: 1px;
color: #555;
}
.navigation a {
color: #ffc;
}
.navigation ul li a {
color: #000;
}
#log {
padding-bottom: 1em;
border-bottom: 2px solid #000;
margin-bottom: 2em;
}
#logsummary {
margin-bottom: 1em;
padding: 1ex;
border: 1px solid #000;
font-weight: bold;
}
#logtable {
width:100%;
border-collapse: collapse;
border: 1px dotted #666;
}
#logtable td, #logtable th {
text-align: left;
padding: 3px 8px;
border: 1px dotted #666;
}
#logtable .passed {
background-color: #cfc;
}
#logtable .failed, #logtable .error {
background-color: #fcc;
}
#logtable .nameCell {
cursor: pointer;
}

1
javascript/scoluos/test/unit/_ajax_inplaceeditor_ipce_alt_text.html Executable file
View File

@@ -0,0 +1 @@
ntbe

1
javascript/scoluos/test/unit/_ajax_inplaceeditor_result.html Executable file
View File

@@ -0,0 +1 @@
Server received: To be edited

1
javascript/scoluos/test/unit/_ajax_inplaceeditor_result2.html Executable file
View File

@@ -0,0 +1 @@
New to be edited - edited

1
javascript/scoluos/test/unit/_ajax_inplaceeditor_tagged.html Executable file
View File

@@ -0,0 +1 @@
<span>New to be edited - edited</span>

1
javascript/scoluos/test/unit/_ajax_inplaceeditor_text.html Executable file
View File

@@ -0,0 +1 @@
Text from server

20
javascript/scoluos/test/unit/_ajax_updater_result.html Executable file
View File

@@ -0,0 +1,20 @@
Test text
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
alert('fragment1 hit!');
// ]]>
</script>
more test text
<script>alert('fragment2 hit!')</script>
even more test text
<script type="text/javascript">
alert('fragment3 hit!');
</script> some other test text

11
javascript/scoluos/test/unit/_autocomplete_result.html Executable file
View File

@@ -0,0 +1,11 @@
<ul>
<li>test1</li><li>test2</li>
<li>test3</li>
<li><b>BOLD</b></li>
<li><span class="informal">(GET ME NOT)</span>(GET &lt;ME&gt; INSTEAD)</li>
<li>Here we have <a href="_autocomplete_result.html">a link</a> which should work</li>
<li>Here we have some international ©∏Á®Äç†∑rß</li>
</ul>

1
javascript/scoluos/test/unit/_autocomplete_result_nobr.html Executable file
View File

@@ -0,0 +1 @@
<ul><li>test1</li><li>test2</li><li>test3</li><li><b>BOLD</b></li><li><span class="informal">(GET ME NOT)</span>(GET &lt;ME&gt; INSTEAD)</li><li>Here we have <a href="_autocomplete_result.html">a link</a> which should work</li><li>Here we have some international ©∏Á®Äç†∑rß</li></ul>

243
javascript/scoluos/test/unit/ajax_autocompleter_test.html Executable file
View File

@@ -0,0 +1,243 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- vim:expandtab=on
-->
<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" />
<style>
.selected { background-color: #888; }
</style>
</head>
<body>
<h1>script.aculo.us Unit test file</h1>
<p>
Tests for Ajax.Autocompleter in controls.js.
</p>
<!-- Log output -->
<div id="testlog"> </div>
<input id="ac_input" type="text" autocomplete="off" />
<div id="ac_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
<input id="ac_input_br" type="text" autocomplete="off" />
<div id="ac_update_br" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
<input id="ac2_input" type="text" autocomplete="off" />
<div id="ac2_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
<input id="actoken_input" type="text" autocomplete="off" />
<div id="actoken_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
<input id="dummy_element" type="text" autocomplete="off" />
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Test.Unit.Runner({
// Integration test, tests the entire cycle
testAjaxAutocompleter: function() { with(this) {
var ac = new Ajax.Autocompleter('ac_input','ac_update','_autocomplete_result.html',
{ method: 'get' }); //override so we can use a static for the result
assertInstanceOf(Ajax.Autocompleter, ac);
// box not visible
assertNotVisible('ac_update');
// focus, but box not visible
Event.simulateMouse('ac_input', 'click');
assertNotVisible('ac_update');
Event.simulateKeys('ac_input','abcdefg');
assertEqual('abcdefg', $('ac_input').value);
// check box popping up on input
wait(1000, function() { with(this) {
assertVisible('ac_update');
assertEqual('test1', $('ac_update').firstChild.firstChild.innerHTML);
assertEqual('test2', $('ac_update').firstChild.firstChild.nextSibling.innerHTML);
// intl. characters return (UTF-8)
assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update').firstChild.lastChild.innerHTML);
// first entry should be selected
assert(Element.hasClassName($('ac_update').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
// second entry should be selected
assert(!Element.hasClassName($('ac_update').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
assert(Element.hasClassName($('ac_update').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
// check selecting with <TAB>
Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_TAB});
assertEqual('test2',$('ac_input').value);
// check box going away
wait(500, function() { with(this) {
assertNotVisible('ac_update');
// check selecting with mouse click
Event.simulateKeys('ac_input','3');
assertEqual('test23', $('ac_input').value);
wait(1000, function() { with(this) {
assertVisible('ac_update');
Event.simulateMouse($('ac_update').firstChild.childNodes[4],'click');
wait(1000, function() { with(this) {
// tests if removal of 'informal' nodes and HTML escaping works
assertEqual('(GET <ME> INSTEAD)',$('ac_input').value);
assertNotVisible('ac_update');
// check cancelling with <ESC>
Event.simulateKeys('ac_input','abcdefg');
wait(1000, function() { with(this) {
assertVisible('ac_update');
assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_ESC});
assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
}});
}});
}});
}});
}});
}},
testAfterUpdateElement: function() { with(this) {
var ac = new Ajax.Autocompleter('ac2_input','ac2_update','_autocomplete_result.html',
{ method: 'get',
afterUpdateElement: function(element,selectedElement) {
element.value = 'afterupdate:' + selectedElement.tagName;
}
});
assertInstanceOf(Ajax.Autocompleter, ac);
Event.simulateMouse('ac2_input', 'click');
Event.simulateKeys('ac2_input','abcdefg');
wait(1000, function() { with(this) {
assertVisible('ac2_update');
Event.simulateKey('ac2_input','keypress',{keyCode:Event.KEY_TAB});
assertEqual('afterupdate:LI',$('ac2_input').value);
}});
}},
testTokenizing: function() { with(this) {
var actoken = new Ajax.Autocompleter('actoken_input','ac_update','_autocomplete_result.html',
{ tokens:',', method: 'get' });
assertInstanceOf(Ajax.Autocompleter, actoken);
Event.simulateKeys('actoken_input','abc');
wait(1000, function() { with(this) {
Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
assertEqual('test1',$('actoken_input').value);
Event.simulateKeys('actoken_input',',abc');
wait(1000, function() { with(this) {
Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_DOWN});
Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
assertEqual('test1,test2',$('actoken_input').value);
// Simulating KEY_LEFT's prior to a 'b' doesn't work! So slightly ugly here...
$('actoken_input').value = 'test1b,test2';
actoken.onObserverEvent();
wait(1000, function() { with(this) {
for (var index = 0; index < 2; ++index)
Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_DOWN});
Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_TAB});
assertEqual('test3,test2', $('actoken_input').value);
}});
}});
}});
}},
// Same integration test, results has no linebreaks
testAjaxAutocompleterNoLinebreaksInResult: function() { with(this) {
var ac = new Ajax.Autocompleter('ac_input_br','ac_update_br','_autocomplete_result_nobr.html',
{ method: 'get' }); //override so we can use a static for the result
assertInstanceOf(Ajax.Autocompleter, ac);
// box not visible
assertNotVisible('ac_update_br');
// focus, but box not visible
Event.simulateMouse('ac_input_br', 'click');
assertNotVisible('ac_update_br');
Event.simulateKeys('ac_input_br','abcdefg');
assertEqual('abcdefg', $('ac_input_br').value);
// check box popping up on input
wait(1000, function() { with(this) {
assertVisible('ac_update_br');
assertEqual('test1', $('ac_update_br').firstChild.firstChild.innerHTML);
assertEqual('test2', $('ac_update_br').firstChild.firstChild.nextSibling.innerHTML);
// intl. characters return (UTF-8)
assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update_br').firstChild.lastChild.innerHTML);
// first entry should be selected
assert(Element.hasClassName($('ac_update_br').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
// second entry should be selected
assert(!Element.hasClassName($('ac_update_br').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
assert(Element.hasClassName($('ac_update_br').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
// check selecting with <TAB>
Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_TAB});
assertEqual('test2',$('ac_input_br').value);
// check box going away
wait(500, function() { with(this) {
assertNotVisible('ac_update_br');
// check selecting with mouse click
Event.simulateKeys('ac_input_br','3');
assertEqual('test23', $('ac_input_br').value);
wait(1000, function() { with(this) {
assertVisible('ac_update_br');
Event.simulateMouse($('ac_update_br').firstChild.childNodes[4],'click');
wait(1000, function() { with(this) {
// tests if removal of 'informal' nodes and HTML escaping works
assertEqual('(GET <ME> INSTEAD)',$('ac_input_br').value);
assertNotVisible('ac_update_br');
// check cancelling with <ESC>
Event.simulateKeys('ac_input_br','abcdefg');
wait(1000, function() { with(this) {
assertVisible('ac_update_br');
assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_ESC});
assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
}});
}});
}});
}});
}});
}}
});
// ]]>
</script>
</body>
</html>

895
javascript/scoluos/test/unit/ajax_inplaceeditor_test.html Executable file
View File

@@ -0,0 +1,895 @@
<!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 <code>Ajax.InPlaceEditor</code> and <code>Ajax.InPlaceCollectionEditor</code> in controls.js
</p>
<!-- Log output -->
<div id="testlog"> </div>
<h1 id="tobeedited">To be edited</h1>
<a id="tobeeditedEditControl" href="#">edit</a>
<p id="newtbe">New to be edited</p>
<p id="newtbe_external">External control for it</p>
<p id="contains_ampersand">Me & Myself</p>
<div id="tobeeditedMultiLine">First line<br/>
Second line<br/>
Third line</div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
var IPCE_COLLECTION = [
['tbe', 'To be edited'],
['ntbe', 'New to be edited'],
['ntbe2', 'New to be edited 2'],
['ntbe3', 'New to be edited 3']
];
new Test.Unit.Runner({
setup: function() { with(this) {
inPlaceEditor = new Ajax.InPlaceEditor($('tobeedited'), '_ajax_inplaceeditor_result.html', {
externalControl: $('tobeeditedEditControl'),
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
inPlaceEditorMultiLine = new Ajax.InPlaceEditor($('tobeeditedMultiLine'), '_ajax_inplaceeditor_result.html', {
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
}},
teardown: function() { with(this) {
inPlaceEditor.dispose();
inPlaceEditorMultiLine.dispose();
}},
// Original-version tests, still pass thx to backward compatibility
// Integration test, tests the entire cycle
testInPlaceEditor: function() { with(this) {
Event.simulateMouse('tobeedited','click');
assertHidden($('tobeedited'));
assertNotNull(document.forms[0]);
assertEqual("cancel", document.forms[0].lastChild.innerHTML);
assertVisible(document.forms[0]);
Event.simulateMouse(document.forms[0].lastChild,'click');
assertNull(document.forms[0]);
assertVisible($('tobeedited'));
assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
Event.simulateMouse('tobeedited','mouseover');
Event.simulateMouse('tobeedited','click');
assertEqual("INPUT", document.forms[0].firstChild.tagName);
assertEqual("To be edited", document.forms[0].firstChild.value);
assertEqual("INPUT", document.forms[0].childNodes[1].tagName);
assertEqual("submit", document.forms[0].childNodes[1].type);
assertEqual("To be edited", document.forms[0].firstChild.value);
assert(Element.hasClassName(document.forms[0], 'inplaceeditor-form'),
"form doesn't have proper class: " + document.forms[0].className);
Event.simulateMouse(document.forms[0].childNodes[1],'click');
assertVisible($('tobeedited'));
assertEqual("Saving...", $('tobeedited').innerHTML);
assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
assert(Element.hasClassName($('tobeedited'), 'inplaceeditor-saving'),
"doesn't have saving class");
wait(1000, function() {
assertEqual("Server received: To be edited", $('tobeedited').innerHTML);
assertNull(document.forms[0]);
assertVisible($('tobeedited'));
assert(!Element.hasClassName($('tobeedited'), 'inplaceeditor-saving'));
});
}},
testHovering: function() { with(this) {
Event.simulateMouse('tobeedited','mouseover');
assertEqual("rgb(255, 255, 153)", Element.getStyle('tobeedited','background-color'));
Event.simulateMouse('tobeedited','mouseout');
wait(1100, function() {
assertEqual("transparent", Element.getStyle('tobeedited','background-color'),
"should be transparent after mouse leaves element");
Event.simulateMouse('tobeedited','click');
})
}},
testLoadsTextFromServer: function() { with(this) {
inPlaceEditor.options.loadTextURL = '_ajax_inplaceeditor_text.html';
inPlaceEditor.enterEditMode();
assertEqual('Loading...', inPlaceEditor._form.value.value);
assert(inPlaceEditor._form.value.disabled);
assert(Element.hasClassName(inPlaceEditor._form, 'inplaceeditor-loading'));
wait(1000, function() {
assertEqual('Text from server', inPlaceEditor._form.value.value);
assert(!inPlaceEditor._form.value.disabled);
});
}},
testDisposesProperly: function() { with(this) {
assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
inPlaceEditor.dispose();
assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
assertVisible($('tobeedited'));
Event.simulateMouse('tobeedited','click');
assertVisible($('tobeedited'));
}},
testUsesTextAreaWhenMoreThanOneRows: function() { with(this) {
inPlaceEditor.options.rows = 5;
inPlaceEditor.enterEditMode();
assertEqual("TEXTAREA", document.forms[0].firstChild.tagName);
assertEqual("BR", document.forms[0].childNodes[1].tagName);
}},
testCanSpecifyAllTextsThroughOptions: function() { with(this) {
// swedish translation ;-)
inPlaceEditor.options.okText = "spara";
inPlaceEditor.options.cancelText = "avbryt";
inPlaceEditor.options.savingText = "Sparar...";
inPlaceEditor.enterEditMode();
assertEqual("spara", document.forms[0].lastChild.previousSibling.value);
assertEqual("avbryt", document.forms[0].lastChild.innerHTML);
inPlaceEditor.showSaving();
assertEqual("Sparar...", $('tobeedited').innerHTML);
}},
testCanSpecifyFormIdThroughOptions: function() { with(this) {
inPlaceEditor.enterEditMode();
// default form id
assertEqual("tobeedited-inplaceeditor", document.forms[0].id);
inPlaceEditor.leaveEditMode();
inPlaceEditor.options.formId = "myFormId";
inPlaceEditor.enterEditMode();
assertEqual("myFormId", document.forms[0].id);
}},
testCantEditWhileSaving: function() { with(this) {
inPlaceEditor.prepareSubmission();
Event.simulateMouse('tobeedited','mouseover');
assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
Event.simulateMouse('tobeedited','click');
assertVisible($('tobeedited'));
}},
testCallbackFunctionGetsCalled: function() { with(this) {
var called = false;
inPlaceEditor.options.callback = function(form) {
called = true;
}
Event.simulateMouse('tobeedited','click');
Event.simulateMouse(document.forms[0].childNodes[1],'click');
assert(called, "callback was not called");
}},
testCanUseExternalElementToGoIntoEditMode: function() { with(this) {
Event.simulateMouse('tobeeditedEditControl','click');
assertNotNull(document.forms[0], "external control didn't work");
// doesn't work if you click it again while in edit mode
Event.simulateMouse('tobeeditedEditControl','click');
assertNull(document.forms[1], "external control created two forms");
assertNotVisible($('tobeeditedEditControl'));
Event.simulateMouse(document.forms[0].childNodes[2],'click');
assertVisible($('tobeeditedEditControl'));
}},
// Rewritten-version tests
testControlOptions: function() {with(this) {
// Default, then explicit default-equivalent, settings
[{}, { okControl: 'button', cancelControl: 'link' }].each(function(opts) {
var ipe = new Ajax.InPlaceEditor('newtbe', '', opts);
Event.simulateMouse('newtbe', 'click');
var submits = $('newtbe-inplaceeditor').getInputs('submit');
assertEqual(1, submits.length, 'Not just one submit');
assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, submits[0].value, 'Incorrect button label');
assert(submits[0].hasClassName('editor_ok_button'), 'Missing class name on ok button');
var links = $$('#newtbe-inplaceeditor a');
assertEqual(1, links.length, 'Not just one link');
assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, links[0].firstChild.nodeValue, 'Incorrect cancel link text');
assert(links[0].href.endsWith('#'), 'Incorrect cancel link href');
assert(links[0].hasClassName('editor_cancel_link'), 'Missing class name on cancel link');
ipe.dispose();
});
// Reverse: ok link, cancel button
var ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: 'link', cancelControl: 'button' });
Event.simulateMouse('newtbe', 'click');
var links = $$('#newtbe-inplaceeditor a');
assertEqual(1, links.length, 'Not just one link');
assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, links[0].firstChild.nodeValue, 'Incorrect ok link text');
assert(links[0].href.endsWith('#'), 'Incorrect ok link href');
assert(links[0].hasClassName('editor_ok_link'), 'Missing class name on ok link');
var submits = $('newtbe-inplaceeditor').getInputs('submit');
assertEqual(1, submits.length, 'Not just one submit');
assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, submits[0].value, 'Incorrect button label');
assert(submits[0].hasClassName('editor_cancel_button'), 'Missing class name on cancel button');
ipe.dispose();
// Full links
ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: 'link' });
Event.simulateMouse('newtbe', 'click');
var links = $$('#newtbe-inplaceeditor a');
assertEqual(2, links.length, 'There should be two links');
assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, links[0].firstChild.nodeValue, 'Incorrect ok link text');
assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, links[1].firstChild.nodeValue, 'Incorrect cancel link text');
assert(links[0].href.endsWith('#'), 'Incorrect ok link href');
assert(links[1].href.endsWith('#'), 'Incorrect cancel link href');
assert(links[0].hasClassName('editor_ok_link'), 'Missing class name on ok link');
assert(links[1].hasClassName('editor_cancel_link'), 'Missing class name on cancel link');
var submits = $('newtbe-inplaceeditor').getInputs('submit');
assertEqual(0, submits.length, 'There should be no submit');
ipe.dispose();
// Full buttons
ipe = new Ajax.InPlaceEditor('newtbe', '', { cancelControl: 'button' });
Event.simulateMouse('newtbe', 'click');
var submits = $('newtbe-inplaceeditor').getInputs('submit');
assertEqual(2, submits.length, 'There should be two submits');
assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, submits[0].value, 'Incorrect ok button text');
assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, submits[1].value, 'Incorrect cancel button text');
assert(submits[0].hasClassName('editor_ok_button'), 'Missing class name on ok button');
assert(submits[1].hasClassName('editor_cancel_button'), 'Missing class name on cancel button');
var links = $$('#newtbe-inplaceeditor a');
assertEqual(0, links.length, 'There should be no link');
ipe.dispose();
// No cancel
ipe = new Ajax.InPlaceEditor('newtbe', '', { cancelControl: false });
Event.simulateMouse('newtbe', 'click');
var submits = $('newtbe-inplaceeditor').getInputs('submit');
assertEqual(1, submits.length, 'Not just one submit');
var links = $$('#newtbe-inplaceeditor a');
assertEqual(0, links.length, 'There should be no link');
ipe.dispose();
// No OK
ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: false });
Event.simulateMouse('newtbe', 'click');
var submits = $('newtbe-inplaceeditor').getInputs('submit');
assertEqual(0, submits.length, 'There should be no submit');
var links = $$('#newtbe-inplaceeditor a');
assertEqual(1, links.length, 'Not just one link');
ipe.dispose();
// Nothing
ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: false, cancelControl: false });
Event.simulateMouse('newtbe', 'click');
var submits = $('newtbe-inplaceeditor').getInputs('submit');
assertEqual(0, submits.length, 'There should be no submit');
var links = $$('#newtbe-inplaceeditor a');
assertEqual(0, links.length, 'There should be no link');
ipe.dispose();
// Texts: default mode
ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: false, cancelControl: false });
Event.simulateMouse('newtbe', 'click');
var submits = $('newtbe-inplaceeditor').getInputs('submit');
assertEqual(0, submits.length, 'There should be no submit');
var links = $$('#newtbe-inplaceeditor a');
assertEqual(0, links.length, 'There should be no link');
ipe.dispose();
// Texts: before w/ controls
ipe = new Ajax.InPlaceEditor('newtbe', '', { textBeforeControls: '[' });
Event.simulateMouse('newtbe', 'click');
var text = $('newtbe-inplaceeditor').childNodes[1];
assertEqual(3, text.nodeType, 'Missing/misplaced initial text');
assertEqual('[', text.nodeValue, 'Incorrect text');
ipe.dispose();
// Texts: after w/ controls
ipe = new Ajax.InPlaceEditor('newtbe', '', { textAfterControls: ']' });
Event.simulateMouse('newtbe', 'click');
var text = $('newtbe-inplaceeditor').childNodes[3];
assertEqual(3, text.nodeType, 'Missing/misplaced final text');
assertEqual(']', text.nodeValue, 'Incorrect text');
ipe.dispose();
// Texts: between w/ controls
ipe = new Ajax.InPlaceEditor('newtbe', '', { textBetweenControls: ' ' });
Event.simulateMouse('newtbe', 'click');
var text = $('newtbe-inplaceeditor').childNodes[2];
assertEqual(3, text.nodeType, 'Missing/misplaced middle text');
assertEqual(' ', text.nodeValue, 'Incorrect text');
ipe.dispose();
// Texts: before w/ no control
ipe = new Ajax.InPlaceEditor('newtbe', '', { textBeforeControls: '[', okControl: false, cancelControl: false });
Event.simulateMouse('newtbe', 'click');
var nodes = $('newtbe-inplaceeditor').childNodes;
assertEqual(1, nodes.length, 'Too many nodes in the form.');
ipe.dispose();
// Texts: after w/ no control
ipe = new Ajax.InPlaceEditor('newtbe', '', { textAfterControls: ']', okControl: false, cancelControl: false });
Event.simulateMouse('newtbe', 'click');
var nodes = $('newtbe-inplaceeditor').childNodes;
assertEqual(1, nodes.length, 'Too many nodes in the form.');
ipe.dispose();
// Texts: between w/ less than two controls
ipe = new Ajax.InPlaceEditor('newtbe', '', { textBetweenControls: ' ', okControl: false });
Event.simulateMouse('newtbe', 'click');
var nodes = $('newtbe-inplaceeditor').childNodes;
assertEqual(2, nodes.length, 'The form should have only two nodes (edit+cancel)');
assertEnumEqual(['input', 'a'], $A(nodes).pluck('tagName').invoke('toLowerCase'), 'Incorrect nodes');
ipe.dispose();
}},
testExternalControlOnly: function() {with(this) {
var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
externalControl: 'newtbe_external'
});
Event.simulateMouse('newtbe', 'click');
assert(ipe._editing, 'Clicking on the element should turn editable.');
ipe.leaveEditMode();
Event.simulateMouse('newtbe_external', 'click');
assert(ipe._editing, 'Clicking on the external control should turn editable.');
ipe.dispose();
ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
externalControl: 'newtbe_external', externalControlOnly: true
});
Event.simulateMouse('newtbe', 'click');
assert(!ipe._editing, 'Clicking on the element should not turn editable.');
Event.simulateMouse('newtbe_external', 'click');
assert(ipe._editing, 'Clicking on the external control should turn editable.');
ipe.dispose();
}},
testNewCallbacks: function() {with(this) {
var called = [];
var opts = {
onEnterHover: function() { called.push('onEnterHover') },
onEnterEditMode: function() { called.push('onEnterEditMode') },
onLeaveEditMode: function() { called.push('onLeaveEditMode') },
callback: function(form) {
called.push('callback');
return form.serialize();
},
onFailure: function() { called.push('onFailure') },
onComplete: function() { called.push('onComplete') },
onLeaveEditMode: function() { called.push('onLeaveEditMode') }
}
// Proper success
$('newtbe').update('New to be edited');
var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', opts);
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
var postUpdateHTML;
wait(1000, function() {
assertEnumEqual(['onEnterHover', 'onEnterEditMode', 'callback', 'onLeaveEditMode', 'onComplete'],
called.uniq(), 'Incorrect callback sequence');
postUpdateHTML = $('newtbe').innerHTML.strip();
assertEqual('New to be edited - edited', postUpdateHTML, 'Update trouble');
ipe.dispose();
// Failure
called.clear();
// Any ideas? Requesting file:// URLs on non-existent stuff doesn't trigger A.U's onFailure...
});
}},
testCallbackFunctionReturnTypes: function() { with(this) {
var params = [];
var responder = {
onCreate: function(req) {
params.push(req.options.parameters);
}
};
Ajax.Responders.register(responder);
var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
callback: function(form) {
return 'foo=bar';
}
});
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
wait(200, function() {
assert(params[0] && params[0].foo == 'bar');
ipe.dispose();
ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
callback: function(form) {
return { bar: '?', 'r&d': 42 };
}
});
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
wait(200, function() {
assert(params[1] && params[1].bar == '?' && params[1]['r&d'] == 42);
ipe.dispose();
Ajax.Responders.unregister(responder);
})
});
}},
testHtmlResponse: function() {with(this) {
// Default (true) -> A.U w/ evalScripts: true
$('newtbe').update('New to be edited');
var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html');
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
var postUpdateHTML;
wait(1000, function() {
postUpdateHTML = $('newtbe').innerHTML.strip();
assertEqual('New to be edited - edited', postUpdateHTML, 'Should have updated contents');
ipe.dispose();
// Explicit htmlResponse: true -> A.U w/ evalScripts: true
$('newtbe').update('New to be edited');
ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', { htmlResponse: true });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
wait(1000, function() {
postUpdateHTML = $('newtbe').innerHTML.strip();
assertEqual('New to be edited - edited', postUpdateHTML, 'Should have updated contents');
ipe.dispose();
// Explicit htmlResponse: false -> A.R
$('newtbe').update('New to be edited');
ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', { htmlResponse: false });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
wait(1000, function() {
postUpdateHTML = $('newtbe').innerHTML.strip();
assertEqual(ipe.options.savingText, postUpdateHTML, 'Should not have updated contents');
ipe.dispose();
});
});
});
}},
testSingleOrMultipleRows: function() {with(this) {
// Single-line value, rows <= 1 -> 1
$('newtbe').update('New to be edited');
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html');
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assertEqual('input', ipe._controls.editor.tagName.toLowerCase());
ipe.dispose();
// Single-line value, rows > 1 (2) -> 2
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { rows: 2 });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
assertEqual(2, ipe._controls.editor.rows);
ipe.dispose();
// Multiple-line value, rows <= 1, autoRows default (3) -> 3
$('newtbe').update('Line 1\nLine 2\nLine 3');
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html');
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
assertEqual(Ajax.InPlaceEditor.DefaultOptions.autoRows, ipe._controls.editor.rows);
ipe.dispose();
// Multiple-line value, rows <= 1, autoRows custom (5) -> 5
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { autoRows: 5 });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
assertEqual(5, ipe._controls.editor.rows);
ipe.dispose();
// Multiple-line value, rows > 1 (2), autoRows default (3) -> 2
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { rows: 2 });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
assertEqual(2, ipe._controls.editor.rows);
ipe.dispose();
// Multiple-line value, rows > 1 (2), autoRows custom (5) -> 2
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { rows: 2, autoRows: 5 });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
assertEqual(2, ipe._controls.editor.rows);
ipe.dispose();
}},
testFormCustomizationCallback: function() {with(this) {
var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
onFormCustomization: function(ipe, form) {
form.appendChild(new Element('input', { type: 'text', name: 'test', value: 'foobar' }));
}
});
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assertEqual('foobar', Form.serialize(ipe._form, true).test, 'Custom field not present');
ipe.dispose();
}},
testPostCreationBehavior: function() {with(this) {
var focused = false, activated = false;
function override(name, fx) {
arguments.callee.backups[name] = Field.Methods[name];
Field.Methods[name] = fx;
};
override.backups = {};
function restore() {
$A(arguments).each(function(n) {
Field.Methods[name] = override.backups[name];
});
Element.addMethods();
};
override('activate', function(elt) {
override.backups['activate'](elt);
activated = true;
});
override('focus', function(elt) { focused = true; });
Element.addMethods();
// fieldPostCreation default (activate)
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html');
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assert(focused && activated, "Should be focused and activated (resp. " + focused + " and " + activated + ')');
ipe.dispose();
// fieldPostCreation == 'focus'
focused = activated = false;
ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { fieldPostCreation: 'focus' });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assert(focused && !activated, "Should be focused, not activated (resp. " + focused + " and " + activated + ')');
ipe.dispose();
// fieldPostCreation == false
focused = activated = false;
ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { fieldPostCreation: false });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assert(!focused && !activated, "Should be neither focused nor activated (resp. " + focused + " and " + activated + ')');
ipe.dispose();
// fieldPostCreation == non-false yet neither activate nor focus -> default
focused = activated = false;
ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { fieldPostCreation: 'foobar' });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
assert(focused && activated, "Should be focused and activated (resp. " + focused + " and " + activated + ')');
ipe.dispose();
restore('activate', 'focus');
}},
testResponseTagStripping: function() {with(this) {
// stripLoadedTextTags default (false)
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html',
{ loadTextURL: '_ajax_inplaceeditor_tagged.html' });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
wait(1000, function() {
assertEqual('<span>New to be edited - edited</span>', ipe._controls.editor.value.strip());
ipe.dispose();
// stripLoadedTextTags == true
ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html',
{ loadTextURL: '_ajax_inplaceeditor_tagged.html',
stripLoadedTextTags: true });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
wait(1000, function() {
assertEqual('New to be edited - edited', ipe._controls.editor.value.strip());
ipe.dispose();
});
});
}},
testSubmitOnBlur: function() {with(this) {
// submitOnBlur default (false)
$('newtbe').update('To be edited');
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html');
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
ipe._controls.editor.blur();
wait(1000, function() {
assertEqual('To be edited', ipe._controls.editor ? ipe._controls.editor.value : '');
ipe.dispose();
// submitOnBlur == true
ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { submitOnBlur: true });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
ipe._controls.editor.blur();
wait(1200, function() {
assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
ipe.dispose();
});
});
}},
testEscReturnKeys: function() {with(this) {
// No controls, Esc
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { okControl: false, cancelControl: false});
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
assert(!ipe._editing, 'Esc should have disabled IPE');
ipe.dispose();
// Cancel control, Esc
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { okControl: false });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
assert(!ipe._editing, 'Esc should have disabled IPE');
ipe.dispose();
// OK control, Esc
var ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { cancelControl: false });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
assert(!ipe._editing, 'Esc should have disabled IPE');
ipe.dispose();
// Both controls, Esc
ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html');
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
assert(!ipe._editing, 'Esc should have disabled IPE');
ipe.dispose();
// No controls, Return
$('newtbe').update('New to be edited');
ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { okControl: false, cancelControl: false });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
wait(1000, function() {
assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
ipe.dispose();
// Cancel control, Return
$('newtbe').update('New to be edited');
ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { okControl: false });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
wait(1000, function() {
assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
ipe.dispose();
// OK control, Return
$('newtbe').update('New to be edited');
ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { cancelControl: false });
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
wait(1000, function() {
assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
ipe.dispose();
// Both controls, Return
$('newtbe').update('New to be edited');
ipe = new Ajax.InPlaceEditor('newtbe',
'_ajax_inplaceeditor_result2.html');
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
wait(1000, function() {
assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
ipe.dispose();
});
});
});
});
}},
testIPCEBasic: function() {with(this) {
// Basic creation, population and choice.
$('newtbe').update('ntbe');
var fieldValue = '';
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
collection: IPCE_COLLECTION, callback: function(f, value) {
fieldValue = value;
}, onComplete: Prototype.emptyFunction
});
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
var editor = ipe._controls.editor;
assertEqual('test', editor.name);
assertEqual('select', editor.tagName.toLowerCase());
assertEqual(IPCE_COLLECTION.length, editor.options.length, 'Incorrect amount of options');
for (var index = 0; index < IPCE_COLLECTION.length; ++index) {
var ref = IPCE_COLLECTION[index];
var item = editor.options[index];
assertEqual(ref[0], item.value, 'Incorrect OPTION value');
assertEqual(ref[1], item.text.strip(), 'Incorrect OPTION text');
};
assertEqual(1, editor.selectedIndex, 'Did not properly select item');
editor.selectedIndex = 2;
Event.simulateMouse(ipe._controls.ok, 'click');
assertEqual('ntbe2', fieldValue);
ipe.dispose();
// Test the value option
$('newtbe').update('ntbe');
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
collection: IPCE_COLLECTION, onComplete: Prototype.emptyFunction,
value: 'ntbe2'
});
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
editor = ipe._controls.editor;
assertEqual(2, editor.selectedIndex, 'Did not properly select item');
ipe.dispose();
}},
testIPCECollectionSyntaxes: function() {with(this) {
// Array of two-item arrays (0 = value, 1 = text)
$('newtbe').update('ntbe');
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
collection: IPCE_COLLECTION, onComplete: Prototype.emptyFunction
});
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
var editor = ipe._controls.editor;
assertEqual(1, editor.selectedIndex, 'Did not properly select item');
// (further contents testing already done in Basic)
ipe.dispose();
// Array of one-item arrays
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
collection: [['tbe'], ['ntbe'], ['ntbe2'], ['ntbe3']],
onComplete: Prototype.emptyFunction
});
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
var editor = ipe._controls.editor;
assertEqual(1, editor.selectedIndex, 'Did not properly select item');
assertEqual('ntbe', $F(editor).strip(), 'Did not properly define text');
ipe.dispose();
// Array of items
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
collection: ['tbe', 'ntbe', 'ntbe2', 'ntbe3'],
onComplete: Prototype.emptyFunction
});
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
var editor = ipe._controls.editor;
assertEqual(1, editor.selectedIndex, 'Did not properly select item');
assertEqual('ntbe', $F(editor).strip(), 'Did not properly define text');
ipe.dispose();
}},
testIPCEAlternateTextOptions: function() {with(this) {
// loadTextURL (check loading text, verify alternate text eventually)
$('newtbe').update('New to be edited');
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
collection: IPCE_COLLECTION, loadTextURL: '_ajax_inplaceeditor_ipce_alt_text.html',
onComplete: Prototype.emptyFunction
});
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
var editor = ipe._controls.editor;
var text = editor.options[editor.selectedIndex].text.strip();
assertEqual(Ajax.InPlaceEditor.DefaultOptions.loadingText, text);
wait(1200, function() {
assertEqual(1, editor.selectedIndex, 'Did not properly select item based on alternate text.');
ipe.dispose();
});
}},
testIPCEDynamicCollectionOptions: function() {with(this) {
// loadCollectionURL, default loadingCollectionText
$('newtbe').update('ntbe');
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
loadCollectionURL: '_ajax_inplaceeditor_ipce_collection.js',
onComplete: Prototype.emptyFunction
});
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
var editor = ipe._controls.editor;
var text = editor.options[editor.selectedIndex].text.strip();
assertEqual(Ajax.InPlaceCollectionEditor.DefaultOptions.loadingCollectionText, text);
wait(1000, function() {
assertEqual(5, ipe._collection.length);
assertEqual(2, editor.selectedIndex, 'Did not properly select item');
ipe.dispose();
// loadCollectionURL, custom loadingCollectionText
$('newtbe').update('bar');
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
loadCollectionURL: '_ajax_inplaceeditor_ipce_collection.js',
loadingCollectionText: 'There we go...',
onComplete: Prototype.emptyFunction
});
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
editor = ipe._controls.editor;
text = editor.options[editor.selectedIndex].text.strip();
assertEqual('There we go...', text);
wait(1000, function() {
assertEqual(1, editor.selectedIndex, 'Did not properly select item');
ipe.dispose();
});
});
}},
testIPCEATPlusDC: function() {with(this) {
// loadCollectionURL, loadTextURL
$('newtbe').update('Like I care');
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
loadCollectionURL: '_ajax_inplaceeditor_ipce_collection.js',
loadingCollectionText: 'There we go...',
loadTextURL: '_ajax_inplaceeditor_ipce_alt_text.html',
loadingText: 'OK, so, the text...',
onComplete: Prototype.emptyFunction
});
ipe._regularCFET = ipe.checkForExternalText;
ipe.checkForExternalText = function() {
assert(5, ipe._collection.length);
ipe._regularCFET();
var editor = ipe._controls.editor;
var text = editor.options[editor.selectedIndex].text.strip();
assertEqual('OK, so, the text...', text);
};
Event.simulateMouse('newtbe', 'mouseover');
Event.simulateMouse('newtbe', 'click');
var editor = ipe._controls.editor;
var text = editor.options[editor.selectedIndex].text.strip();
assertEqual('There we go...', text);
wait(2000, function() {
assertEqual(2, editor.selectedIndex, 'Did not properly select item');
ipe.dispose();
});
}},
testDeprecationLayer: function() {with(this) {
// FIXME: needs to be coded yet, doesn't it?
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
okButton: false, cancelLink: false
});
assertIdentical(false, ipe.options.okControl, 'OK control should be disabled');
assertIdentical(false, ipe.options.cancelControl, 'Cancel control should be disabled');
ipe.dispose();
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
okLink: true, cancelButton: true
});
assertEqual('link', ipe.options.okControl, 'OK control should be a link');
assertEqual('button', ipe.options.cancelControl, 'Cancel control should be a button');
ipe.dispose();
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
highlightcolor: '#ff0000', highlightendcolor: '#00ff00'
});
assertEqual('#ff0000', ipe.options.highlightColor, 'Highlight color was not migrated');
assertEqual('#00ff00', ipe.options.highlightEndColor, 'Highlight end color was not migrated');
ipe.dispose();
}},
testShouldShowAmpersandsProperly: function() {with(this) {
var ipe = new Ajax.InPlaceEditor('contains_ampersand', '', {});
Event.simulateMouse('contains_ampersand', 'click');
assertEqual("Me & Myself", $$('form#contains_ampersand-inplaceeditor input.editor_field')[0].value);
ipe.dispose();
}}
// FIXME: add AC w/o key conflicts?
// FIXME: doc w/ full details on what's new, what's changed, etc. + deprecation layer info.
});
// ]]>
</script>
</body>
</html>

150
javascript/scoluos/test/unit/bdd_test.html Executable file
View File

@@ -0,0 +1,150 @@
<!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>
<!-- Log output -->
<div id="testlog"> </div>
<div id="d">initial</div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
var moo = 0;
var assertMethods = [];
for(method in Test.Unit.Assertions.prototype) {
if(/^assert/.test(method)) assertMethods.push(method);
}
var testObj = {
isNice: function(){
return true;
},
isBroken: function(){
return false;
}
}
Test.context("BDD-style testing",{
setup: function() {
$('d').update('setup!');
moo++;
},
teardown: function() {
moo--;
},
'should run setup before each specification': function(){
assert($('d').innerHTML == 'setup!');
assert(moo == 1);
},
'should run teardown after each specification': function(){
assert(moo == 1);
},
'should provide extensions to tie in isSomething and respondsTo object methods': function(){
Object.extend(testObj, Test.BDDMethods);
testObj.shouldBe('nice');
testObj.shouldNotBe('broken');
testObj.shouldRespondTo('isNice');
testObj.shouldRespondTo('isBroken');
},
'should automatically add extensions to strings': function(){
'a'.shouldEqual('a');
'a'.shouldNotEqual('b');
'a'.shouldNotBeNull();
'a'.shouldBeA(String);
var aString = 'boo!';
aString.shouldEqual('boo!');
aString.shouldBeA(String);
aString.shouldNotBeA(Number);
},
'should automatically add extensions to numbers': function(){
var n = 123;
n.shouldEqual(123);
n.shouldNotEqual(4);
n.shouldBeA(Number);
n.shouldNotBeA(Test);
},
'should automatically add extensions to arrays': function(){
['a'].shouldNotBeA(String);
[1,2,3].shouldBeAn(Array);
[1,2,3].shouldEqualEnum([1,2,3]);
},
'should automatically add extensions to booleans': function(){
var theTruth = true;
var lies = false;
theTruth.shouldNotBeA(String);
lies.shouldBeA(Boolean);
'false'.shouldNotBeA(Boolean);
theTruth.shouldEqual(true);
lies.shouldNotEqual(true);
},
'should support the eval() method': function(){
eval('2*2').shouldEqual(4);
},
'should support equality assertion': function(){
assertEqual(1, 1);
assertEqual('a', 'a');
assertEqual(1, '1');
var x = 1;
var y = 1;
assertEqual(1, x)
assertEqual(x, y);
},
'should provide all assertions': function(){
assertMethods.each(function(m){
assert(typeof this[m] == 'function');
}.bind(this));
},
'should support deferred execution': function(){
wait(10,function(){
'a'.shouldEqual('a');
});
wait(10,function(){
'a'.shouldEqual('a');
wait(10,function(){
'a'.shouldEqual('a');
wait(10,function(){
'a'.shouldEqual('a');
});
});
});
}
});
// ]]>
</script>
</body>
</html>

262
javascript/scoluos/test/unit/builder_test.html Executable file
View File

@@ -0,0 +1,262 @@
<!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 builder.js
</p>
<!-- Log output -->
<div id="testlog"> </div>
<div id="result"></div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
// Serializes a node and it's contents to plain old HTML
// IMPORTANT: style attributes can't be correctly serialized cross-browser wise,
// so the contents of style attributes must match what IE thinks is correct
function serializeNode(node){
if(node.nodeType == 3) return node.nodeValue;
node = $(node);
var tag = node.tagName.toLowerCase();
return '<' + ([tag].concat($A(node.attributes).map(function(attr){
// Filter out stuff that we don't need
if(attr.nodeName == '_extended' || attr.nodeName == '_counted' ||
typeof attr.nodeValue == 'function' ||!Element.hasAttribute(node, attr.nodeName)) return;
// remove trailing ; in style attributes on Firefox
var value = node.readAttribute(attr.nodeName);
if(attr.nodeName == 'style' && value.endsWith(';'))
value = value.substr(0, value.length-1);
return attr.nodeName + '="' + value + '"'
}).compact().sort())).join(' ') + '>' + $A(node.childNodes).map(serializeNode).join('') +
'</' + tag + '>';
}
new Test.Unit.Runner({
setup: function() {
$('result').innerHTML = '';
},
testBuilderBasics: function() { with(this) {
var element = Builder.node('div');
assertEqual('DIV', element.nodeName);
var element = Builder.node('div',{id:'mydiv'})
assertEqual('mydiv', element.id);
var element = Builder.node('div',{id:'mydiv',className:'one two'})
assertEqual('mydiv', element.id);
assertEqual('one two', element.className);
var element = Builder.node('span','text 123 <blah>');
assertEqual('SPAN', element.nodeName);
assertEqual('text 123 &lt;blah&gt;', element.innerHTML);
var element = Builder.node('span',123);
assertEqual('SPAN', element.nodeName);
assertEqual('123', element.innerHTML);
var element = Builder.node('span',['test']);
assertEqual('SPAN', element.nodeName);
assertEqual('test', element.innerHTML);
var element = Builder.node('span',['test',123]);
assertEqual('SPAN', element.nodeName);
assertEqual('test123', element.innerHTML);
var element = Builder.node('span',{},['test',123]);
assertEqual('SPAN', element.nodeName);
assertEqual('test123', element.innerHTML);
var element = Builder.node('span',{id:'myspan'},['test',123]);
assertEqual('SPAN', element.nodeName);
assertEqual('myspan', element.id);
assertEqual('test123', element.innerHTML);
var element = Builder.node('div',[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
assertEqual('1234567890',element.innerHTML);
var element = Builder.node('div',[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
assertEqual('1234567890',element.innerHTML);
var element = Builder.node('div',{id:'mydiv'},[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
assertEqual('1234567890',element.innerHTML);
var element = Builder.node('div',{id:'mydiv'},[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
assertEqual('1234567890',element.innerHTML);
assertEqual(10, element.childNodes.length);
var element = Builder.node('div', Builder.node('span'));
assertEqual(1, element.childNodes.length);
assertEqual('SPAN', element.childNodes[0].tagName);
var element = Builder.node('div', {id:'mydiv'}, Builder.node('span'));
assertEqual(1, element.childNodes.length);
assertEqual('mydiv', element.id);
assertEqual('SPAN', element.childNodes[0].tagName);
}},
testBuilderClassAndFor: function() { with(this) {
var elt = Builder.node('div', { className: 'demoClass' });
assertEqual('demoClass', elt.className);
var elt = Builder.node('label', { htmlFor: 'mydiv' });
assertEqual('mydiv', elt.htmlFor);
}},
testBuilderExtendsElement: function() { with(this) {
assertRespondsTo('hide', Builder.node('div'));
}},
testBuilderAllXHTMLTags: function() { with(this) {
var XHTML_TAGS = [
'a','abbr','acronym','address','applet','area',
'b','bdo','big','blockquote','br','button',
'caption','cite','code','col','colgroup',
'dd','del','dfn','div','dl','dt',
'em',
'fieldset','form',
'h1','h2','h3','h4','h5','h6','hr',
'i','iframe','img','input','ins',
'kbd',
'label','legend','li',
'map',
'object','ol','optgroup','option',
'p','param','pre',
'q',
'samp','script','select','small','span','strong','style','sub','sup',
'table','tbody','td','textarea','tfoot','th','thead','tr','tt',
'ul','var']
XHTML_TAGS.each(function(tag) {
try {
var element = Builder.node(tag);
assertNotNull(element, 'Tag "'+tag+'" expected, but was null.');
assertEqual(tag.toUpperCase(), element.nodeName);
var element = Builder.node(tag,{id:'tag_'+tag+'_test_id'});
assertEqual(tag.toUpperCase(), element.nodeName);
assertEqual('tag_'+tag+'_test_id', element.id, 'Setting id attribute for "'+tag+'" failed!');
} catch(e) {
assert(false, 'Error while creating node of type '+tag+'. Note: Firefox bug in 1.0.X on option and optgroup, fixed in 1.5b1. Internet Explorer 6 doesn\'t support the ABBR tag and has no standard DOM implementation for tables.');
}
});
}},
// special case, because requires workarounds on IE and Firefox < 1.5
testBuilderOptionTag: function() { with(this) {
assertEqual('', Builder.node('option').innerHTML);
assertEqual('test', Builder.node('option','test').innerHTML);
assertEqual('', Builder.node('option',{className:'test'}).innerHTML);
assertEqual('test', Builder.node('option',{className:'test'},'test').innerHTML);
assertEqual('test', Builder.node('option',{},'test').innerHTML);
var selectElement = Builder.node('select');
var optionElement = Builder.node('option',{className:'test',id:'option_123'},123);
selectElement.appendChild(optionElement);
document.body.appendChild(selectElement);
assertEqual('123', $('option_123').innerHTML);
}},
testBuilderContatenation: function() { with(this) {
var element = Builder.node('div', [Builder.node('span')]);
assertEqual('DIV', element.nodeName);
assertEqual(1, element.childNodes.length);
assertEqual('SPAN', element.firstChild.nodeName);
var element = Builder.node('div', [Builder.node('span'),'text']);
assertEqual(2, element.childNodes.length);
assertEqual(0, element.firstChild.childNodes.length);
assertEqual('DIV', element.nodeName);
assertEqual('SPAN', element.firstChild.nodeName);
assertEqual(3, element.firstChild.nextSibling.nodeType);
var element = Builder.node('div', [Builder.node('span',[Builder.node('strong','blah')]),'text']);
assertEqual(2, element.childNodes.length);
assertEqual(1, element.firstChild.childNodes.length);
assertEqual('DIV', element.nodeName);
assertEqual('SPAN', element.firstChild.nodeName);
assertEqual('STRONG', element.firstChild.firstChild.nodeName);
assertEqual('blah', element.firstChild.firstChild.innerHTML);
assertEqual(3, element.firstChild.nextSibling.nodeType);
}},
testBuilderComplexExample: function() { with(this) {
var element = Builder.node('div',{id:'ghosttrain'},[
Builder.node('div',{style:'font-weight: bold; font-size: 11px'},[
Builder.node('h1','Ghost Train'),
"testtext", 2, 3, 4,
Builder.node('ul',[
Builder.node('li',{onclick:'alert(\'test\')'},'click me')
]),
]),
]);
assertEqual('DIV', element.nodeName);
$('result').appendChild(element);
// browsers aren't sure about upper and lower case on elements
assertEqual(
'<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
'<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
serializeNode($('result').childNodes[0]));
}},
testBuilderShortcuts: function() { with(this) {
Builder.dump();
var element = DIV(SPAN());
assertEqual('SPAN', element.childNodes[0].tagName);
var element = DIV({id:'test'},SPAN());
assertEqual('SPAN', element.childNodes[0].tagName);
var element = DIV({id:'ghosttrain'},[
DIV({style:'font-weight: bold; font-size: 11px'},[
H1('Ghost Train'),
"testtext", 2, 3, 4,
UL([
LI({onclick:'alert(\'test\')'},'click me')
]),
]),
]);
assertEqual('DIV', element.nodeName);
$('result').appendChild(element);
assertEqual(
'<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
'<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
serializeNode($('result').childNodes[0]));
}},
testBuilderBuild: function() { with(this) {
['<span>this is <b>neat!</b></span>',' \n<span>this is <b>neat!</b></span>\n '].each(
function(html){
var node = Builder.build(html);
assertEqual('<span>this is <b>neat!</b></span>', serializeNode(node));
});
}},
testBuilderAttributeEscaping: function() { with(this) {
var element = Builder.node('div',{blah:"<foo'bar&baz\"bat>"});
assertEqual("<foo'bar&baz\"bat>", $(element).readAttribute('blah'));
}}
});
// ]]>
</script>
</body>
</html>

131
javascript/scoluos/test/unit/dragdrop_test.html Executable file
View File

@@ -0,0 +1,131 @@
<!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" />
<style type="text/css" media="screen">
/* <![CDATA[ */
#div_absolute_test { position: absolute }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Unit test file</h1>
<p>
Test of drag &amp; drop functions in dragdrop.js
</p>
<!-- Log output -->
<div id="testlog"> </div>
<p id="p_test">p_test</p>
<p id="p_test2">p_test2</p>
<p id="p_test3">p_test3</p>
<img id="img_test" src="icon.png" alt="img_text"/>
<div id="droppable_test">droppable_test</div>
<div id="div_test">div_test</div>
<div id="div_absolute_test">div_absolute_test</div>
<div id="div_absolute_inline_test" style="position:absolute">div_absolute_inline_test</div>
<div id="droppable_container">
<div id="d1">droppable_test</div>
<div id="d2">droppable_test</div>
</div>
<div id="droppable_container_2">
<div id="d3">droppable_test</div>
</div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Test.Unit.Runner({
testDraggableBasics: function() { with(this) {
var d = new Draggable('p_test');
assertInstanceOf(Draggable, d);
}},
testDraggableStartEffect: function() { with(this) {
var d = new Draggable('p_test2');
assert(d.options.starteffect, 'There should be a default start effect.');
d = new Draggable('p_test3', { endeffect: Prototype.EmptyFunction });
assert(undefined === d.options.startEffect, 'There should be no default start effect.');
}},
testAutoPositioning: function() { with(this) {
assertEqual('static', Element.getStyle('div_test','position'));
new Draggable('div_test');
new Draggable('div_absolute_test');
new Draggable('div_absolute_inline_test');
assertEqual('relative', Element.getStyle('div_test','position'));
assertEqual('absolute', Element.getStyle('div_absolute_test','position'));
assertEqual('absolute', Element.getStyle('div_absolute_inline_test','position'));
}},
testDroppbalesBasics: function() { with(this) {
assertEqual(0, Droppables.drops.length);
assertEqual('static', Element.getStyle('droppable_test','position'));
Droppables.add('droppable_test');
assertEqual(1, Droppables.drops.length);
assertEqual('relative', Element.getStyle('droppable_test','position'));
Droppables.remove('droppable_test');
assertEqual(0, Droppables.drops.length);
// accept option should take strings or array of strings
Droppables.add('droppable_test',{accept:'document'});
assertEqual(['document'].inspect(), Droppables.drops[0].accept.inspect());
Droppables.remove('droppable_test');
Droppables.add('droppable_test',{accept:['document','image']});
assertEqual(['document','image'].inspect(), Droppables.drops[0].accept.inspect());
Droppables.remove('droppable_test');
}},
testDroppableContainment: function() { with(this) {
// Droppable containers should be cached
Droppables.add('droppable_test', {
containment:'droppable_container' });
assertEqual(1, Droppables.drops[0]._containers.length);
assertEqual($('droppable_container'), Droppables.drops[0]._containers[0]);
assert(Droppables.isContained($('d1'), Droppables.drops[0]));
assert(Droppables.isContained($('d2'), Droppables.drops[0]));
assert(!Droppables.isContained($('d3'), Droppables.drops[0]));
Droppables.remove('droppable_test');
Droppables.add('droppable_test', {
containment:['droppable_container','droppable_container_2'] });
assertEqual(2, Droppables.drops[0]._containers.length);
assertEqual($('droppable_container'), Droppables.drops[0]._containers[0]);
assertEqual($('droppable_container_2'), Droppables.drops[0]._containers[1]);
assert(Droppables.isContained($('d1'), Droppables.drops[0]));
assert(Droppables.isContained($('d2'), Droppables.drops[0]));
assert(Droppables.isContained($('d3'), Droppables.drops[0]));
Droppables.remove('droppable_test');
}},
testDroppablesIsAffected: function() { with(this) {
Droppables.add('droppable_test');
Position.prepare();
assert(!Droppables.isAffected([-10, -10], null, Droppables.drops[0]));
var p = Position.page($('droppable_test'));
assert(Droppables.isAffected(p, null, Droppables.drops[0]));
}}
}, "testlog");
// ]]>
</script>
</body>
</html>

547
javascript/scoluos/test/unit/effects_test.html Executable file
View File

@@ -0,0 +1,547 @@
<!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" />
<style type="text/css" media="screen">
#rotfl {
color: red;
font-family: serif;
font-style: italic;
font-size: 40px;
background: #fed;
padding: 1em;
width: 400px;
}
.final {
color: #fff;
font-style: italic;
background: #000;
opacity: 0.5;
}
body div.final {
font-size: 20px;
}
</style>
</head>
<body>
<h1>script.aculo.us Unit test file</h1>
<p>
Tests for effects.js
</p>
<!-- generated elements go in here -->
<div id="sandbox"></div>
<!-- Log output -->
<div id="testlog"> </div>
<div class="morphing blub" style="font-size:25px;color:#f00">Well</div>
<div class="morphing">You know</div>
<div id="blah" style="border:1px solid black;width:100px">Whoo-hoo!</div>
<div id="error_message">ERROR MESSAGE</div>
<div id="error_message_2">SECOND ERROR MESSAGE</div>
<div id="error_message_3" style="border:1px solid red; width:100px; color: #f00">THIRD ERROR MESSAGE</div>
<ul class="error-list" id="error_test_ul">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li>
<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</li>
<li>nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</li>
<li>reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
</ul>
<div id="rotfl">ROTFL</div>
<div id="tween">foo!</div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
var TAGS =
['div','span','ol','ul','table','p','h1','h2','h3','h4','h5','h6'];
var COMBINED_EFFECTS =
['Fade','Appear','BlindUp','BlindDown','Puff','SwitchOff','DropOut','Shake',
'SlideUp','SlideDown','Pulsate','Squish','Fold','Grow','Shrink'];
var COMBINED_RJS_EFFECTS = $w('fade appear blind_up blind_down puff switch_off '+
'drop_out shake slide_up slide_down pulsate squish fold grow shrink');
var tmp, tmp2;
new Test.Unit.Runner({
setup: function() { with (this) {
$('sandbox').innerHTML = "";
}},
teardown: function() { with(this) {
// remove all queued effects
Effect.Queue.each(function(e) { e.cancel() });
}},
testExceptionOnNonExistingElement: function() { with(this) {
assertRaise('ElementDoesNotExistError',
function(){new Effect.Opacity('nothing-to-see-here')});
assertRaise('ElementDoesNotExistError',
function(){new Effect.Move('nothing-to-see-here')});
assertRaise('ElementDoesNotExistError',
function(){new Effect.Scale('nothing-to-see-here')});
assertRaise('ElementDoesNotExistError',
function(){new Effect.Highlight('nothing-to-see-here')});
}},
testCallbacks: function() { with(this) {
tmp = tmp2 = 0;
var e1 = new Effect.Opacity('sandbox',{from:1.0,to:0.5,duration:0.5,
beforeStart: function() { tmp++ },
beforeStartInternal: function() { tmp++ },
beforeSetup: function() { tmp++ },
beforeSetupInternal: function() { tmp++ },
afterSetup: function() { tmp++ },
afterSetupInternal: function() { tmp++ },
beforeUpdate: function() { tmp2++ },
beforeUpdateInternal: function() { tmp2++ },
beforeFinish: function() { tmp++ },
beforeFinishInternal: function() { tmp++ },
afterFinish: function() { tmp++ },
afterFinishInternal: function() { tmp++ }
});
wait(1000, function() {
assertEqual(10, tmp);
assert(tmp2 > 0);
});
}},
testEvent: function() { with(this) {
tmp = 0;
new Effect.Event({ afterFinish:function(){ tmp++ }, position:'end'});
wait(100, function() {
assertEqual(1, tmp);
});
}},
testTransition: function() { with(this) {
// false implies linear
var e = new Effect.Opacity('sandbox',{transition:false,from:0.0,to:0.25,duration:0.5});
assert(e.options.transition == Effect.Transitions.linear);
wait(1000, function() {
assertEqual(0.25, $('sandbox').getStyle('opacity'));
// default to sinoidal
var e = new Effect.Opacity('sandbox',{from:0.0,to:0.25,duration:0.5});
assert(e.options.transition == Effect.Transitions.sinoidal);
wait(1000, function() {
assertEqual(0.25, $('sandbox').getStyle('opacity'));
var transitions = [
{ transition: Effect.Transitions.linear, expected: 1 },
{ transition: Effect.Transitions.sinoidal, expected: 1 },
{ transition: Effect.Transitions.reverse, expected: 0 },
{ transition: Effect.Transitions.flicker, expected: 1 },
{ transition: Effect.Transitions.wobble, expected: 1 },
{ transition: Effect.Transitions.pulse, expected: 1 },
{ transition: Effect.Transitions.none, expected: 0 }
];
transitions.each(function(t){
var e = new Effect.Opacity('sandbox',{sync:true, from:0, to: 1, transition:t.transition});
assert(e.options.transition == t.transition);
e.render(1.0);
assertEqual(t.expected, e.position, t.transition);
});
});
});
}},
testInspect: function() { with(this) {
var e1 = new Effect.Opacity('sandbox',{from:1.0,to:0.5,duration:0.5});
info( e1.inspect() );
assertEqual(0, e1.inspect().indexOf('#<Effect:'));
assert(e1.inspect().indexOf('idle')>0);
wait(1000, function() {
assert(e1.inspect().indexOf('finished')>0);
});
}},
testDefaultOptions: function() { with(this) {
var oldDefaultOptions = Object.extend({},Effect.DefaultOptions);
assertEqual(1.0, Effect.DefaultOptions.duration);
Effect.DefaultOptions.duration = 0.5;
var e1 = new Effect.Opacity('sandbox');
assertEqual(0.5, e1.options.duration);
wait(750, function() {
assertEqual('finished', e1.state);
Effect.DefaultOptions = oldDefaultOptions;
});
}},
testEffectsQueue: function() { with(this) {
var e1 = new Effect.Highlight('sandbox');
var e2 = new Effect.Appear('sandbox');
assertEqual(2, Effect.Queue.effects.length);
tmp = 0;
Effect.Queue.each(function(e) { tmp++ });
assertEqual(2, tmp);
// the internal interval timer should be active
assertNotNull(Effect.Queue.interval);
e1.cancel();
e2.cancel();
assertEqual(0, Effect.Queue.effects.length);
// should be inactive after all effects are removed from queue
assertNull(Effect.Queue.interval);
// should be in e3,e1,e2 order
var e1 = new Effect.Highlight('sandbox');
var e2 = new Effect.Appear('sandbox',{queue:'end'});
var e3 = new Effect.Fade('sandbox',{queue:'front'});
assert(e2.startOn > e1.startOn);
assert(e3.startOn < e1.startOn);
assert(e3.startOn < e2.startOn);
assertEqual(3, Effect.Queue.effects.length);
Effect.Queue.each(function(e) { e.cancel() });
assertEqual(0, Effect.Queue.effects.length);
}},
testScopedEffectsQueue: function() { with(this) {
var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope'} } );
var e2 = new Effect.Appear('sandbox', {queue: {scope:'myscope'} } );
var e3 = new Effect.Highlight('sandbox', {queue: {scope:'secondscope'} } );
var e4 = new Effect.Appear('sandbox');
assertEqual(2, Effect.Queues.get('myscope').effects.length);
assertEqual(1, Effect.Queues.get('secondscope').effects.length);
assertEqual(1, Effect.Queues.get('global').effects.length);
assertEqual(Effect.Queue.effects.length, Effect.Queues.get('global').effects.length);
var tmp = 0;
Effect.Queues.get('myscope').effects.each(function(e) { tmp++ });
assertEqual(2, tmp);
// the internal interval timer should be active
assertNotNull(Effect.Queues.get('myscope').interval);
assertNotNull(Effect.Queues.get('secondscope').interval);
assertNotNull(Effect.Queues.get('global').interval);
e1.cancel(); e2.cancel(); e3.cancel(); e4.cancel();
assertEqual(0, Effect.Queues.get('myscope').effects.length);
assertEqual(0, Effect.Queues.get('secondscope').effects.length);
assertEqual(0, Effect.Queues.get('global').effects.length);
// should be inactive after all effects are removed from queues
assertNull(Effect.Queues.get('myscope').interval);
assertNull(Effect.Queues.get('secondscope').interval);
assertNull(Effect.Queues.get('global').interval);
// should be in e3 and e4 together and then e1,e2 order
var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope'} } );
var e2 = new Effect.Appear('sandbox', {queue: {position: 'end', scope:'myscope'} } );
var e3 = new Effect.Fade('sandbox', {queue: {position: 'front', scope:'myscope'} } );
var e4 = new Effect.Appear('sandbox');
assert(e2.startOn > e1.startOn);
assert(e3.startOn < e1.startOn);
assert(e3.startOn < e2.startOn);
assert(e3.startOn = e4.startOn);
assertEqual(3, Effect.Queues.get('myscope').effects.length);
Effect.Queues.get('myscope').each(function(e) { e.cancel() });
assertEqual(0, Effect.Queues.get('myscope').effects.length);
Effect.Queues.get('global').each(function(e) { e.cancel() });
assertEqual(0, Effect.Queues.get('global').effects.length);
// should only allow the first two effects and ignore the third
var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope', limit: 2} } );
var e2 = new Effect.Appear('sandbox', {queue: {position: 'end', scope:'myscope', limit: 2} } );
var e3 = new Effect.Fade('sandbox', {queue: {position: 'front', scope:'myscope', limit: 2} } );
assertEqual(2, Effect.Queues.get('myscope').effects.length);
}},
testEffectMultiple: function() { with(this) {
$('sandbox').appendChild(Builder.node('div',{id:'test_1'}));
$('sandbox').appendChild(Builder.node('div',{id:'test_2'},[Builder.node('div',{id:'test_2a'})]));
$('sandbox').appendChild(Builder.node('div',{id:'test_3'}));
// only direct child elements
Effect.multiple('sandbox',Effect.Fade);
assertEqual(3, Effect.Queue.effects.length);
Effect.Queue.each(function(e) { e.cancel() });
assertEqual(0, Effect.Queue.effects.length);
// call with array
Effect.multiple(['test_1','test_3'],Effect.Puff);
assertEqual(2, Effect.Queue.effects.length);
}},
testEffectTagifyText: function() { with(this) {
$('sandbox').innerHTML = "Blah<strong>bleb</strong> Blub";
assertEqual(3, $('sandbox').childNodes.length);
Effect.tagifyText('sandbox');
assertEqual(10, $('sandbox').childNodes.length);
Effect.multiple('sandbox', Effect.Fade);
assertEqual(10, Effect.Queue.effects.length);
}},
testEffectParallel: function() { with(this) {
assert( new Effect.Parallel() );
assert( new Effect.Parallel([]) );
assert( new Effect.Parallel([],{}) );
assert( new Effect.Parallel([
new Effect.Event({sync:true})
],{ duration: 2}) );
}},
testEffectTween: function() { with(this) {
// basic initialization
assert(new Effect.Tween(null,0,0,function(){}));
assert(new Effect.Tween(null,0,0,{duration:0.1},function(){}));
// fun with objects
var object = {
blech: 2,
foo: function(p){
this.bar = p;
}
};
assert(new Effect.Tween(object,0,1,{transition:Effect.Transitions.reverse},'blech'));
assert(new Effect.Tween(object,0,1,'foo'));
// fun with elements
assert(new Effect.Tween('tween',50,1,'update'));
wait(1500, function(){
assertEqual(0, object.blech);
assertEqual(1, object.bar);
assertEqual('1', $('tween').innerHTML);
});
}},
// test if all combined effects correctly initialize themselves
testCombinedEffectsInitialize: function() { with(this) {
COMBINED_EFFECTS.each(function(fx,idx){
info('Effect.'+fx);
$('sandbox').innerHTML = "";
$('sandbox').appendChild(
Builder.node('div',{id:'test_element'},
Builder.node('span','test'))); //some effects require a child element
// should work with new Effect.Blah syntax
var effect = new Effect[fx]('test_element');
assertEqual(0, effect.currentFrame);
// and without the 'new'
var effect = Effect[fx]('test_element');
assertEqual(0, effect.currentFrame);
// visualEffect
assert($('test_element') == $('test_element').visualEffect(COMBINED_RJS_EFFECTS[idx]));
// direct element extension
var method = COMBINED_EFFECTS[idx].charAt(0).toLowerCase() + COMBINED_EFFECTS[idx].substring(1)
assert($('test_element') == $('test_element')[method]());
// options parsing (shake, squish and grow are special here)
if(!['Shake','Squish','Grow'].include(fx)) {
var effect = Effect[fx]('test_element',{duration:2.0});
assertEqual(2.0, effect.options.duration, fx);
}
});
}},
testSynchronizedEffects: function() { with(this) {
var e1 = new Effect.Fade('sandbox',{sync:true});
wait(250, function() {
// effect should still be at frame 0
assertEqual(0, e1.currentFrame);
assertEqual('idle', e1.state);
e1.render(0.01);
// no frame count for sync effects
assertEqual(0, e1.currentFrame);
assertEqual('running', e1.state);
});
}},
testEffectPosition: function() { with(this) {
var testeffect = new Effect.Opacity('sandbox',{
afterSetup: function(effect) { effect.frames = 0; },
afterUpdate: function(effect) { effect.frames++; $('sandbox').update(effect.position); },
duration: 0.5, from: 1.0, to: 0.5
});
assertNull(testeffect.position);
assertEqual('idle', testeffect.state);
wait(1000, function() {
info('Rendered ' + testeffect.frames + ' frames in .5 seconds ' +
'(~' + (testeffect.frames/0.5) + 'fps of a possible 60fps, ' +
'note that this can exceed 60fps because of additional last frame rendering)');
assertEqual('0.5', $('sandbox').innerHTML);
assertEqual(0.5, testeffect.position);
assertEqual('finished', testeffect.state);
});
}},
testRenderPerformance: function() { with(this) {
info('The render() method is generated on a per-effect basis')
var e = new Effect.Opacity('sandbox',{sync:true});
benchmark(function(){
e.render(0.5);
},1000, 'Without events');
var e = new Effect.Opacity('sandbox',{sync:true,afterUpdate:function(){return}});
benchmark(function(){
e.render(0.5);
},1000, 'With afterUpdate event');
}},
testElementMorph: function() { with(this) {
$('error_test_ul').morph('font-size:40px', {duration: 0.5}).setStyle({marginRight:'17px'});
$('error_message_2').morph({
fontSize: '20px',
color: '#f00',
backgroundColor: '#ffffff'
},
{
duration:0.5
});
$('error_message_3').morph('final', {duration:0.5});
wait(1000,function(){
assertEqual('17px', $('error_test_ul').getStyle('margin-right'));
assertEqual('40px', $('error_test_ul').getStyle('font-size'));
assertEqual('#ffffff', $('error_message_2').getStyle('background-color').parseColor());
assertEqual('20px', $('error_message_2').getStyle('font-size'));
assertEqual('italic', $('error_message_3').getStyle('font-style'));
assertEqual('20px', $('error_message_3').getStyle('font-size'));
assertEqual(.5, $('error_message_3').getStyle('opacity'));
assertEqual('', $('error_message_3').style.fontSize);
});
}},
testElementMorphChaining: function() { with(this) {
$('error_message').morph('font-size:17px').morph('opacity:0',{delay:2});
wait(3100,function(){ // 2000ms delay + 1000ms default duration
assertEqual(0, $('error_message').getStyle('opacity'));
});
}},
testTransformBySelector: function() { with(this) {
new Effect.Transform([
{ 'ul.error-list li': 'font-size:20px;text-indent:40pt' }
],{ duration: 0.5 }).play();
wait(700,function(){
var idx = 0;
$A($('error_test_ul').cleanWhitespace().childNodes).each(function(node){
assertEqual('20px', $(node).getStyle('font-size'));
assertEqual('40pt', $(node).getStyle('text-indent'));
idx++;
});
assertEqual(5, idx);
});
}},
testTransformUsesCSSClassPresets: function() { with(this) {
assertEqual('40px', $('rotfl').getStyle('font-size'));
// Render the effect at half-way through, font-size should be
// exactly half-way between original and target
new Effect.Transform([
{ 'rotfl': 'font-size:20px;text-indent:40pt;background-color:#888' }
],{ sync:true }).play().render(0.5);
wait(1100,function(){
// should be 30px = 40px + (20px-40px)/2
assertEqual('30px', $('rotfl').getStyle('font-size'));
});
}},
testTransformMultiple: function() { with(this) {
var transformation = new Effect.Transform([
{ 'div.morphing': 'font-size:20px;padding-left:40em;opacity:0.5' },
{ 'blah' :
'width:480px;border-width:10px;border-right-width:20px;' +
'margin:20px;margin-bottom:-20px;font-size:30px;' +
'background:#954' }
],{ duration: 0.5 });
var generatedEffect = transformation.play();
assertEqual(3, generatedEffect.effects.length);
wait(700, function(){
// have a look at the generated color transforms for the 3rd found element
// which is the "blah" div
assertEqual('blah', generatedEffect.effects[2].element.id);
assertEnumEqual([255,255,255],
generatedEffect.effects[2].transforms.detect( function(transform){
return (transform.style == 'backgroundColor')
}).originalValue);
assertEnumEqual([153,85,68],
generatedEffect.effects[2].transforms.detect( function(transform){
return (transform.style == 'backgroundColor')
}).targetValue);
assertEqual('20px', $$('div.morphing').first().getStyle('font-size'));
assertEqual('20px', $$('div.morphing').last().getStyle('font-size'));
assertEqual('30px', $('blah').getStyle('font-size'));
// border-width/border-right-width should be set independently
assertEqual('10px', $('blah').getStyle('border-top-width'));
assertEqual('10px', $('blah').getStyle('border-bottom-width'));
assertEqual('10px', $('blah').getStyle('border-left-width'));
assertEqual('20px', $('blah').getStyle('border-right-width'));
// colors should assume transition from
// #ffffff (white) if original was transparent
// we now should have arrived at the given color
assertEqual('#995544', $('blah').getStyle('background-color').parseColor());
// play again = should have same values
transformation.play();
wait(700, function(){
assertEqual('20px', $$('div.morphing').first().getStyle('font-size'));
assertEqual('20px', $$('div.morphing').last().getStyle('font-size'));
assertEqual('30px', $('blah').getStyle('font-size'));
$('blah').setStyle({fontSize:'100px'});
assertEqual('100px', $('blah').getStyle('font-size'));
transformation.play();
wait(700, function(){
assertEqual('30px', $('blah').getStyle('font-size'));
new Effect.Transform([
{ 'blah': 'color: #80d980; background: #208020' }
],{ duration: 1.1 }).play();
wait(1500, function(){
assertEqual('#80d980', $('blah').getStyle('color').parseColor());
assertEqual('#208020', $('blah').getStyle('background-color').parseColor());
});
});
});
});
}}
});
// ]]>
</script>
</body>
</html>

116
javascript/scoluos/test/unit/element_test.html Executable file
View File

@@ -0,0 +1,116 @@
<!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" />
<style type="text/css" media="screen">
#style_test_1 { color:rgb(0, 0, 255); background-color: rgb(0, 0, 255); }
blah { color:rgb(0, 255, 0); }
#op2 { opacity:0.5;filter:alpha(opacity=50)progid:DXImageTransform.Microsoft.Blur(strength=10);}
#allStyles_1 {font-size: 12px;}
#allStyles_2 {opacity:0.5; filter:alpha(opacity=50);}
#allStyles_3 {opacity:0.5;}
</style>
</head>
<body>
<h1>script.aculo.us Unit test file</h1>
<p>
Tests for Element extensions in effects.js
</p>
<!-- Log output -->
<div id="testlog"> </div>
<!-- Test elements follow -->
<div id="test_1" class="a bbbbbbbbbbbb cccccccccc dddd"> </div>
<div id="test_2" class="classA-foobar classB-foobar"> </div> <span> </span>
<div id="style_test_1" style="display:none;"></div>
<div id="style_test_2" class="blah" style="font-size:11px;"></div>
<div id="style_test_3">blah</div>
<div id="test_whitespace"> <span> </span>
<div><div></div> </div><span> </span>
</div>
<!-- Test Element opacity functions -->
<img id="op1" alt="op2" src="icon.png" style="opacity:0.5;filter:alpha(opacity=50)" />
<img id="op2" alt="op2" src="icon.png"/>
<img id="op3" alt="op3" src="icon.png"/>
<img id="op4-ie" alt="op3" src="icon.png" style="filter:alpha(opacity=30)" />
<!-- Test Element.childrenWithClassName -->
<div id="Container" class="moo hoo">
<span id="1" class="firstClass">First class</span>
<span id="2" class="secondClass">Second class</span>
<span id="3" class="firstClass secondClass">First and Second class</span>
<span id="4" class="thirdClass">Third class <span id="5" class="firstClass">Nested First class</span></span>
<div id="collect">1<span class="ignore"><span class="someclass">2</span>3</span><ul><li class="ignore">4</li></ul></div>
</div>
<div id="perftest1"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div id="allStyles_1"></div>
<div id="allStyles_2"></div>
<div id="allStyles_3"></div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Test.Unit.Runner({
testElementCollectTextNodes: function() { with(this) {
assertEqual('1234', Element.collectTextNodes('collect'));
assert(benchmark(function(){
Element.collectTextNodes('collect')
},50) < 1000);
benchmark(function(){
Element.collectTextNodes('collect')
},10,'Element.collectTextNodes');
assertEqual('1234', Element.collectTextNodesIgnoreClass('collect', 'somethingcompletelydifferent'));
assertEqual('1', $('collect').collectTextNodesIgnoreClass('ignore'));
benchmark(function(){
Element.collectTextNodesIgnoreClass('collect','ignore')
},10,'Element.collectTextNodesIgnoreClass');
assertEqual('134', Element.collectTextNodesIgnoreClass('collect', 'someclass'));
}},
testVisualEffect: function() { with(this) {
assert($('style_test_3') == $('style_test_3').visualEffect('fade'));
wait(1500,function(){
assert(!$('style_test_3').visible())
});
}},
testParseStylePerformance: function() { with(this) {
benchmark(function(){
"font:12px/15pt Verdana;opacity:0.4;border:4px dotted red".parseStyle();
},100);
}},
testGetStyles: function() { with(this) {
assertEqual('12px', $('allStyles_1').getStyles().fontSize);
assertEqual(1, parseFloat($('allStyles_1').getStyles().opacity));
assertEqual(0.5, parseFloat($('allStyles_2').getStyles().opacity));
assertEqual(0.5, parseFloat($('allStyles_3').getStyles().opacity));
}}
}, "testlog");
// ]]>
</script>
</body>
</html>

BIN
javascript/scoluos/test/unit/icon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 B

70
javascript/scoluos/test/unit/index.html Executable file
View File

@@ -0,0 +1,70 @@
<!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 class="navigation">
<h1>script.aculo.us<br/>Unit Tests</h1>
<p id="version"></p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
$('version').innerHTML = 'script.aculo.us version '+Scriptaculous.Version+'<br/>Prototype version ' + Prototype.Version;
// ]]>
</script>
<p><a href="http://wiki.script.aculo.us/scriptaculous/show/UnitTesting" target="test">Documentation</a></p>
<h2>scriptaculous.js</h2>
<ul>
<li><a href="loading_test.html" target="test">Dynamic loading test</a></li>
</ul>
<h2>effects.js</h2>
<ul>
<li><a href="effects_test.html" target="test">Effects test</a></li>
<li><a href="string_test.html" target="test">String test</a></li>
<li><a href="element_test.html" target="test">Element extensions test</a></li>
<li><a href="position_clone_test.html" target="test">Position.clone test</a></li>
</ul>
<h2>dragdrop.js</h2>
<ul>
<li><a href="dragdrop_test.html" target="test">Drag &amp; Drop test</a></li>
<li><a href="sortable_test.html" target="test">Sortable test</a></li>
</ul>
<h2>builder.js</h2>
<ul>
<li><a href="builder_test.html" target="test">Builder test</a></li>
</ul>
<h2>controls.js</h2>
<ul>
<li><a href="ajax_autocompleter_test.html" target="test">Ajax.Autocompleter test</a></li>
<li><a href="ajax_inplaceeditor_test.html" target="test">Ajax.InPlaceEditor test</a></li>
<li>Note: unit tests work on Firefox only. The controls themselves are fully supported on IE6+, Firefox and Safari.</li>
</ul>
<h2>slider.js</h2>
<ul>
<li><a href="slider_test.html" target="test">Control.Slider test</a></li>
</ul>
<h2>unittest.js</h2>
<ul>
<li><a href="unittest_test.html" target="test">Unittest test</a></li>
<li><a href="bdd_test.html" target="test">BDD test</a></li>
</ul>
</body>
</html>

41
javascript/scoluos/test/unit/loading_test.html Executable file
View File

@@ -0,0 +1,41 @@
<!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?load=effects,dragdrop" 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>
Test dynamic loading in scriptaculous.js
</p>
<!-- Log output -->
<div id="testlog"> </div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Test.Unit.Runner({
testDynamicLoading: function() { with(this) {
// not loaded: controls
assertNull(Ajax.Autocompleter || null);
assertNull(Form.Element.DelayedObserver || null);
// we loading dragdrop
assertNotNull(Draggable || null);
}}
}, "testlog");
// ]]>
</script>
</body>
</html>

312
javascript/scoluos/test/unit/position_clone_test.html Executable file
View File

@@ -0,0 +1,312 @@
<!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 Postion.clone (to be moved to Prototype)
</p>
<!-- Log output -->
<div id="testlog"> </div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function prepareTarget(contained, position1, position2) {
var target;
if($('target_div')) Element.remove('target_div');
if($('container_div')) Element.remove('container_div');
if(contained) {
target = Builder.node('div',
{id: 'container_div', style: 'position:' + position1},
[Builder.node('div', {id: 'target_div', style: 'position: ' +position2})]);
} else {
target = Builder.node('div',
{id: 'target_div', style: 'position:' + position1}, '456');
}
document.body.appendChild(target);
Position.clone($('source_div'),$('target_div'));
}
function prepareTargetHidden(contained, position1, position2) {
var target;
if($('target_div')) Element.remove('target_div');
if($('container_div')) Element.remove('container_div');
if(contained) {
target = Builder.node('div',
{id: 'container_div', style: 'position:' + position1},
[Builder.node('div', {id: 'target_div', style: 'display:none; position: ' +position2})]);
} else {
target = Builder.node('div',
{id: 'target_div', style: 'display:none; position:' + position1}, '456');
}
document.body.appendChild(target);
Position.clone($('source_div'),$('target_div'));
Element.show($('target_div'));
}
new Test.Unit.Runner({
teardown: function() {
Element.remove($('source_div'));
},
testPositionCloneFromAbsolute: function() { with(this) {
var source = Builder.node('div',
{id: 'source_div', style: 'position:absolute; top:20px; left:120px; width:100px; height:50px;'}, '123');
document.body.appendChild(source);
var expected = Object.inspect([120, 20]);
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
prepareTarget(false, 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute BODY child");
prepareTarget(false, 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed BODY child");
prepareTarget(true, 'absolute', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of absolute BODY child");
prepareTarget(true, 'absolute', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of absolute BODY child");
prepareTarget(true, 'relative', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of relative BODY child");
prepareTarget(true, 'relative', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of relative BODY child");
prepareTarget(true, 'static', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of static BODY child");
prepareTarget(true, 'static', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of static BODY child");
}},
testPositionCloneFromRelative: function() { with(this) {
var source = Builder.node('div',
{id: 'source_div', style: 'position:relative; top:20px; left:120px; width:100px; height:50px;'}, '123');
document.body.appendChild(source);
var expected = Object.inspect(Position.page($('source_div')));
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
prepareTarget(false, 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute BODY child");
prepareTarget(false, 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed BODY child");
prepareTarget(true, 'absolute', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of absolute BODY child");
prepareTarget(true, 'absolute', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of absolute BODY child");
prepareTarget(true, 'relative', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of relative BODY child");
prepareTarget(true, 'relative', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of relative BODY child");
prepareTarget(true, 'static', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of static BODY child");
prepareTarget(true, 'static', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of static BODY child");
}},
testPositionCloneFromStatic: function() { with(this) {
var source = Builder.node('div',
{id: 'source_div', style: 'top:20px; left:120px; width:100px; height:50px;'}, '123');
document.body.appendChild(source);
var expected = Object.inspect(Position.page($('source_div')));
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
prepareTarget(false, 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute BODY child");
prepareTarget(false, 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed BODY child");
prepareTarget(true, 'absolute', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of absolute BODY child");
prepareTarget(true, 'absolute', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of absolute BODY child");
prepareTarget(true, 'relative', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of relative BODY child");
prepareTarget(true, 'relative', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of relative BODY child");
prepareTarget(true, 'static', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of static BODY child");
prepareTarget(true, 'static', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of static BODY child");
}},
testPositionCloneFromAbsoluteWithHiddenTarget: function() { with(this) {
var source = Builder.node('div',
{id: 'source_div', style: 'position:absolute; top:20px; left:120px; width:100px; height:50px;'}, '123');
document.body.appendChild(source);
var expected = Object.inspect([120, 20]);
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
prepareTargetHidden(false, 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute BODY child");
prepareTargetHidden(false, 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed BODY child");
prepareTargetHidden(true, 'absolute', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of absolute BODY child");
prepareTargetHidden(true, 'absolute', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of absolute BODY child");
prepareTargetHidden(true, 'relative', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of relative BODY child");
prepareTargetHidden(true, 'relative', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of relative BODY child");
prepareTargetHidden(true, 'static', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of static BODY child");
prepareTargetHidden(true, 'static', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of static BODY child");
}},
testPositionCloneFromRelativeWithHiddenTarget: function() { with(this) {
var source = Builder.node('div',
{id: 'source_div', style: 'position:relative; top:20px; left:120px; width:100px; height:50px;'}, '123');
document.body.appendChild(source);
var expected = Object.inspect(Position.page($('source_div')));
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
prepareTargetHidden(false, 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute BODY child");
prepareTargetHidden(false, 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed BODY child");
prepareTargetHidden(true, 'absolute', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of absolute BODY child");
prepareTargetHidden(true, 'absolute', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of absolute BODY child");
prepareTargetHidden(true, 'relative', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of relative BODY child");
prepareTargetHidden(true, 'relative', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of relative BODY child");
prepareTargetHidden(true, 'static', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of static BODY child");
prepareTargetHidden(true, 'static', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of static BODY child");
}},
testPositionCloneFromStaticWithHiddenTarget: function() { with(this) {
var source = Builder.node('div',
{id: 'source_div', style: 'top:20px; left:120px; width:100px; height:50px;'}, '123');
document.body.appendChild(source);
var expected = Object.inspect(Position.page($('source_div')));
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
prepareTargetHidden(false, 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute BODY child");
prepareTargetHidden(false, 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed BODY child");
prepareTargetHidden(true, 'absolute', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of absolute BODY child");
prepareTargetHidden(true, 'absolute', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of absolute BODY child");
prepareTargetHidden(true, 'relative', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of relative BODY child");
prepareTargetHidden(true, 'relative', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of relative BODY child");
prepareTargetHidden(true, 'static', 'absolute');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to absolute child of static BODY child");
prepareTargetHidden(true, 'static', 'fixed');
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
"Clone to fixed child of static BODY child");
}}
});
// ]]>
</script>
<!-- Test elements will be inserted after this -->
</body>
</html>

437
javascript/scoluos/test/unit/slider_test.html Executable file
View File

@@ -0,0 +1,437 @@
<!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('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>

205
javascript/scoluos/test/unit/sortable_test.html Executable file
View File

@@ -0,0 +1,205 @@
<!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>
Test of sortable functions in dragdrop.js
</p>
<!-- Log output -->
<div id="testlog"> </div>
<ul id="sortable1">
<li id="item_1" class="a">item 1</li>
<li id="item_2" class="c b">item 1<ul><li id="item_99">!!!</li></ul></li>
<li id="item_3" class="b">item 1</li>
<li id="item_xy" class="x y">item 1</li>
<!-- a comment -->
</ul>
<div id="sortable2">
<div id="item_4">item 4</div> <div id="item_5">item 5</div>
<img src="icon.png" alt="img"/>
<!-- a comment -->
</div>
<div id="sortable3">
</div>
<!--
By default, _ is the only valid seperator
for the DOM ids. Complex element ids as in
the form of "some_element_id_1" should also
be parsed correctly (only the last part should
be serialized)
-->
<ul id="sortable_complex">
<li id="a_b_item_1" class="a">item 1</li>
<li id="ab_item_2" class="c b">item 1
<ul>
<li id="item_99">!!!</li>
</ul>
</li>
<li id="a-b-item_3z_33" class="b">item 1</li>
<li id="a-item-xy" class="x y">item 1</li>
<!-- a comment -->
</ul>
<ul id="sortable_specialcreate">
<li id="y1item">item 1</li>
<li id="y2item">item 1<ul><li id="yyyy9928282hjhd">!!!</li></ul></li>
</ul>
<ul id="sortable_specialformat">
<li id="x1item">item 1</li>
<li id="x2item">item 1<ul><li id="xxxxx88888item">!!!</li></ul></li>
</ul>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Test.Unit.Runner({
setup: function() { with(this) {
Sortable.create('sortable1',{only:['a','b']});
Sortable.create('sortable2',{tag:'div'});
Sortable.create('sortable3');
Sortable.create('sortable_specialcreate',{ format:/(\d+)/ });
Sortable.create('sortable_specialformat');
Sortable.create('sortable_complex');
}},
teardown: function() { with(this) {
Sortable.destroy('sortable1');
Sortable.destroy('sortable2');
Sortable.destroy('sortable3');
Sortable.destroy('sortable_specialformat');
Sortable.destroy('sortable_specialcreate');
Sortable.destroy('sortable_complex');
}},
testSortableSerializeSequenceBasics: function() { with(this) {
assertEqual('sortable1[]=1&sortable1[]=2&sortable1[]=3', Sortable.serialize('sortable1'));
// test empty sortable
assertEqual('', Sortable.serialize('sortable3'));
assertEnumEqual([], Sortable.sequence('sortable3'));
Element.remove('item_4');
assertEqual('sortable2[]=5', Sortable.serialize('sortable2'));
assertEnumEqual(['5'], Sortable.sequence('sortable2'));
}},
testSortableSerializeFormat: function() { with(this) {
// should correctly serialize from option given to Sortable.create()
assertEqual('sortable_specialcreate[]=1&sortable_specialcreate[]=2',
Sortable.serialize('sortable_specialcreate'));
benchmark(function(){
Sortable.serialize('sortable_specialcreate')
},1,'Sortable.serialize');
// test special format given explicitly
assertEqual('sortable_specialformat[]=1&sortable_specialformat[]=2',
Sortable.serialize('sortable_specialformat', {format:/(\d+)/}));
// return full id
assertEqual('sortable_specialformat[]=x1item&sortable_specialformat[]=x2item',
Sortable.serialize('sortable_specialformat', {format:/(.*)/}));
// test default format given explicitly
assertEqual('sortable1[]=1&sortable1[]=2&sortable1[]=3',
Sortable.serialize('sortable1',{format:/^[^_]*_(.*)$/}));
// Ensure default options.format handles longer, more complex list
// item IDs
assertEqual('sortable_complex[]=1&sortable_complex[]=2&sortable_complex[]=33&sortable_complex[]=',
Sortable.serialize('sortable_complex'));
}},
testSortableSerializeRule: function() { with(this) {
var ids = ['x','x-y','test_test','x_y_z','x_y-x_z'];
ids.each(function(id){
assertEqual('1',
(id+'_1').match(Sortable.SERIALIZE_RULE)[1]);
});
assertNull('x'.match(Sortable.SERIALIZE_RULE));
}},
testSortableSerializeName: function() { with(this) {
assertEqual('dumdidu[]=1&dumdidu[]=2',
Sortable.serialize('sortable_specialcreate',{name:'dumdidu'}));
}},
testSortableSequenceFormat: function() { with(this) {
// shauld correctly serialize from option given to Sortable.create()
assertEnumEqual(['1','2'],
Sortable.sequence('sortable_specialcreate'));
// test special format given explicitly
assertEnumEqual(['1','2'],
Sortable.sequence('sortable_specialformat', {format:/(\d+)/}));
// return full id
assertEnumEqual(['x1item','x2item'],
Sortable.sequence('sortable_specialformat', {format:/(.*)/}));
// test default format given explicitly
assertEnumEqual(['1','2','3'],
Sortable.sequence('sortable1',{format:/^[^_]*_(.*)$/}));
}},
testSortableFindElements: function() { with(this) {
assertEqual(3, Sortable.findElements($('sortable1'),{tag:'li',only:['a','b']}).length);
benchmark(function(){
Sortable.findElements($('sortable1'),{tag:'li',only:['a','b']})
},1,'Sortable.findElements/1');
assertEqual(1, Sortable.findElements($('sortable1'),{tag:'li',only:['x']}).length);
assertEqual(1, Sortable.findElements($('sortable1'),{tag:'li',only:'a'}).length);
assertEqual(2, Sortable.findElements($('sortable1'),{tag:'li',only:'b'}).length);
assertEqual(4, Sortable.findElements($('sortable1'),{tag:'li',only:['a','b','x']}).length);
}},
testSortableSetSequence: function() { with(this) {
// make sure assigning current sequence is a no-op
var o = Sortable.sequence('sortable1');
Sortable.setSequence('sortable1', ['1','2','3']);
assertEnumEqual(o, Sortable.sequence('sortable1'));
// check new sequence
Sortable.setSequence('sortable1', ['3','2','1']);
assertEnumEqual(['3','2','1'], Sortable.sequence('sortable1'));
// non-default format
Sortable.setSequence('sortable_specialformat', ['2','1'], { format:/(\d+)/ });
assertEnumEqual(['2','1'], Sortable.sequence('sortable_specialformat'));
// invalid sequence ids should be ignored
Sortable.setSequence('sortable1', ['x', '1', 'y', '2', '3', 'z']);
assertEnumEqual(['1', '2', '3'], Sortable.sequence('sortable1'));
// elements omitted in new sequence should be cropped
Sortable.setSequence('sortable1', ['1', '3']);
assertEnumEqual(['1', '3'], Sortable.sequence('sortable1'));
}}
}, "testlog");
// ]]>
</script>
</body>
</html>

71
javascript/scoluos/test/unit/string_test.html Executable file
View File

@@ -0,0 +1,71 @@
<!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 String.prototype extensions in effects.js
</p>
<!-- Log output -->
<div id="testlog"> </div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Test.Unit.Runner({
testStringParseColor: function() { with(this) {
assertEqual('#000000', "#000000".parseColor());
assertEqual('#000000', "rgb(0,0,0)".parseColor());
assertEqual('#000000', "rgb(0, 0, 0)".parseColor());
assertEqual('#000000', "#000".parseColor());
assertEqual('#1', "#1".parseColor());
assertEqual('#12', "#12".parseColor());
assertEqual('#112233', "#123".parseColor());
assertEqual('#1234', "#1234".parseColor());
assertEqual('#12345', "#12345".parseColor());
assertEqual('#123456', "#123456".parseColor());
assertEqual('#abcdef', "#aBcDeF".parseColor());
assertEqual('#aabbcc', "#aBc".parseColor());
assertEqual('white', "white".parseColor());
assertEqual('#123456', "#123456".parseColor('#000000')); // default to #000000 if not parseable
assertEqual('#000000', "white".parseColor('#000000')); // default to #000000 if not parseable
assertEqual('#ffffff', "rgb(255,255,255)".parseColor());
assertEqual('#ff0000', "rgb(255,0,0)".parseColor());
assertEqual('#00ff00', "rgb(0,255,0)".parseColor());
assertEqual('#0000ff', "rgb(0,0,255)".parseColor());
}},
testStringParseStyle: function() { with(this) {
var expected = "#<Hash:{'fontSize': '11px'}>";
var expectedMultiple = "#<Hash:{'fontSize': '11px', 'width': '780px'}>";
assertInspect(expected, "font-size:11px".parseStyle());
assertInspect(expected, "font-SIZE: 11px".parseStyle());
assertInspect(expected, "font-size:11px ".parseStyle());
assertInspect(expected, " Font-size: 11px ".parseStyle());
assertInspect(expectedMultiple, " font-size: 11px;width:780px".parseStyle());
}}
});
// ]]>
</script>
</body>
</html>

154
javascript/scoluos/test/unit/unittest_test.html Executable file
View File

@@ -0,0 +1,154 @@
<!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" />
<style type="text/css" media="screen">
/* <![CDATA[ */
#testcss1 { font-size:11px; color: #f00; }
#testcss2 { font-size:12px; color: #0f0; display: none; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Unit test file</h1>
<p>
This is a preliminary version mostly for testing the unittest library.
</p>
<!-- Log output -->
<div id="testlog"> </div>
<!-- Test elements follow -->
<div id="test_1" class="a bbbbbbbbbbbb cccccccccc dddd"> </div>
<div id="test_2"> <span> </span>
<div><div></div> </div><span> </span>
</div>
<ul id="tlist"><li id="tlist_1">x1</li><li id="tlist_2">x2</li></ul>
<ul id="tlist2"><li class="a" id="tlist2_1">x1</li><li id="tlist2_2">x2</li></ul>
<div id="testmoveby" style="background-color:#333;width:100px;">XXXX</div>
<div id="testcss1">testcss1<span id="testcss1_span" style="display:none;">blah</span></div><div id="testcss2">testcss1</div>
<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
var testObj = {
isNice: function(){
return true;
},
isBroken: function(){
return false;
}
}
new Test.Unit.Runner({
testAssertEqual: function() { with(this) {
assertEqual(0, 0);
assertEqual(0, 0, "test");
assertEqual(0,'0');
assertEqual(65.0, 65);
assertEqual("a", "a");
assertEqual("a", "a", "test");
assertNotEqual(0, 1);
assertNotEqual("a","b");
assertNotEqual({},{});
assertNotEqual([],[]);
assertNotEqual([],{});
}},
testAssertRespondsTo: function() { with(this) {
assertRespondsTo('isNice', testObj);
assertRespondsTo('isBroken', testObj);
}},
testAssertIndentical: function() { with(this) {
assertIdentical(0, 0);
assertIdentical(0, 0, "test");
assertIdentical(1, 1);
assertIdentical('a', 'a');
assertIdentical('a', 'a', "test");
assertIdentical('', '');
assertIdentical(undefined, undefined);
assertIdentical(null, null);
assertIdentical(true, true);
assertIdentical(false, false);
var obj = {a:'b'};
assertIdentical(obj, obj);
assertNotIdentical({1:2,3:4},{1:2,3:4});
assertIdentical(1, 1.0); // both are typeof == 'number'
assertNotIdentical(1, '1');
assertNotIdentical(1, '1.0');
}},
testAssertMatch: function() { with(this) {
assertMatch(/knowmad.jpg$/, 'http://script.aculo.us/images/knowmad.jpg');
assertMatch(/Fuc/, 'Thomas Fuchs');
assertMatch(/^\$(\d{1,3}(\,\d{3})*|(\d+))(\.\d{2})?$/, '$19.95');
assertMatch(/(\d{3}\) ?)|(\d{3}[- \.])?\d{3}[- \.]\d{4}(\s(x\d+)?){0,1}$/, '704-343-9330');
assertMatch(/^(?:(?:(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(\/|-|\.)(?:0?2\1(?:29)))|(?:(?:(?:1[6-9]|[2-9]\d)?\d{2})(\/|-|\.)(?:(?:(?:0?[13578]|1[02])\2(?:31))|(?:(?:0?[1,3-9]|1[0-2])\2(29|30))|(?:(?:0?[1-9])|(?:1[0-2]))\2(?:0?[1-9]|1\d|2[0-8]))))$/, '2001-06-16');
assertMatch(/^((0?[123456789])|(1[012]))\s*:\s*([012345]\d)(\s*:\s*([012345]\d))?\s*[ap]m\s*-\s*((0?[123456789])|(1[012]))\s*:\s*([012345]\d)(\s*:\s*([012345]\d))?\s*[ap]m$/i, '2:00PM-2:15PM');
}},
testAssertInstanceOf: function() { with(this) {
assertInstanceOf(Effect.Opacity, new Effect.Opacity('testcss1',{sync:true}));
assertNotInstanceOf(String, new Effect.Opacity('testcss1',{sync:true}));
// note: fails with firefox 1.0.X (bug, fixed in Deer Park)
assertNotInstanceOf(Effect.Parallel, new Effect.Opacity('testcss1',{sync:true}), "(note: fails with firefox 1.0.X, fixed in Deer Park)");
}},
testAssertReturns: function() { with(this) {
assertReturnsTrue('isNice',testObj);
assertReturnsFalse('isBroken',testObj);
assertReturnsTrue('nice',testObj);
assertReturnsFalse('broken',testObj);
}},
testAssertVisible: function() { with(this) {
assertVisible('testcss1');
assertNotVisible('testcss1_span');
assertNotVisible('testcss2', "Due to a Safari bug, this test fails in Safari.");
Element.hide('testcss1');
assertNotVisible('testcss1');
assertNotVisible('testcss1_span');
Element.show('testcss1');
assertVisible('testcss1');
assertNotVisible('testcss1_span');
Element.show('testcss1_span');
assertVisible('testcss1_span');
Element.hide('testcss1');
assertNotVisible('testcss1_span'); // hidden by parent
}}
}, "testlog");
// ]]>
</script>
</body>
</html>