diff options
Diffstat (limited to 'dom/tests/mochitest/ajax/scriptaculous/test/unit/effects_test.html')
| -rw-r--r-- | dom/tests/mochitest/ajax/scriptaculous/test/unit/effects_test.html | 250 |
1 files changed, 250 insertions, 0 deletions
diff --git a/dom/tests/mochitest/ajax/scriptaculous/test/unit/effects_test.html b/dom/tests/mochitest/ajax/scriptaculous/test/unit/effects_test.html new file mode 100644 index 0000000000..4fb6296589 --- /dev/null +++ b/dom/tests/mochitest/ajax/scriptaculous/test/unit/effects_test.html @@ -0,0 +1,250 @@ +<!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; + font-size: 20px; + background: #000; + opacity: 0.5; + } + </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> + +<!-- 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() }); + }}, + + testBackwardsCompat: function() { with(this) { + assertInstanceOf(Effect.Opacity, new Effect2.Fade('sandbox')); + }}, + + 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')}); + }}, + + 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); + }}, + + // 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); + + // and, for visualEffect + assert($('test_element') == $('test_element').visualEffect(COMBINED_RJS_EFFECTS[idx])); + + // 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); + } + }); + }}, + + }); + +// ]]> +</script> +</body> +</html> |