The Tor Browser / file comparison
comparison: dom/tests/mochitest/ajax/scriptaculous/test/unit/effects_test.html
dom/tests/mochitest/ajax/scriptaculous/test/unit/effects_test.html
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:20170370cccf |
|---|---|
| 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> |
