effects_test.html

scriptaculous是ajax的一个框架

      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);
    }},
    
    testEffectParallel: function() { with(this) {
      assert( new Effect.Parallel() );
      assert( new Effect.Parallel([]) );
      assert( new Effect.Parallel([],{}) );
      assert( new Effect.Parallel([
        new Effect.Event({sync:true})
      ],{ duration: 2}) );
    }},
    
    testEffectTween: function() { with(this) {
      // basic initialization
      assert(new Effect.Tween(null,0,0,function(){}));
      assert(new Effect.Tween(null,0,0,{duration:0.1},function(){}));

      // fun with objects
      var object = { 
        blech: 2, 
        foo: function(p){
          this.bar = p;
        }
      };
      assert(new Effect.Tween(object,0,1,{transition:Effect.Transitions.reverse},'blech'));
      assert(new Effect.Tween(object,0,1,'foo'));
      
      // fun with elements
      assert(new Effect.Tween('tween',50,1,'update'));
      
      wait(1500, function(){  
        assertEqual(0, object.blech);
        assertEqual(1, object.bar);
        assertEqual('1', $('tween').innerHTML);
      });
    }},

    // test if all combined effects correctly initialize themselves
    testCombinedEffectsInitialize: function() { with(this) {
      COMBINED_EFFECTS.each(function(fx,idx){
        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);
        
        // visualEffect
        assert($('test_element') == $('test_element').visualEffect(COMBINED_RJS_EFFECTS[idx]));
        
        // direct element extension
        var method = COMBINED_EFFECTS[idx].charAt(0).toLowerCase() + COMBINED_EFFECTS[idx].substring(1)
        assert($('test_element') == $('test_element')[method]());
        
        // 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);
      });
    }},
    
    testRenderPerformance: function() { with(this) {
      info('The render() method is generated on a per-effect basis')
      var e = new Effect.Opacity('sandbox',{sync:true});
      benchmark(function(){
        e.render(0.5);
      },1000, 'Without events');
      var e = new Effect.Opacity('sandbox',{sync:true,afterUpdate:function(){return}});
      benchmark(function(){
        e.render(0.5);
      },1000, 'With afterUpdate event');      
    }},
    
    testElementMorph: function() { with(this) {
      $('error_test_ul').morph('font-size:40px', {duration: 0.5}).setStyle({marginRight:'17px'});
      $('error_message_2').morph({
        fontSize:         '20px',
        color:            '#f00',
        backgroundColor:  '#ffffff'
      },
      {
        duration:0.5
      });
      $('error_message_3').morph('final', {duration:0.5});
      wait(1000,function(){
        assertEqual('17px', $('error_test_ul').getStyle('margin-right'));
        assertEqual('40px', $('error_test_ul').getStyle('font-size'));
        assertEqual('#ffffff', $('error_message_2').getStyle('background-color').parseColor());
        assertEqual('20px', $('error_message_2').getStyle('font-size'));
        assertEqual('italic', $('error_message_3').getStyle('font-style'));
        assertEqual('20px', $('error_message_3').getStyle('font-size'));
        assertEqual(.5, $('error_message_3').getStyle('opacity'));
        assertEqual('', $('error_message_3').style.fontSize);
      });
    }},

    testElementMorphChaining: function() { with(this) {
      $('error_message').morph('font-size:17px').morph('opacity:0',{delay:2});
      wait(3100,function(){ // 2000ms delay + 1000ms default duration
        assertEqual(0, $('error_message').getStyle('opacity'));
      });
    }},

    testTransformBySelector: function() { with(this) {
      new Effect.Transform([
        { 'ul.error-list li': 'font-size:20px;text-indent:40pt' }
      ],{ duration: 0.5 }).play();

      wait(700,function(){
        var idx = 0;
        $A($('error_test_ul').cleanWhitespace().childNodes).each(function(node){
          assertEqual('20px', $(node).getStyle('font-size'));
          assertEqual('40pt', $(node).getStyle('text-indent'));
          idx++;
        });
        assertEqual(5, idx);
      });
    }},

    testTransformUsesCSSClassPresets: function() { with(this) {
      assertEqual('40px', $('rotfl').getStyle('font-size'));

      // Render the effect at half-way through, font-size should be
      // exactly half-way between original and target
      new Effect.Transform([
        { 'rotfl': 'font-size:20px;text-indent:40pt;background-color:#888' }
      ],{ sync:true }).play().render(0.5);

      wait(1100,function(){
        // should be 30px = 40px + (20px-40px)/2
        assertEqual('30px', $('rotfl').getStyle('font-size'));
      });
    }},

    testTransformMultiple: function() { with(this) {
      var transformation = new Effect.Transform([
        { 'div.morphing': 'font-size:20px;padding-left:40em;opacity:0.5' },
        { 'blah'        : 
          'width:480px;border-width:10px;border-right-width:20px;' +
          'margin:20px;margin-bottom:-20px;font-size:30px;' +
          'background:#954' }
      ],{ duration: 0.5 });

      var generatedEffect = transformation.play();

      assertEqual(3, generatedEffect.effects.length);

      wait(700, function(){
        // have a look at the generated color transforms for the 3rd found element
        // which is the "blah" div
        assertEqual('blah', generatedEffect.effects[2].element.id);
        assertEnumEqual([255,255,255], 
          generatedEffect.effects[2].transforms.detect( function(transform){
            return (transform.style == 'backgroundColor')
          }).originalValue);
        assertEnumEqual([153,85,68], 
          generatedEffect.effects[2].transforms.detect( function(transform){
            return (transform.style == 'backgroundColor')
        }).targetValue);

        assertEqual('20px', $$('div.morphing').first().getStyle('font-size'));
        assertEqual('20px', $$('div.morphing').last().getStyle('font-size'));
        assertEqual('30px', $('blah').getStyle('font-size'));

        // border-width/border-right-width should be set independently
        assertEqual('10px', $('blah').getStyle('border-top-width'));
        assertEqual('10px', $('blah').getStyle('border-bottom-width'));
        assertEqual('10px', $('blah').getStyle('border-left-width'));
        assertEqual('20px', $('blah').getStyle('border-right-width'));

        // colors should assume transition from 
        // #ffffff (white) if original was transparent
        // we now should have arrived at the given color
        assertEqual('#995544', $('blah').getStyle('background-color').parseColor());

        // play again = should have same values
        transformation.play();
        wait(700, function(){
          assertEqual('20px', $$('div.morphing').first().getStyle('font-size'));
          assertEqual('20px', $$('div.morphing').last().getStyle('font-size'));
          assertEqual('30px', $('blah').getStyle('font-size'));

          $('blah').setStyle({fontSize:'100px'});
          assertEqual('100px', $('blah').getStyle('font-size'));        
          transformation.play();
          wait(700, function(){
            assertEqual('30px', $('blah').getStyle('font-size'));

            new Effect.Transform([
              { 'blah': 'color: #80d980; background: #208020' }
            ],{ duration: 1.1 }).play();
            wait(1500, function(){
              assertEqual('#80d980', $('blah').getStyle('color').parseColor());
              assertEqual('#208020', $('blah').getStyle('background-color').parseColor());
            });
          });
        });
      });
    }}

  });

// ]]>
</script>
</body>
</html>