📄 transform_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" /> <style type="text/css" media="screen"> #rotfl { color: red; font-family: serif; font-style: italic; font-size: 40px; background: #fed; padding: 1em; width: 400px; } .final { color: #fff; font-style: italic; font-size: 20px; background: #000; opacity: 0.5; } </style></head><body><h1>script.aculo.us Unit test file</h1><p> Test effect scenes</p><!-- Log output --><div id="testlog"> </div><div class="morphing blub" style="font-size:25px;color:#f00">Well</div><div class="morphing">You know</div><div id="blah" style="border:1px solid black;width:100px">Whoo-hoo!</div><div id="error_message">ERROR MESSAGE</div><div id="error_message_2">SECOND ERROR MESSAGE</div><div id="error_message_3" style="border:1px solid red; width:100px; color: #f00">THIRD ERROR MESSAGE</div><ul class="error-list" id="error_test_ul"> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li> <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</li> <li>nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</li> <li>reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li></ul><div id="rotfl">ROTFL</div><!-- Tests follow --><script type="text/javascript" language="javascript" charset="utf-8">new Test.Unit.Runner({ 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(600,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); // chaining morphs $('error_message').morph('font-size:17px').morph('opacity:0',{delay:3}); wait(4100,function(){ // 3000ms delay + 1000ms default duration assertEqual(0, $('error_message').getOpacity()); }); }); }}, 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(){ // shoould 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 == 'background-color') }).originalValue); assertEnumEqual([153,85,68], generatedEffect.effects[2].transforms.detect( function(transform){ return (transform.style == 'background-color') }).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({'font-size':'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>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -