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" {
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", "left", 170, 5],
38 ["anim", 2, "box2", "left", 170, 5],
39 ["anim", 2, ["box1", "box2"], "left", "", 0],
40 ["anim", 5, "box1", "left", 410, 5],
41 ["anim", 5, "box2", "left", 410, 5],
42 ["anim", 5, ["box1", "box2"], "left", "", 0],
43 ["anim", 8, "box1", "left", 650, 5],
44 ["anim", 8, "box2", "left", 650, 5],
45 ["anim", 8, ["box1", "box2"], "left", "", 0],
48 runAnimationTest(expectedValues);
53 This test performs an animation of the left 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">