4 <style type="text/css" media="screen">
11 background-color: red;
12 -webkit-animation-duration: 0.2s;
13 -webkit-animation-timing-function: linear;
17 -webkit-animation-name: move;
20 @-webkit-keyframes move {
21 from { -webkit-transform: translateX(100px) scale(1); }
22 to { -webkit-transform: translateX(400px) scale(1); }
32 background-color: green;
35 <script type="text/javascript" charset="utf-8">
36 if (window.layoutTestController)
37 layoutTestController.waitUntilDone();
39 function suspendAndWaitForCompletion()
41 if (window.layoutTestController)
42 layoutTestController.suspendAnimations();
44 window.setTimeout(function() {
45 if (window.layoutTestController)
46 layoutTestController.notifyDone();
52 document.getElementById('box').addEventListener('webkitAnimationStart', function() {
53 suspendAndWaitForCompletion();
56 document.getElementById('box').className = 'move';
59 window.addEventListener('load', doTest, false);
64 <!-- When suspended, the red box should be hidden by the green box. You should see no red. -->
66 <div id="safezone"></div>
68 <div id="result"></div>