Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(249)

Side by Side Diff: third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions-hardware.html

Issue 2970883003: Separate out animations tests with prefixing (Closed)
Patch Set: Rebaseline virtual/threaded version of test too Created 3 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <title>Test of -webkit-animation-direction timing functions on composited elem ents</title> 4 <title>Test of animation-direction timing functions on composited elements</ti tle>
5 <style> 5 <style>
6 body { 6 body {
7 margin: 0; 7 margin: 0;
8 } 8 }
9 9
10 .box { 10 .box {
11 position: relative; 11 position: relative;
12 left: 20px; 12 left: 20px;
13 top: 10px; 13 top: 10px;
14 height: 50px; 14 height: 50px;
15 width: 250px; 15 width: 250px;
16 margin-bottom: 10px; 16 margin-bottom: 10px;
17 -webkit-animation-duration: 2s; 17 animation-duration: 2s;
18 -webkit-animation-timing-function: ease; /* ease is good for testing becau se it is not symmetric */ 18 animation-timing-function: ease; /* ease is good for testing because it is not symmetric */
19 -webkit-animation-iteration-count: 4; 19 animation-iteration-count: 4;
20 } 20 }
21 21
22 .move1 { 22 .move1 {
23 -webkit-animation-name: move1; 23 animation-name: move1;
24 background-color: blue; 24 background-color: blue;
25 color: white; 25 color: white;
26 } 26 }
27 27
28 .normal { 28 .normal {
29 -webkit-animation-direction: normal; 29 animation-direction: normal;
30 } 30 }
31 31
32 .alternate { 32 .alternate {
33 -webkit-animation-direction: alternate; 33 animation-direction: alternate;
34 } 34 }
35 35
36 .reverse { 36 .reverse {
37 -webkit-animation-direction: reverse; 37 animation-direction: reverse;
38 } 38 }
39 39
40 .alternate-reverse { 40 .alternate-reverse {
41 -webkit-animation-direction: alternate-reverse; 41 animation-direction: alternate-reverse;
42 } 42 }
43 43
44 @-webkit-keyframes move1 { 44 @keyframes move1 {
45 from { transform: translateX(0px); } 45 from { transform: translateX(0px); }
46 to { transform: translateX(200px); } 46 to { transform: translateX(200px); }
47 } 47 }
48 </style> 48 </style>
49 <script src="resources/animation-test-helpers.js"></script> 49 <script src="resources/animation-test-helpers.js"></script>
50 <script> 50 <script>
51 const expectedValues = [ 51 const expectedValues = [
52 // [time, element-id, property, expected-value, tolerance] 52 // [time, element-id, property, expected-value, tolerance]
53 [0.2, "box1", "webkitTransform", [1,0,0,1, 18, 0], 10], 53 [0.2, "box1", "transform", [1,0,0,1, 18, 0], 10],
54 [0.2, "box2", "webkitTransform", [1,0,0,1, 18, 0], 10], 54 [0.2, "box2", "transform", [1,0,0,1, 18, 0], 10],
55 [0.2, "box3", "webkitTransform", [1,0,0,1, 198, 0], 10], 55 [0.2, "box3", "transform", [1,0,0,1, 198, 0], 10],
56 [0.2, "box4", "webkitTransform", [1,0,0,1, 198, 0], 10], 56 [0.2, "box4", "transform", [1,0,0,1, 198, 0], 10],
57 [2.2, "box1", "webkitTransform", [1,0,0,1, 18, 0], 10], 57 [2.2, "box1", "transform", [1,0,0,1, 18, 0], 10],
58 [2.2, "box2", "webkitTransform", [1,0,0,1, 198, 0], 10], 58 [2.2, "box2", "transform", [1,0,0,1, 198, 0], 10],
59 [2.2, "box3", "webkitTransform", [1,0,0,1, 198, 0], 10], 59 [2.2, "box3", "transform", [1,0,0,1, 198, 0], 10],
60 [2.2, "box4", "webkitTransform", [1,0,0,1, 18, 0], 10], 60 [2.2, "box4", "transform", [1,0,0,1, 18, 0], 10],
61 ]; 61 ];
62 62
63 runAnimationTest(expectedValues); 63 runAnimationTest(expectedValues);
64 64
65 </script> 65 </script>
66 </head> 66 </head>
67 <body> 67 <body>
68 <div id="box1" class="box move1 normal">normal</div> 68 <div id="box1" class="box move1 normal">normal</div>
69 <div id="box2" class="box move1 alternate">alternate</div> 69 <div id="box2" class="box move1 alternate">alternate</div>
70 <div id="box3" class="box move1 reverse">reverse</div> 70 <div id="box3" class="box move1 reverse">reverse</div>
71 <div id="box4" class="box move1 alternate-reverse">alternate-reverse</div> 71 <div id="box4" class="box move1 alternate-reverse">alternate-reverse</div>
72 <div id="result"></div> 72 <div id="result"></div>
73 </div> 73 </div>
74 </body> 74 </body>
75 </html> 75 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698