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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/fill-mode-missing-from-to-keyframes.html

Issue 2523543004: CSS Animations: Remove unnecessary webkit prefixes from layout tests (Closed)
Patch Set: Created 4 years 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
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/fill-mode-iteration-count-non-integer.html ('k') | third_party/WebKit/LayoutTests/animations/fill-mode-multiple-keyframes.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd"> 2 "http://www.w3.org/TR/html4/loose.dtd">
3 3
4 <html lang="en"> 4 <html lang="en">
5 <head> 5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>Test missing keyframes with fill modes</title> 7 <title>Test missing keyframes with fill modes</title>
8 <style type="text/css" media="screen"> 8 <style type="text/css" media="screen">
9 .box { 9 .box {
10 position: relative; 10 position: relative;
11 left: 100px; 11 left: 100px;
12 top: 10px; 12 top: 10px;
13 height: 30px; 13 height: 30px;
14 width: 200px; 14 width: 200px;
15 -webkit-animation-delay: 0.1s; 15 animation-delay: 0.1s;
16 -webkit-animation-duration: 0.1s; 16 animation-duration: 0.1s;
17 -webkit-animation-timing-function: linear; 17 animation-timing-function: linear;
18 } 18 }
19 @-webkit-keyframes anim1 { 19 @keyframes anim1 {
20 from { left: 200px; } 20 from { left: 200px; }
21 50% { left: 250px; } 21 50% { left: 250px; }
22 to { left: 300px; } 22 to { left: 300px; }
23 } 23 }
24 @-webkit-keyframes anim2 { 24 @keyframes anim2 {
25 50% { left: 250px; } 25 50% { left: 250px; }
26 to { left: 300px; } 26 to { left: 300px; }
27 } 27 }
28 @-webkit-keyframes anim3 { 28 @keyframes anim3 {
29 from { left: 200px; } 29 from { left: 200px; }
30 50% { left: 250px; } 30 50% { left: 250px; }
31 } 31 }
32 @-webkit-keyframes anim4 { 32 @keyframes anim4 {
33 50% { left: 250px; } 33 50% { left: 250px; }
34 } 34 }
35 35
36 #a { 36 #a {
37 background-color: blue; 37 background-color: blue;
38 -webkit-animation-fill-mode: none; 38 animation-fill-mode: none;
39 -webkit-animation-name: anim1; 39 animation-name: anim1;
40 } 40 }
41 #b { 41 #b {
42 background-color: red; 42 background-color: red;
43 -webkit-animation-fill-mode: backwards; 43 animation-fill-mode: backwards;
44 -webkit-animation-name: anim1; 44 animation-name: anim1;
45 } 45 }
46 #c { 46 #c {
47 background-color: green; 47 background-color: green;
48 -webkit-animation-fill-mode: forwards; 48 animation-fill-mode: forwards;
49 -webkit-animation-name: anim1; 49 animation-name: anim1;
50 } 50 }
51 #d { 51 #d {
52 background-color: yellow; 52 background-color: yellow;
53 -webkit-animation-fill-mode: both; 53 animation-fill-mode: both;
54 -webkit-animation-name: anim1; 54 animation-name: anim1;
55 } 55 }
56 #e { 56 #e {
57 background-color: #999; 57 background-color: #999;
58 -webkit-animation-fill-mode: both; 58 animation-fill-mode: both;
59 -webkit-animation-iteration-count: 2; 59 animation-iteration-count: 2;
60 -webkit-animation-direction: alternate; 60 animation-direction: alternate;
61 -webkit-animation-name: anim1; 61 animation-name: anim1;
62 } 62 }
63 63
64 #f { 64 #f {
65 background-color: blue; 65 background-color: blue;
66 -webkit-animation-fill-mode: none; 66 animation-fill-mode: none;
67 -webkit-animation-name: anim2; 67 animation-name: anim2;
68 } 68 }
69 #g { 69 #g {
70 background-color: red; 70 background-color: red;
71 -webkit-animation-fill-mode: backwards; 71 animation-fill-mode: backwards;
72 -webkit-animation-name: anim2; 72 animation-name: anim2;
73 } 73 }
74 #h { 74 #h {
75 background-color: green; 75 background-color: green;
76 -webkit-animation-fill-mode: forwards; 76 animation-fill-mode: forwards;
77 -webkit-animation-name: anim2; 77 animation-name: anim2;
78 } 78 }
79 #i { 79 #i {
80 background-color: yellow; 80 background-color: yellow;
81 -webkit-animation-fill-mode: both; 81 animation-fill-mode: both;
82 -webkit-animation-name: anim2; 82 animation-name: anim2;
83 } 83 }
84 #j { 84 #j {
85 background-color: #999; 85 background-color: #999;
86 -webkit-animation-fill-mode: both; 86 animation-fill-mode: both;
87 -webkit-animation-iteration-count: 2; 87 animation-iteration-count: 2;
88 -webkit-animation-direction: alternate; 88 animation-direction: alternate;
89 -webkit-animation-name: anim2; 89 animation-name: anim2;
90 } 90 }
91 91
92 </style> 92 </style>
93 <script type="text/javascript" charset="utf-8"> 93 <script type="text/javascript" charset="utf-8">
94 const numAnims = 10; 94 const numAnims = 10;
95 var animsFinished = 0; 95 var animsFinished = 0;
96 const allowance = 5; 96 const allowance = 5;
97 const expectedValues = [ 97 const expectedValues = [
98 {id: "a", start: 100, end: 100}, 98 {id: "a", start: 100, end: 100},
99 {id: "b", start: 200, end: 100}, 99 {id: "b", start: 200, end: 100},
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
139 var el = document.getElementById(expectedValues[i].id); 139 var el = document.getElementById(expectedValues[i].id);
140 var expectedValue = expectedValues[i].start; 140 var expectedValue = expectedValues[i].start;
141 var realValue = parseFloat(window.getComputedStyle(el).left); 141 var realValue = parseFloat(window.getComputedStyle(el).left);
142 if (Math.abs(expectedValue - realValue) < allowance) { 142 if (Math.abs(expectedValue - realValue) < allowance) {
143 result += "PASS"; 143 result += "PASS";
144 } else { 144 } else {
145 result += "FAIL"; 145 result += "FAIL";
146 } 146 }
147 result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>"; 147 result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
148 } 148 }
149 document.addEventListener("webkitAnimationEnd", animationEnded, false); 149 document.addEventListener("animationend", animationEnded, false);
150 }; 150 };
151 151
152 </script> 152 </script>
153 </head> 153 </head>
154 <body> 154 <body>
155 This test performs an animation of the left property with four different 155 This test performs an animation of the left property with four different
156 fill modes. It animates over 0.1 second with a 0.1 second delay. 156 fill modes. It animates over 0.1 second with a 0.1 second delay.
157 It takes snapshots at document load and the end of the animation. 157 It takes snapshots at document load and the end of the animation.
158 158
159 <div id="a" class="box"> 159 <div id="a" class="box">
(...skipping 25 matching lines...) Expand all
185 Both - from missing 185 Both - from missing
186 </div> 186 </div>
187 <div id="j" class="box"> 187 <div id="j" class="box">
188 Both iterating - from missing 188 Both iterating - from missing
189 </div> 189 </div>
190 190
191 <div id="result"> 191 <div id="result">
192 </div> 192 </div>
193 </body> 193 </body>
194 </html> 194 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/fill-mode-iteration-count-non-integer.html ('k') | third_party/WebKit/LayoutTests/animations/fill-mode-multiple-keyframes.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698