📄 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" /></head><body><h1>script.aculo.us Unit test file</h1><p> Tests the effects</p><!-- generated elements go in here --><div id="sandbox"></div><!-- Log output --><div id="testlog"> </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 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')}); }}, 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); }); }}, testInspect: function() { with(this) { var e1 = new Effect.Opacity('sandbox',{from:1.0,to:0.5,duration:0.5}); 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); }}, // test if all combined effects correctly initialize themselves testCombinedEffectsInitialize: function() { with(this) { COMBINED_EFFECTS.each(function(fx){ 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); // 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); }); }} });// ]]></script></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -