📄 effects_test.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>script.aculo.us Unit test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="../../lib/prototype.js" type="text/javascript"></script> <script src="../../src/scriptaculous.js" type="text/javascript"></script> <script src="../../src/unittest.js" type="text/javascript"></script> <link rel="stylesheet" href="../test.css" type="text/css" /> <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} } ); ⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -