| <!DOCTYPE html> |
| <style> |
| #test1 { |
| animation-fill-mode: forwards; |
| animation-duration: 1s; |
| animation-name: green; |
| } |
| #test2 { |
| animation-fill-mode: forwards; |
| animation-duration: 1s; |
| } |
| #test3 { |
| animation-fill-mode: forwards; |
| animation-duration: 1s; |
| animation-name: notredorgreen; |
| } |
| @keyframes green { |
| from { |
| background-color: white; |
| } |
| to { |
| background-color: green; |
| } |
| } |
| @keyframes red { |
| from { |
| background-color: white; |
| } |
| to { |
| background-color: red; |
| } |
| } |
| </style> |
| Tests that an animation does not run when it specifies an incorrect name. |
| <div id="result">FAIL - nothing happened</div> |
| <div id="test1"></div> |
| <div id="test2"></div> |
| <div id="test3"></div> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| var pass = true; |
| test1.addEventListener('animationstart', function() { |
| test2.style.animationName = 'green'; |
| }); |
| test2.addEventListener('animationstart', function() { |
| result.innerText = pass ? 'PASS' : 'FAIL'; |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| test3.addEventListener('animationstart', function() { |
| pass = false; |
| }); |
| </script> |
