1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/tests/mochitest/ajax/scriptaculous/test/unit/effects_test.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,250 @@
1.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
1.5 + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.6 +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
1.7 +<head>
1.8 + <title>script.aculo.us Unit test file</title>
1.9 + <meta http-equiv="content-type" content="text/html; charset=utf-8" />
1.10 + <script src="../../lib/prototype.js" type="text/javascript"></script>
1.11 + <script src="../../src/scriptaculous.js" type="text/javascript"></script>
1.12 + <script src="../../src/unittest.js" type="text/javascript"></script>
1.13 + <link rel="stylesheet" href="../test.css" type="text/css" />
1.14 + <style type="text/css" media="screen">
1.15 + #rotfl {
1.16 + color: red;
1.17 + font-family: serif;
1.18 + font-style: italic;
1.19 + font-size: 40px;
1.20 + background: #fed;
1.21 + padding: 1em;
1.22 + width: 400px;
1.23 + }
1.24 + .final {
1.25 + color: #fff;
1.26 + font-style: italic;
1.27 + font-size: 20px;
1.28 + background: #000;
1.29 + opacity: 0.5;
1.30 + }
1.31 + </style>
1.32 +</head>
1.33 +<body>
1.34 +<h1>script.aculo.us Unit test file</h1>
1.35 +<p>
1.36 + Tests for effects.js
1.37 +</p>
1.38 +
1.39 +<!-- generated elements go in here -->
1.40 +<div id="sandbox"></div>
1.41 +
1.42 +<!-- Log output -->
1.43 +<div id="testlog"> </div>
1.44 +
1.45 +<div class="morphing blub" style="font-size:25px;color:#f00">Well</div>
1.46 +<div class="morphing">You know</div>
1.47 +<div id="blah" style="border:1px solid black;width:100px">Whoo-hoo!</div>
1.48 +
1.49 +<div id="error_message">ERROR MESSAGE</div>
1.50 +<div id="error_message_2">SECOND ERROR MESSAGE</div>
1.51 +<div id="error_message_3" style="border:1px solid red; width:100px; color: #f00">THIRD ERROR MESSAGE</div>
1.52 +
1.53 +<ul class="error-list" id="error_test_ul">
1.54 + <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li>
1.55 + <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
1.56 + <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</li>
1.57 + <li>nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</li>
1.58 + <li>reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
1.59 +</ul>
1.60 +
1.61 +<div id="rotfl">ROTFL</div>
1.62 +
1.63 +<!-- Tests follow -->
1.64 +<script type="text/javascript" language="javascript" charset="utf-8">
1.65 +// <![CDATA[
1.66 +
1.67 + var TAGS =
1.68 + ['div','span','ol','ul','table','p','h1','h2','h3','h4','h5','h6'];
1.69 +
1.70 + var COMBINED_EFFECTS =
1.71 + ['Fade','Appear','BlindUp','BlindDown','Puff','SwitchOff','DropOut','Shake',
1.72 + 'SlideUp','SlideDown','Pulsate','Squish','Fold','Grow','Shrink'];
1.73 +
1.74 + var COMBINED_RJS_EFFECTS = $w('fade appear blind_up blind_down puff switch_off '+
1.75 + 'drop_out shake slide_up slide_down pulsate squish fold grow shrink');
1.76 +
1.77 + var tmp, tmp2;
1.78 +
1.79 + new Test.Unit.Runner({
1.80 +
1.81 + setup: function() { with (this) {
1.82 + $('sandbox').innerHTML = "";
1.83 + }},
1.84 +
1.85 + teardown: function() { with(this) {
1.86 + // remove all queued effects
1.87 + Effect.Queue.each(function(e) { e.cancel() });
1.88 + }},
1.89 +
1.90 + testBackwardsCompat: function() { with(this) {
1.91 + assertInstanceOf(Effect.Opacity, new Effect2.Fade('sandbox'));
1.92 + }},
1.93 +
1.94 + testExceptionOnNonExistingElement: function() { with(this) {
1.95 + assertRaise('ElementDoesNotExistError',
1.96 + function(){new Effect.Opacity('nothing-to-see-here')});
1.97 + assertRaise('ElementDoesNotExistError',
1.98 + function(){new Effect.Move('nothing-to-see-here')});
1.99 + assertRaise('ElementDoesNotExistError',
1.100 + function(){new Effect.Scale('nothing-to-see-here')});
1.101 + assertRaise('ElementDoesNotExistError',
1.102 + function(){new Effect.Highlight('nothing-to-see-here')});
1.103 + }},
1.104 +
1.105 + testEffectsQueue: function() { with(this) {
1.106 + var e1 = new Effect.Highlight('sandbox');
1.107 + var e2 = new Effect.Appear('sandbox');
1.108 +
1.109 + assertEqual(2, Effect.Queue.effects.length);
1.110 +
1.111 + tmp = 0;
1.112 + Effect.Queue.each(function(e) { tmp++ });
1.113 + assertEqual(2, tmp);
1.114 +
1.115 + // the internal interval timer should be active
1.116 + assertNotNull(Effect.Queue.interval);
1.117 + e1.cancel();
1.118 + e2.cancel();
1.119 + assertEqual(0, Effect.Queue.effects.length);
1.120 +
1.121 + // should be inactive after all effects are removed from queue
1.122 + assertNull(Effect.Queue.interval);
1.123 +
1.124 + // should be in e3,e1,e2 order
1.125 + var e1 = new Effect.Highlight('sandbox');
1.126 + var e2 = new Effect.Appear('sandbox',{queue:'end'});
1.127 + var e3 = new Effect.Fade('sandbox',{queue:'front'});
1.128 + assert(e2.startOn > e1.startOn);
1.129 + assert(e3.startOn < e1.startOn);
1.130 + assert(e3.startOn < e2.startOn);
1.131 + assertEqual(3, Effect.Queue.effects.length);
1.132 +
1.133 + Effect.Queue.each(function(e) { e.cancel() });
1.134 + assertEqual(0, Effect.Queue.effects.length);
1.135 + }},
1.136 +
1.137 + testScopedEffectsQueue: function() { with(this) {
1.138 + var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope'} } );
1.139 + var e2 = new Effect.Appear('sandbox', {queue: {scope:'myscope'} } );
1.140 + var e3 = new Effect.Highlight('sandbox', {queue: {scope:'secondscope'} } );
1.141 + var e4 = new Effect.Appear('sandbox');
1.142 +
1.143 + assertEqual(2, Effect.Queues.get('myscope').effects.length);
1.144 + assertEqual(1, Effect.Queues.get('secondscope').effects.length);
1.145 + assertEqual(1, Effect.Queues.get('global').effects.length);
1.146 + assertEqual(Effect.Queue.effects.length, Effect.Queues.get('global').effects.length);
1.147 +
1.148 + var tmp = 0;
1.149 + Effect.Queues.get('myscope').effects.each(function(e) { tmp++ });
1.150 + assertEqual(2, tmp);
1.151 +
1.152 + // the internal interval timer should be active
1.153 + assertNotNull(Effect.Queues.get('myscope').interval);
1.154 + assertNotNull(Effect.Queues.get('secondscope').interval);
1.155 + assertNotNull(Effect.Queues.get('global').interval);
1.156 +
1.157 + e1.cancel(); e2.cancel(); e3.cancel(); e4.cancel();
1.158 +
1.159 + assertEqual(0, Effect.Queues.get('myscope').effects.length);
1.160 + assertEqual(0, Effect.Queues.get('secondscope').effects.length);
1.161 + assertEqual(0, Effect.Queues.get('global').effects.length);
1.162 +
1.163 + // should be inactive after all effects are removed from queues
1.164 + assertNull(Effect.Queues.get('myscope').interval);
1.165 + assertNull(Effect.Queues.get('secondscope').interval);
1.166 + assertNull(Effect.Queues.get('global').interval);
1.167 +
1.168 + // should be in e3 and e4 together and then e1,e2 order
1.169 + var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope'} } );
1.170 + var e2 = new Effect.Appear('sandbox', {queue: {position: 'end', scope:'myscope'} } );
1.171 + var e3 = new Effect.Fade('sandbox', {queue: {position: 'front', scope:'myscope'} } );
1.172 + var e4 = new Effect.Appear('sandbox');
1.173 + assert(e2.startOn > e1.startOn);
1.174 + assert(e3.startOn < e1.startOn);
1.175 + assert(e3.startOn < e2.startOn);
1.176 + assert(e3.startOn = e4.startOn);
1.177 + assertEqual(3, Effect.Queues.get('myscope').effects.length);
1.178 +
1.179 + Effect.Queues.get('myscope').each(function(e) { e.cancel() });
1.180 + assertEqual(0, Effect.Queues.get('myscope').effects.length);
1.181 +
1.182 + Effect.Queues.get('global').each(function(e) { e.cancel() });
1.183 + assertEqual(0, Effect.Queues.get('global').effects.length);
1.184 +
1.185 + // should only allow the first two effects and ignore the third
1.186 + var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope', limit: 2} } );
1.187 + var e2 = new Effect.Appear('sandbox', {queue: {position: 'end', scope:'myscope', limit: 2} } );
1.188 + var e3 = new Effect.Fade('sandbox', {queue: {position: 'front', scope:'myscope', limit: 2} } );
1.189 +
1.190 + assertEqual(2, Effect.Queues.get('myscope').effects.length);
1.191 + }},
1.192 +
1.193 + testEffectMultiple: function() { with(this) {
1.194 + $('sandbox').appendChild(Builder.node('div',{id:'test_1'}));
1.195 + $('sandbox').appendChild(Builder.node('div',{id:'test_2'},[Builder.node('div',{id:'test_2a'})]));
1.196 + $('sandbox').appendChild(Builder.node('div',{id:'test_3'}));
1.197 +
1.198 + // only direct child elements
1.199 + Effect.multiple('sandbox',Effect.Fade);
1.200 + assertEqual(3, Effect.Queue.effects.length);
1.201 +
1.202 + Effect.Queue.each(function(e) { e.cancel() });
1.203 + assertEqual(0, Effect.Queue.effects.length);
1.204 +
1.205 + // call with array
1.206 + Effect.multiple(['test_1','test_3'],Effect.Puff);
1.207 + assertEqual(2, Effect.Queue.effects.length);
1.208 + }},
1.209 +
1.210 + testEffectTagifyText: function() { with(this) {
1.211 + $('sandbox').innerHTML = "Blah<strong>bleb</strong> Blub";
1.212 + assertEqual(3, $('sandbox').childNodes.length);
1.213 + Effect.tagifyText('sandbox');
1.214 + assertEqual(10, $('sandbox').childNodes.length);
1.215 +
1.216 + Effect.multiple('sandbox', Effect.Fade);
1.217 + assertEqual(10, Effect.Queue.effects.length);
1.218 + }},
1.219 +
1.220 + // test if all combined effects correctly initialize themselves
1.221 + testCombinedEffectsInitialize: function() { with(this) {
1.222 + COMBINED_EFFECTS.each(function(fx,idx){
1.223 + info('Effect.'+fx);
1.224 + $('sandbox').innerHTML = "";
1.225 + $('sandbox').appendChild(
1.226 + Builder.node('div',{id:'test_element'},
1.227 + Builder.node('span','test'))); //some effects require a child element
1.228 +
1.229 + // should work with new Effect.Blah syntax
1.230 + var effect = new Effect[fx]('test_element');
1.231 + assertEqual(0, effect.currentFrame);
1.232 +
1.233 + // and without the 'new'
1.234 + var effect = Effect[fx]('test_element');
1.235 + assertEqual(0, effect.currentFrame);
1.236 +
1.237 + // and, for visualEffect
1.238 + assert($('test_element') == $('test_element').visualEffect(COMBINED_RJS_EFFECTS[idx]));
1.239 +
1.240 + // options parsing (shake, squish and grow are special here)
1.241 + if(!['Shake','Squish','Grow'].include(fx)) {
1.242 + var effect = Effect[fx]('test_element',{duration:2.0});
1.243 + assertEqual(2.0, effect.options.duration, fx);
1.244 + }
1.245 + });
1.246 + }},
1.247 +
1.248 + });
1.249 +
1.250 +// ]]>
1.251 +</script>
1.252 +</body>
1.253 +</html>
