4 if (window.layoutTestController) {
5 layoutTestController.dumpAsText();
6 layoutTestController.waitUntilDone();
9 var pulsingSquareAnimationEnded = false;
10 var popAnimationCounter = 0;
12 function addPopAnimation() {
13 var square = document.getElementById("square");
14 square.className = "pop";
15 popAnimationCounter++;
18 function removePopAnimation() {
19 var square = document.getElementById("square");
20 square.className = "";
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"
27 result.innerHTML = "PASS - Test working";
29 if (window.layoutTestController)
30 layoutTestController.notifyDone();
34 function pulsingSquareEnded() {
35 pulsingSquareAnimationEnded = true;
48 background-color: blue;
58 background-color: red;
60 -webkit-animation-name: pulse;
61 -webkit-animation-duration: 0.4s;
62 -webkit-animation-timing-function: ease-out;
63 -webkit-animation-iteration-count: 3;
66 @-webkit-keyframes pulse {
67 0% { -webkit-transform: scale(0.05); opacity: 1; }
69 60% { -webkit-transform: scale(0.8); opacity: 0; }
70 100% { -webkit-transform: scale(0.8); opacity: 0; }
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; }
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;
90 <div id="square" onwebkitanimationend="removePopAnimation();"></div>
91 <div id="pulsing-square" onwebkitanimationiteration="setTimeout(addPopAnimation(), 50);"
92 onwebkitanimationend="pulsingSquareEnded()"></div>
93 <div id="result"></div>