Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / animations / animation-events-unprefixed-01.html
blob5fe54c33ade512d20866c506280dfa4e803ada6c
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Tests that unprefixed animation events are correctly fired.</title>
5 <style>
6 #box {
7 position: relative;
8 left: 100px;
9 top: 10px;
10 height: 100px;
11 width: 100px;
12 background-color: #999;
15 .animate {
16 animation-duration: 0.3s;
17 animation-name: anim;
20 @keyframes anim {
21 from { left: 200px; }
22 to { left: 300px; }
24 </style>
25 <script>
26 if (window.testRunner) {
27 testRunner.dumpAsText();
28 testRunner.waitUntilDone();
31 var startEventReceived = false;
32 var endEventReceived = false;
34 document.addEventListener('animationstart', function() {
35 startEventReceived = true;
36 }, false);
38 document.addEventListener('animationiteration', function() {
39 if (startEventReceived && endEventReceived) {
40 document.getElementById('result').innerHTML = 'PASS: All events have been received as expected.';
41 if (window.testRunner)
42 testRunner.notifyDone();
44 }, false);
46 document.addEventListener('animationend', function() {
47 endEventReceived = true;
48 document.getElementById('box').className = '';
49 // Launch again the animation to catch the animation iteration events this time.
50 setTimeout(function () {
51 document.getElementById('box').style.animationIterationCount = "infinite";
52 document.getElementById('box').className = 'animate';
53 }, 200);
54 }, false);
56 onload = function()
58 // Animation begins once we append the DOM node to the document.
59 var boxNode = document.createElement('div');
60 boxNode.id = 'box';
61 boxNode.className = 'animate';
62 document.body.appendChild(boxNode);
64 </script>
65 </head>
66 <body>
67 Tests that unprefixed animation events are correctly fired.
68 <pre id="result">FAIL: No animation events received</pre>
69 </body>
70 </html>