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 |