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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/fill-mode.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/events-with-short-duration-and-delay-expected.txt ('k') | third_party/WebKit/LayoutTests/animations/fill-mode-iteration-count-non-integer.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 simple animation with fill modes</title> 7 <title>Test simple animation 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: 100px; 13 height: 100px;
14 width: 100px; 14 width: 100px;
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 -webkit-animation-name: anim; 18 animation-name: anim;
19 } 19 }
20 @-webkit-keyframes anim { 20 @keyframes anim {
21 from { left: 200px; } 21 from { left: 200px; }
22 to { left: 300px; } 22 to { left: 300px; }
23 } 23 }
24 #a { 24 #a {
25 background-color: blue; 25 background-color: blue;
26 -webkit-animation-fill-mode: none; 26 animation-fill-mode: none;
27 } 27 }
28 #b { 28 #b {
29 background-color: red; 29 background-color: red;
30 -webkit-animation-fill-mode: backwards; 30 animation-fill-mode: backwards;
31 } 31 }
32 #c { 32 #c {
33 background-color: green; 33 background-color: green;
34 -webkit-animation-fill-mode: forwards; 34 animation-fill-mode: forwards;
35 } 35 }
36 #d { 36 #d {
37 background-color: yellow; 37 background-color: yellow;
38 -webkit-animation-fill-mode: both; 38 animation-fill-mode: both;
39 } 39 }
40 #e { 40 #e {
41 background-color: #999; 41 background-color: #999;
42 -webkit-animation-fill-mode: both; 42 animation-fill-mode: both;
43 -webkit-animation-iteration-count: 2; 43 animation-iteration-count: 2;
44 -webkit-animation-direction: alternate; 44 animation-direction: alternate;
45 } 45 }
46 </style> 46 </style>
47 <script type="text/javascript" charset="utf-8"> 47 <script type="text/javascript" charset="utf-8">
48 const numAnims = 5; 48 const numAnims = 5;
49 var animsFinished = 0; 49 var animsFinished = 0;
50 const allowance = 5; 50 const allowance = 5;
51 const expectedValues = [ 51 const expectedValues = [
52 {id: "a", start: 100, end: 100}, 52 {id: "a", start: 100, end: 100},
53 {id: "b", start: 200, end: 100}, 53 {id: "b", start: 200, end: 100},
54 {id: "c", start: 100, end: 300}, 54 {id: "c", start: 100, end: 300},
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
93 var el = document.getElementById(expectedValues[i].id); 93 var el = document.getElementById(expectedValues[i].id);
94 var expectedValue = expectedValues[i].start; 94 var expectedValue = expectedValues[i].start;
95 var realValue = parseFloat(window.getComputedStyle(el).left); 95 var realValue = parseFloat(window.getComputedStyle(el).left);
96 if (Math.abs(expectedValue - realValue) < allowance) { 96 if (Math.abs(expectedValue - realValue) < allowance) {
97 result += "PASS"; 97 result += "PASS";
98 } else { 98 } else {
99 result += "FAIL"; 99 result += "FAIL";
100 } 100 }
101 result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>"; 101 result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
102 } 102 }
103 document.addEventListener("webkitAnimationEnd", animationEnded, false); 103 document.addEventListener("animationend", animationEnded, false);
104 }; 104 };
105 105
106 </script> 106 </script>
107 </head> 107 </head>
108 <body> 108 <body>
109 This test performs an animation of the left property with four different 109 This test performs an animation of the left property with four different
110 fill modes. It animates over 0.1 second with a 0.1 second delay. 110 fill modes. It animates over 0.1 second with a 0.1 second delay.
111 It takes snapshots at document load and the end of the animation. 111 It takes snapshots at document load and the end of the animation.
112 <div id="a" class="box"> 112 <div id="a" class="box">
113 None 113 None
114 </div> 114 </div>
115 <div id="b" class="box"> 115 <div id="b" class="box">
116 Backwards 116 Backwards
117 </div> 117 </div>
118 <div id="c" class="box"> 118 <div id="c" class="box">
119 Forwards 119 Forwards
120 </div> 120 </div>
121 <div id="d" class="box"> 121 <div id="d" class="box">
122 Both 122 Both
123 </div> 123 </div>
124 <div id="e" class="box"> 124 <div id="e" class="box">
125 Both iterating 125 Both iterating
126 </div> 126 </div>
127 <div id="result"> 127 <div id="result">
128 </div> 128 </div>
129 </body> 129 </body>
130 </html> 130 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/events-with-short-duration-and-delay-expected.txt ('k') | third_party/WebKit/LayoutTests/animations/fill-mode-iteration-count-non-integer.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698