Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / animations / animation-direction-reverse-timing-functions-hardware.html
blob075aed16f76404890c6571a597539dd70de5917b
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <title>Test of -webkit-animation-direction timing functions on composited elements</title>
5 <style>
6 body {
7 margin: 0;
10 .box {
11 position: relative;
12 left: 20px;
13 top: 10px;
14 height: 50px;
15 width: 250px;
16 margin-bottom: 10px;
17 -webkit-animation-duration: 2s;
18 -webkit-animation-timing-function: ease; /* ease is good for testing because it is not symmetric */
19 -webkit-animation-iteration-count: 4;
22 .move1 {
23 -webkit-animation-name: move1;
24 background-color: blue;
25 color: white;
28 .normal {
29 -webkit-animation-direction: normal;
32 .alternate {
33 -webkit-animation-direction: alternate;
36 .reverse {
37 -webkit-animation-direction: reverse;
40 .alternate-reverse {
41 -webkit-animation-direction: alternate-reverse;
44 @-webkit-keyframes move1 {
45 from { transform: translateX(0px); }
46 to { transform: translateX(200px); }
48 </style>
49 <script src="resources/animation-test-helpers.js"></script>
50 <script>
51 const expectedValues = [
52 // [time, element-id, property, expected-value, tolerance]
53 [0.2, "box1", "webkitTransform", [1,0,0,1, 18, 0], 10],
54 [0.2, "box2", "webkitTransform", [1,0,0,1, 18, 0], 10],
55 [0.2, "box3", "webkitTransform", [1,0,0,1, 198, 0], 10],
56 [0.2, "box4", "webkitTransform", [1,0,0,1, 198, 0], 10],
57 [2.2, "box1", "webkitTransform", [1,0,0,1, 18, 0], 10],
58 [2.2, "box2", "webkitTransform", [1,0,0,1, 198, 0], 10],
59 [2.2, "box3", "webkitTransform", [1,0,0,1, 198, 0], 10],
60 [2.2, "box4", "webkitTransform", [1,0,0,1, 18, 0], 10],
63 runAnimationTest(expectedValues);
65 </script>
66 </head>
67 <body>
68 <div id="box1" class="box move1 normal">normal</div>
69 <div id="box2" class="box move1 alternate">alternate</div>
70 <div id="box3" class="box move1 reverse">reverse</div>
71 <div id="box4" class="box move1 alternate-reverse">alternate-reverse</div>
72 <div id="result"></div>
73 </div>
74 </body>
75 </html>