1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>Test simultaneous starting of two animations</title>
8 <style type="text/css" media="screen">
14 background-color: blue;
15 -webkit-animation-duration: 10s;
16 -webkit-animation-timing-function: linear;
17 -webkit-animation-name: "anim";
19 @-webkit-keyframes "anim" {
20 from { -webkit-transform: rotate(0deg); }
21 to { -webkit-transform: rotate(360deg); }
25 background-color: blue;
29 background-color: red;
32 <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
33 <script type="text/javascript" charset="utf-8">
35 const expectedValues = [
36 // [animation-name, time, element-id, property, expected-value, tolerance]
37 ["anim", 2, "box1", "webkitTransform", [ 0.309017, 0.951057 ], 0.05],
38 ["anim", 2, "box2", "webkitTransform", [ 0.309017, 0.951057 ], 0.05],
39 ["anim", 2, ["box1", "box2"], "webkitTransform", "", 0],
40 ["anim", 5, "box1", "webkitTransform", [ -1, 0 ], 0.05],
41 ["anim", 5, "box2", "webkitTransform", [ -1, 0 ], 0.05],
42 ["anim", 5, ["box1", "box2"], "webkitTransform", "", 0],
43 ["anim", 8, "box1", "webkitTransform", [ 0.309017, -0.951057 ], 0.05],
44 ["anim", 8, "box2", "webkitTransform", [ 0.309017, -0.951057 ], 0.05],
45 ["anim", 8, ["box1", "box2"], "webkitTransform", "", 0],
48 runAnimationTest(expectedValues);
53 This test performs an animation of the transform property. It animates over 10 seconds.
54 It takes 3 snapshots and expects each result to be within a specified range.
55 <div id="box1" class="box">
57 <div id="box2" class="box">
59 <div id="result" style="position:absolute; top:150px">