Unreviewed, GTK css2.1 rebaseline after r101343.
[WebKit-https.git] / LayoutTests / animations / play-state-suspend.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html lang="en">
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5   <title>Test of -webkit-animation-play-state interacting with suspendAnimation</title>
6   <style type="text/css" media="screen">
7     #box1 {
8       height: 100px;
9       width: 100px;
10       background-color: blue;
11       margin: 0;
12       -webkit-animation-duration: 2s;
13       -webkit-animation-timing-function: linear;
14       -webkit-animation-name: "move1";
15       -webkit-animation-play-state: running;
16     }
17     @-webkit-keyframes "move1" {
18         from { -webkit-transform: translateX(0); }
19         to   { -webkit-transform: translateX(400px); }
20     }
21     #box2 {
22       position:absolute;
23       top: 260px;
24       height: 100px;
25       width: 100px;
26       background-color: red;
27       -webkit-animation-duration: 2s;
28       -webkit-animation-timing-function: linear;
29       -webkit-animation-name: "move2";
30     }
31     @-webkit-keyframes "move2" {
32         from { left: 0; }
33         to   { left: 400px; }
34     }
35   </style>
36   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
37   <script type="text/javascript" charset="utf-8">
38     
39     const expectedValues = [
40       // [animation-name, time, element-id, property, expected-value, tolerance]
41       ["move1", 0.55, "box1", "webkitTransform", [1,0,0,1,100,0], 20],
42       ["move1", 0.65, "box1", "webkitTransform", [1,0,0,1,100,0], 20],
43       ["move1", 0.75, "box1", "webkitTransform", [1,0,0,1,100,0], 20],
44       ["move1", 1,    "box1", "webkitTransform", [1,0,0,1,140,0], 20],
45       ["move2", 0.55, "box2", "left", 100, 20],
46       ["move2", 0.65, "box2", "left", 100, 20],
47       ["move2", 0.75, "box2", "left", 100, 20],
48       ["move2", 1,    "box2", "left", 140, 20],
49     ];
50     
51     function pause()
52     {
53         document.getElementById("box1").style.webkitAnimationPlayState = "paused";
54         document.getElementById("box2").style.webkitAnimationPlayState = "paused";
55     }
56
57     function suspend()
58     {
59         if (window.layoutTestController)
60             layoutTestController.suspendAnimations();
61     }
62
63     function unpause()
64     {
65         document.getElementById("box1").style.webkitAnimationPlayState = "running";
66         document.getElementById("box2").style.webkitAnimationPlayState = "running";
67     }
68
69     function resume()
70     {
71         if (window.layoutTestController)
72             layoutTestController.resumeAnimations();
73     }
74
75     function setTimers()
76     {
77         setTimeout(pause, 500);
78         setTimeout(suspend, 600);
79         setTimeout(unpause, 700);
80         setTimeout(resume, 800);
81     }
82     
83     runAnimationTest(expectedValues, setTimers, null /* event */, true /* disablePauseAnimationAPI */);
84     
85   </script>
86 </head>
87 <body>
88 <p>
89 This test makes sure a play-state change in an animation during suspend does not resume the animation.
90 <div id="box1">
91 </div>
92 <div id="box2">
93 </div>
94 <div id="result">
95 </div>
96 </body>
97 </html>