| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style type="text/css"> |
| 5 #wrapper div { |
| 6 height: 30px; |
| 7 width: 100px; |
| 8 background-color: red; |
| 9 margin-bottom: 10px; |
| 10 position: relative; |
| 11 } |
| 12 #wrapper.animated div { |
| 13 -webkit-animation: test 100ms forwards; |
| 14 animation: test 100ms forwards; |
| 15 } |
| 16 @-webkit-keyframes test { |
| 17 from { left: 100px; } |
| 18 to { left: 300px; } |
| 19 } |
| 20 @keyframes test { |
| 21 from { left: 100px; } |
| 22 to { left: 300px; } |
| 23 } |
| 24 #wrapper.updated div#duration { |
| 25 /* Test will time out if this is applied. */ |
| 26 -webkit-animation-duration: 1000s; |
| 27 animation-duration: 1000s; |
| 28 } |
| 29 #wrapper.updated div#iteration-count { |
| 30 /* Default is 1 */ |
| 31 /* Test will time out if this is applied. */ |
| 32 -webkit-animation-iteration-count: 1000000; |
| 33 animation-iteration-count: 1000000; |
| 34 } |
| 35 #wrapper.updated div#delay { |
| 36 /* Default is 0 */ |
| 37 /* Test will time out if this is applied. */ |
| 38 -webkit-animation-delay: 1000s; |
| 39 animation-delay: 1000s; |
| 40 } |
| 41 #wrapper.updated div#direction { |
| 42 /* Default is normal */ |
| 43 /* End state will be incorrect if this is applied. */ |
| 44 -webkit-animation-direction: reverse; |
| 45 animation-direction: reverse; |
| 46 } |
| 47 #wrapper.updated div#fill-mode { |
| 48 /* End state will be incorrect if this is applied. */ |
| 49 -webkit-animation-fill-mode: none; |
| 50 animation-fill-mode: none; |
| 51 } |
| 52 #wrapper.updated div#timing-function { |
| 53 /* Default is ease */ |
| 54 /* Property will overshoot if this is applied. */ |
| 55 -webkit-animation-timing-function: cubic-bezier(0, 10, 1, 10); |
| 56 animation-timing-function: cubic-bezier(0, 10, 1, 10); |
| 57 } |
| 58 </style> |
| 59 <script type="text/javascript"> |
| 60 if (window.testRunner) { |
| 61 testRunner.dumpAsText(); |
| 62 testRunner.waitUntilDone(); |
| 63 } |
| 64 |
| 65 function go() { |
| 66 document.addEventListener('webkitAnimationStart', onStart); |
| 67 document.addEventListener('webkitAnimationEnd', onEnd); |
| 68 document.getElementById('wrapper').classList.add('animated'); |
| 69 } |
| 70 |
| 71 var startCount = 0; |
| 72 function onStart() { |
| 73 if (++startCount === 6) { |
| 74 setTimeout(update, 0); |
| 75 setTimeout(checkOvershoot, 10); |
| 76 } |
| 77 } |
| 78 |
| 79 function update() { |
| 80 document.getElementById('wrapper').classList.add('updated'); |
| 81 } |
| 82 |
| 83 function checkOvershoot() { |
| 84 var left = parseInt(getComputedStyle(document.getElementById('timing-funct
ion')).left); |
| 85 document.getElementById('log').innerHTML += (left <= 300 ? |
| 86 'PASS: Element \'timing-function\' did not overshoot' : |
| 87 'FAIL: Element \'timing-function\' overshot') + |
| 88 '<br>'; |
| 89 } |
| 90 |
| 91 var results = {}; |
| 92 function test(id, property, expected) { |
| 93 var actual = getComputedStyle(document.getElementById(id))[property]; |
| 94 var pass = actual === expected; |
| 95 if (results[id] === undefined) { |
| 96 results[id] = ''; |
| 97 } |
| 98 results[id] += (pass ? |
| 99 'PASS: Element \'' + id + '\': ' + property + ' was ' + expected : |
| 100 'FAIL: Element \'' + id + '\': ' + property + ' expected ' + expected
+ ' but saw ' + actual) + |
| 101 '<br>'; |
| 102 } |
| 103 |
| 104 var endCount = 0; |
| 105 function onEnd(e) { |
| 106 var id = e.target.id; |
| 107 if (id === 'duration') { |
| 108 test(id, '-webkit-animation-duration', '1000s'); |
| 109 } else if (id === 'iteration-count') { |
| 110 test(id, '-webkit-animation-iteration-count', '1000000'); |
| 111 } else if (id === 'delay') { |
| 112 test(id, '-webkit-animation-delay', '1000s'); |
| 113 } else if (id === 'direction') { |
| 114 test(id, '-webkit-animation-direction', 'reverse'); |
| 115 } else if (id === 'fill-mode') { |
| 116 test(id, '-webkit-animation-fill-mode', 'none'); |
| 117 } else if (id === 'timing-function') { |
| 118 test(id, '-webkit-animation-timing-function', 'cubic-bezier(0, 10, 1, 10
)'); |
| 119 } |
| 120 test(id, 'left', '300px'); |
| 121 if (++endCount === 6) { |
| 122 finishTest(); |
| 123 } |
| 124 } |
| 125 |
| 126 function finishTest() { |
| 127 var elements = document.getElementById('wrapper').getElementsByTagName('di
v'); |
| 128 for (var i = 0; i < elements.length; ++i) { |
| 129 document.getElementById('log').innerHTML += results[elements[i].id]; |
| 130 } |
| 131 if (window.testRunner) { |
| 132 testRunner.notifyDone(); |
| 133 } |
| 134 } |
| 135 </script> |
| 136 </head> |
| 137 <body onload="go()"> |
| 138 <p> |
| 139 Tests that modifying the iteration count, delay, duration, direction, fill |
| 140 mode or timing function do not cause a running animation to be updated. |
| 141 </p> |
| 142 <div id="wrapper"> |
| 143 <div id="duration">duration</div> |
| 144 <div id="iteration-count">iteration-count</div> |
| 145 <div id="delay">delay</div> |
| 146 <div id="direction">direction</div> |
| 147 <div id="fill-mode">fill-mode</div> |
| 148 <div id="timing-function">timing-function</div> |
| 149 </div> |
| 150 <div id="log"></div> |
| 151 </body> |
| 152 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 60033004:
Don't check all animation/transition properties when comparing RenderStyles (Closed)
Base URL: svn://svn.chromium.org/blink/trunk