| OLD | NEW |
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <script> | |
| 4 if (window.testRunner) { | |
| 5 testRunner.dumpAsText(); | |
| 6 testRunner.waitUntilDone(); | |
| 7 } | |
| 8 | |
| 9 function animationEnded() { | |
| 10 var result = document.getElementById("result"); | |
| 11 var square = document.getElementById('square'); | |
| 12 var opacity = document.defaultView.getComputedStyle(square, null).getPro
pertyValue('opacity'); | |
| 13 | |
| 14 if (opacity == 0.5) | |
| 15 result.innerHTML = "PASS - Test working"; | |
| 16 else | |
| 17 result.innerHTML = "FAIL - A opacity value must be 0.5"; | |
| 18 | |
| 19 | |
| 20 if(window.testRunner) | |
| 21 testRunner.notifyDone(); | |
| 22 } | |
| 23 </script> | |
| 24 <style> | |
| 25 body { | |
| 26 margin-left: 100px; | |
| 27 margin-top: 50px; | |
| 28 } | |
| 29 #square { | |
| 30 width: 100px; | |
| 31 height: 100px; | |
| 32 position: absolute; | |
| 33 top: 100px; | |
| 34 background-color: blue; | |
| 35 opacity: 0; | |
| 36 animation-name: pop; | |
| 37 animation-duration: 1s; | |
| 38 animation-fill-mode: forwards; | |
| 39 } | |
| 40 @keyframes pop { | |
| 41 0% { transform: scale(0.05); opacity: 0; } | |
| 42 33% { transform: scale(1.00); opacity: 1; } | |
| 43 66% { transform: scale(1.66); opacity: 1; } | |
| 44 100% { transform: scale(0.95); opacity: 0.5; } | |
| 45 } | |
| 46 </style> | |
| 47 </head> | |
| 48 | |
| 49 <body> | |
| 50 <div id="square" onwebkitanimationend="animationEnded();"></div> | |
| 51 <div id="result"></div> | |
| 52 </body> | |
| 53 </html> | |
| 54 | |
| OLD | NEW |