effects_test.html (9691B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 4 <head> 5 <title>script.aculo.us Unit test file</title> 6 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 7 <script src="../../lib/prototype.js" type="text/javascript"></script> 8 <script src="../../src/scriptaculous.js" type="text/javascript"></script> 9 <script src="../../src/unittest.js" type="text/javascript"></script> 10 <link rel="stylesheet" href="../test.css" type="text/css" /> 11 <style type="text/css" media="screen"> 12 #rotfl { 13 color: red; 14 font-family: serif; 15 font-style: italic; 16 font-size: 40px; 17 background: #fed; 18 padding: 1em; 19 width: 400px; 20 } 21 .final { 22 color: #fff; 23 font-style: italic; 24 font-size: 20px; 25 background: #000; 26 opacity: 0.5; 27 } 28 </style> 29 </head> 30 <body> 31 <h1>script.aculo.us Unit test file</h1> 32 <p> 33 Tests for effects.js 34 </p> 35 36 <!-- generated elements go in here --> 37 <div id="sandbox"></div> 38 39 <!-- Log output --> 40 <div id="testlog"> </div> 41 42 <div class="morphing blub" style="font-size:25px;color:#f00">Well</div> 43 <div class="morphing">You know</div> 44 <div id="blah" style="border:1px solid black;width:100px">Whoo-hoo!</div> 45 46 <div id="error_message">ERROR MESSAGE</div> 47 <div id="error_message_2">SECOND ERROR MESSAGE</div> 48 <div id="error_message_3" style="border:1px solid red; width:100px; color: #f00">THIRD ERROR MESSAGE</div> 49 50 <ul class="error-list" id="error_test_ul"> 51 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li> 52 <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 53 <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</li> 54 <li>nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</li> 55 <li>reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li> 56 </ul> 57 58 <div id="rotfl">ROTFL</div> 59 60 <!-- Tests follow --> 61 <script type="text/javascript" language="javascript" charset="utf-8"> 62 // <![CDATA[ 63 64 var TAGS = 65 ['div','span','ol','ul','table','p','h1','h2','h3','h4','h5','h6']; 66 67 var COMBINED_EFFECTS = 68 ['Fade','Appear','BlindUp','BlindDown','Puff','SwitchOff','DropOut','Shake', 69 'SlideUp','SlideDown','Pulsate','Squish','Fold','Grow','Shrink']; 70 71 var COMBINED_RJS_EFFECTS = $w('fade appear blind_up blind_down puff switch_off '+ 72 'drop_out shake slide_up slide_down pulsate squish fold grow shrink'); 73 74 var tmp, tmp2; 75 76 new Test.Unit.Runner({ 77 78 setup: function() { with (this) { 79 $('sandbox').innerHTML = ""; 80 }}, 81 82 teardown: function() { with(this) { 83 // remove all queued effects 84 Effect.Queue.each(function(e) { e.cancel() }); 85 }}, 86 87 testBackwardsCompat: function() { with(this) { 88 assertInstanceOf(Effect.Opacity, new Effect2.Fade('sandbox')); 89 }}, 90 91 testExceptionOnNonExistingElement: function() { with(this) { 92 assertRaise('ElementDoesNotExistError', 93 function(){new Effect.Opacity('nothing-to-see-here')}); 94 assertRaise('ElementDoesNotExistError', 95 function(){new Effect.Move('nothing-to-see-here')}); 96 assertRaise('ElementDoesNotExistError', 97 function(){new Effect.Scale('nothing-to-see-here')}); 98 assertRaise('ElementDoesNotExistError', 99 function(){new Effect.Highlight('nothing-to-see-here')}); 100 }}, 101 102 testEffectsQueue: function() { with(this) { 103 var e1 = new Effect.Highlight('sandbox'); 104 var e2 = new Effect.Appear('sandbox'); 105 106 assertEqual(2, Effect.Queue.effects.length); 107 108 tmp = 0; 109 Effect.Queue.each(function(e) { tmp++ }); 110 assertEqual(2, tmp); 111 112 // the internal interval timer should be active 113 assertNotNull(Effect.Queue.interval); 114 e1.cancel(); 115 e2.cancel(); 116 assertEqual(0, Effect.Queue.effects.length); 117 118 // should be inactive after all effects are removed from queue 119 assertNull(Effect.Queue.interval); 120 121 // should be in e3,e1,e2 order 122 var e1 = new Effect.Highlight('sandbox'); 123 var e2 = new Effect.Appear('sandbox',{queue:'end'}); 124 var e3 = new Effect.Fade('sandbox',{queue:'front'}); 125 assert(e2.startOn > e1.startOn); 126 assert(e3.startOn < e1.startOn); 127 assert(e3.startOn < e2.startOn); 128 assertEqual(3, Effect.Queue.effects.length); 129 130 Effect.Queue.each(function(e) { e.cancel() }); 131 assertEqual(0, Effect.Queue.effects.length); 132 }}, 133 134 testScopedEffectsQueue: function() { with(this) { 135 var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope'} } ); 136 var e2 = new Effect.Appear('sandbox', {queue: {scope:'myscope'} } ); 137 var e3 = new Effect.Highlight('sandbox', {queue: {scope:'secondscope'} } ); 138 var e4 = new Effect.Appear('sandbox'); 139 140 assertEqual(2, Effect.Queues.get('myscope').effects.length); 141 assertEqual(1, Effect.Queues.get('secondscope').effects.length); 142 assertEqual(1, Effect.Queues.get('global').effects.length); 143 assertEqual(Effect.Queue.effects.length, Effect.Queues.get('global').effects.length); 144 145 var tmp = 0; 146 Effect.Queues.get('myscope').effects.each(function(e) { tmp++ }); 147 assertEqual(2, tmp); 148 149 // the internal interval timer should be active 150 assertNotNull(Effect.Queues.get('myscope').interval); 151 assertNotNull(Effect.Queues.get('secondscope').interval); 152 assertNotNull(Effect.Queues.get('global').interval); 153 154 e1.cancel(); e2.cancel(); e3.cancel(); e4.cancel(); 155 156 assertEqual(0, Effect.Queues.get('myscope').effects.length); 157 assertEqual(0, Effect.Queues.get('secondscope').effects.length); 158 assertEqual(0, Effect.Queues.get('global').effects.length); 159 160 // should be inactive after all effects are removed from queues 161 assertNull(Effect.Queues.get('myscope').interval); 162 assertNull(Effect.Queues.get('secondscope').interval); 163 assertNull(Effect.Queues.get('global').interval); 164 165 // should be in e3 and e4 together and then e1,e2 order 166 var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope'} } ); 167 var e2 = new Effect.Appear('sandbox', {queue: {position: 'end', scope:'myscope'} } ); 168 var e3 = new Effect.Fade('sandbox', {queue: {position: 'front', scope:'myscope'} } ); 169 var e4 = new Effect.Appear('sandbox'); 170 assert(e2.startOn > e1.startOn); 171 assert(e3.startOn < e1.startOn); 172 assert(e3.startOn < e2.startOn); 173 assert(e3.startOn = e4.startOn); 174 assertEqual(3, Effect.Queues.get('myscope').effects.length); 175 176 Effect.Queues.get('myscope').each(function(e) { e.cancel() }); 177 assertEqual(0, Effect.Queues.get('myscope').effects.length); 178 179 Effect.Queues.get('global').each(function(e) { e.cancel() }); 180 assertEqual(0, Effect.Queues.get('global').effects.length); 181 182 // should only allow the first two effects and ignore the third 183 var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope', limit: 2} } ); 184 var e2 = new Effect.Appear('sandbox', {queue: {position: 'end', scope:'myscope', limit: 2} } ); 185 var e3 = new Effect.Fade('sandbox', {queue: {position: 'front', scope:'myscope', limit: 2} } ); 186 187 assertEqual(2, Effect.Queues.get('myscope').effects.length); 188 }}, 189 190 testEffectMultiple: function() { with(this) { 191 $('sandbox').appendChild(Builder.node('div',{id:'test_1'})); 192 $('sandbox').appendChild(Builder.node('div',{id:'test_2'},[Builder.node('div',{id:'test_2a'})])); 193 $('sandbox').appendChild(Builder.node('div',{id:'test_3'})); 194 195 // only direct child elements 196 Effect.multiple('sandbox',Effect.Fade); 197 assertEqual(3, Effect.Queue.effects.length); 198 199 Effect.Queue.each(function(e) { e.cancel() }); 200 assertEqual(0, Effect.Queue.effects.length); 201 202 // call with array 203 Effect.multiple(['test_1','test_3'],Effect.Puff); 204 assertEqual(2, Effect.Queue.effects.length); 205 }}, 206 207 testEffectTagifyText: function() { with(this) { 208 $('sandbox').innerHTML = "Blah<strong>bleb</strong> Blub"; 209 assertEqual(3, $('sandbox').childNodes.length); 210 Effect.tagifyText('sandbox'); 211 assertEqual(10, $('sandbox').childNodes.length); 212 213 Effect.multiple('sandbox', Effect.Fade); 214 assertEqual(10, Effect.Queue.effects.length); 215 }}, 216 217 // test if all combined effects correctly initialize themselves 218 testCombinedEffectsInitialize: function() { with(this) { 219 COMBINED_EFFECTS.each(function(fx,idx){ 220 info('Effect.'+fx); 221 $('sandbox').innerHTML = ""; 222 $('sandbox').appendChild( 223 Builder.node('div',{id:'test_element'}, 224 Builder.node('span','test'))); //some effects require a child element 225 226 // should work with new Effect.Blah syntax 227 var effect = new Effect[fx]('test_element'); 228 assertEqual(0, effect.currentFrame); 229 230 // and without the 'new' 231 var effect = Effect[fx]('test_element'); 232 assertEqual(0, effect.currentFrame); 233 234 // and, for visualEffect 235 assert($('test_element') == $('test_element').visualEffect(COMBINED_RJS_EFFECTS[idx])); 236 237 // options parsing (shake, squish and grow are special here) 238 if(!['Shake','Squish','Grow'].include(fx)) { 239 var effect = Effect[fx]('test_element',{duration:2.0}); 240 assertEqual(2.0, effect.options.duration, fx); 241 } 242 }); 243 }}, 244 245 }); 246 247 // ]]> 248 </script> 249 </body> 250 </html>