| OLD | NEW |
|---|
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <script> | |
| 4 if (window.testRunner) { | |
| 5 testRunner.dumpAsText(); | |
| 6 testRunner.waitUntilDone(); | |
| 7 } | |
| 8 | |
| 9 var pulsingSquareAnimationEnded = false; | |
| 10 var popAnimationCounter = 0; | |
| 11 | |
| 12 function addPopAnimation() { | |
| 13 var square = document.getElementById("square"); | |
| 14 square.className = "pop"; | |
| 15 popAnimationCounter++; | |
| 16 } | |
| 17 | |
| 18 function removePopAnimation() { | |
| 19 var square = document.getElementById("square"); | |
| 20 square.className = ""; | |
| 21 | |
| 22 if (popAnimationCounter == 2) { | |
| 23 var result = document.getElementById("result"); | |
| 24 if (pulsingSquareAnimationEnded) | |
| 25 result.innerHTML = "FAIL - pop animation should not be finished
after pulse animation" | |
| 26 else | |
| 27 result.innerHTML = "PASS - Test working"; | |
| 28 | |
| 29 if (window.testRunner) | |
| 30 testRunner.notifyDone(); | |
| 31 } | |
| 32 } | |
| 33 | |
| 34 function pulsingSquareEnded() { | |
| 35 pulsingSquareAnimationEnded = true; | |
| 36 } | |
| 37 </script> | |
| 38 <style> | |
| 39 body { | |
| 40 margin-left: 100px; | |
| 41 margin-top: 50px; | |
| 42 } | |
| 43 #square { | |
| 44 width: 100px; | |
| 45 height: 100px; | |
| 46 position: absolute; | |
| 47 top: 100px; | |
| 48 background-color: blue; | |
| 49 opacity: 0; | |
| 50 } | |
| 51 | |
| 52 #pulsing-square { | |
| 53 width: 100px; | |
| 54 height: 100px; | |
| 55 position: absolute; | |
| 56 top: 100px; | |
| 57 left: 350px; | |
| 58 background-color: red; | |
| 59 opacity: 0; | |
| 60 -webkit-animation-name: pulse; | |
| 61 -webkit-animation-duration: 0.4s; | |
| 62 -webkit-animation-timing-function: ease-out; | |
| 63 -webkit-animation-iteration-count: 3; | |
| 64 } | |
| 65 | |
| 66 @-webkit-keyframes pulse { | |
| 67 0% { -webkit-transform: scale(0.05); opacity: 1; } | |
| 68 30% { opacity: 1; } | |
| 69 60% { -webkit-transform: scale(0.8); opacity: 0; } | |
| 70 100% { -webkit-transform: scale(0.8); opacity: 0; } | |
| 71 } | |
| 72 | |
| 73 @-webkit-keyframes pop { | |
| 74 0% { -webkit-transform: scale(0.05); opacity: 0; } | |
| 75 33% { -webkit-transform: scale(1.08); opacity: 1; } | |
| 76 66% { -webkit-transform: scale(0.92); opacity: 1; } | |
| 77 100% { -webkit-transform: scale(1.0); opacity: 1; } | |
| 78 } | |
| 79 | |
| 80 .pop { | |
| 81 -webkit-animation-name: pop; | |
| 82 -webkit-animation-duration: 0.1s; | |
| 83 -webkit-animation-timing-function: ease-in-out; | |
| 84 -webkit-animation-fill-mode: forwards; | |
| 85 } | |
| 86 </style> | |
| 87 </head> | |
| 88 | |
| 89 <body> | |
| 90 <div id="square" onwebkitanimationend="removePopAnimation();"></div> | |
| 91 <div id="pulsing-square" onwebkitanimationiteration="setTimeout(addPopAnimatio
n(), 50);" | |
| 92 onwebkitanimationend="pulsingSquareEnded()"></div> | |
| 93 <div id="result"></div> | |
| 94 </body> | |
| 95 </html> | |
| 96 | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 29363005:
Remove LayoutTest animations/fill-mode-forwards.html (Closed)
Base URL: svn://svn.chromium.org/blink/trunk