Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / animations / simultaneous-start-transform.html
blob4a8e41337467d17c39551a5627f41f3f007bc18d
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
4 <html lang="en">
5 <head>
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">
9 .box {
10 position: absolute;
11 top: 40px;
12 height: 100px;
13 width: 100px;
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 { transform: rotate(0deg); }
21 to { transform: rotate(360deg); }
23 #box1 {
24 left: 40px;
25 background-color: blue;
27 #box2 {
28 left: 160px;
29 background-color: red;
31 </style>
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 // [time, element-id, property, expected-value, tolerance]
37 [2, "box1", "webkitTransform", [ 0.309017, 0.951057, -0.951057, 0.309017, 0, 0 ], 0.05],
38 [2, "box2", "webkitTransform", [ 0.309017, 0.951057, -0.951057, 0.309017, 0, 0 ], 0.05],
39 [2, ["box1", "box2"], "webkitTransform", "", 0],
40 [5, "box1", "webkitTransform", [ -1, 0, 0, -1, 0, 0 ], 0.05],
41 [5, "box2", "webkitTransform", [ -1, 0, 0, -1, 0, 0 ], 0.05],
42 [5, ["box1", "box2"], "webkitTransform", "", 0],
43 [8, "box1", "webkitTransform", [ 0.309017, -0.951057, 0.951057, 0.309017, 0, 0 ], 0.05],
44 [8, "box2", "webkitTransform", [ 0.309017, -0.951057, 0.951057, 0.309017, 0, 0 ], 0.05],
45 [8, ["box1", "box2"], "webkitTransform", "", 0],
48 runAnimationTest(expectedValues);
50 </script>
51 </head>
52 <body>
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">
56 </div>
57 <div id="box2" class="box">
58 </div>
59 <div id="result" style="position:absolute; top:150px">
60 </div>
61 </body>
62 </html>