Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / animations / state-at-end-event.html
blob145c1986edb08758aff9fdf0a22dd6d972bce4fd
1 <!DOCTYPE html>
3 <html>
4 <head>
5 <style>
6 #container {
7 position: relative;
8 width: 400px;
9 height: 100px;
10 border: 1px solid black;
13 .box {
14 position: absolute;
15 width: 100px;
16 height: 100px;
17 background-color: green;
20 .indicator {
21 left: 0;
22 top: 0;
23 background-color: red;
26 #container.moved .hardware {
27 -webkit-animation: move 300ms linear;
30 @-webkit-keyframes move {
31 from { left: 0; }
32 to { left: 300px; }
34 </style>
36 <script type="text/javascript">
37 function testEnded()
39 if (window.testRunner)
40 testRunner.notifyDone();
43 function startTest()
45 if (window.testRunner)
46 testRunner.waitUntilDone();
48 document.getElementById('tester').addEventListener('webkitAnimationEnd', testEnded, false);
49 document.getElementById('container').className = 'moved';
52 window.addEventListener('load', startTest, false);
53 </script>
54 </head>
55 <body>
57 <p>At the end of the test the green box should obscure the red box.</p>
58 <div id="container">
59 <div class="indicator box"></div>
60 <div id="tester" class="hardware box"></div>
61 </div>
63 <div id="result"></div>
65 </body>
66 </html>