1 <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8">
5 <title>Test of -webkit-animation-play-state
</title>
6 <style type=
"text/css" media=
"screen">
10 background-color: blue;
12 -webkit-animation-duration:
2s;
13 -webkit-animation-timing-function: linear;
14 -webkit-animation-name:
"move1";
15 -webkit-animation-play-state: running;
17 @-webkit-keyframes
"move1" {
18 from { -webkit-transform: translateX(
0); }
19 to { -webkit-transform: translateX(
100px); }
26 background-color: red;
27 -webkit-animation-duration:
2s;
28 -webkit-animation-timing-function: linear;
29 -webkit-animation-name:
"move2";
31 @-webkit-keyframes
"move2" {
36 <script src=
"animation-test-helpers.js" type=
"text/javascript" charset=
"utf-8"></script>
37 <script type=
"text/javascript" charset=
"utf-8">
39 const expectedValues = [
40 // [animation-name, time, element-id, property, expected-value, tolerance]
41 [
"move1",
0.5,
"box1",
"webkitTransform", [
1,
0,
0,
1,
25,
0],
3],
42 [
"move1",
1.5,
"box1",
"webkitTransform", [
1,
0,
0,
1,
50,
0],
3],
43 [
"move1",
2.5,
"box1",
"webkitTransform", [
1,
0,
0,
1,
75,
0],
5],
44 [
"move2",
0.5,
"box2",
"left",
25,
3],
45 [
"move3",
1.5,
"box2",
"left",
50,
3],
46 [
"move4",
2.5,
"box2",
"left",
75,
5],
51 document.getElementById(
"box1").style.webkitAnimationPlayState =
"paused";
52 document.getElementById(
"box2").style.webkitAnimationPlayState =
"paused";
57 document.getElementById(
"box1").style.webkitAnimationPlayState =
"running";
58 document.getElementById(
"box2").style.webkitAnimationPlayState =
"running";
63 setTimeout(stop,
1000);
64 setTimeout(start,
2000);
67 runAnimationTest(expectedValues, setTimers, null, true);
73 This tests the operation of -webkit-animation-play-state. After
1 seconds the box should stop and after one
74 more second it should start again. We test it both while in motion and when stopped.