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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/fill-mode-removed.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-multiple-keyframes.html ('k') | third_party/WebKit/LayoutTests/animations/fill-mode-transform.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 end values with fill modes after animation is removed</title> 7 <title>Test end values with fill modes after animation is removed</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 </style> 40 </style>
41 <script type="text/javascript" charset="utf-8"> 41 <script type="text/javascript" charset="utf-8">
42 const numAnims = 4; 42 const numAnims = 4;
43 var animsFinished = 0; 43 var animsFinished = 0;
44 const expectedEndValues = [ 44 const expectedEndValues = [
45 {id: "a", value: 100}, 45 {id: "a", value: 100},
46 {id: "b", value: 100}, 46 {id: "b", value: 100},
47 {id: "c", value: 100}, 47 {id: "c", value: 100},
48 {id: "d", value: 100} 48 {id: "d", value: 100}
49 ]; 49 ];
50 50
51 if (window.testRunner) { 51 if (window.testRunner) {
52 testRunner.dumpAsText(); 52 testRunner.dumpAsText();
53 testRunner.waitUntilDone(); 53 testRunner.waitUntilDone();
54 } 54 }
55 55
56 function animationEnded(event) { 56 function animationEnded(event) {
57 event.target.style.webkitAnimationName = "none"; 57 event.target.style.animationName = "none";
58 if (++animsFinished == numAnims) { 58 if (++animsFinished == numAnims) {
59 setTimeout(endTest, 0); // this set timeout should be ok in the test environment 59 setTimeout(endTest, 0); // this set timeout should be ok in the test environment
60 // since we're just giving style a chance to resolve 60 // since we're just giving style a chance to resolve
61 } 61 }
62 }; 62 };
63 63
64 function endTest() { 64 function endTest() {
65 65
66 var result = ""; 66 var result = "";
67 for (var i=0; i < expectedEndValues.length; i++) { 67 for (var i=0; i < expectedEndValues.length; i++) {
68 var el = document.getElementById(expectedEndValues[i].id); 68 var el = document.getElementById(expectedEndValues[i].id);
69 var expectedValue = expectedEndValues[i].value; 69 var expectedValue = expectedEndValues[i].value;
70 var realValue = parseFloat(window.getComputedStyle(el).left); 70 var realValue = parseFloat(window.getComputedStyle(el).left);
71 if (Math.abs(expectedValue - realValue) < 5) { 71 if (Math.abs(expectedValue - realValue) < 5) {
72 result += "PASS"; 72 result += "PASS";
73 } else { 73 } else {
74 result += "FAIL"; 74 result += "FAIL";
75 } 75 }
76 result += " - id: " + expectedEndValues[i].id + " expected: " + expe ctedValue + " actual: " + realValue + "<br>"; 76 result += " - id: " + expectedEndValues[i].id + " expected: " + expe ctedValue + " actual: " + realValue + "<br>";
77 } 77 }
78 document.getElementById('result').innerHTML = result; 78 document.getElementById('result').innerHTML = result;
79 79
80 if (window.testRunner) 80 if (window.testRunner)
81 testRunner.notifyDone(); 81 testRunner.notifyDone();
82 } 82 }
83 83
84 window.onload = function () { 84 window.onload = function () {
85 document.addEventListener("webkitAnimationEnd", animationEnded, false); 85 document.addEventListener("animationend", animationEnded, false);
86 }; 86 };
87 87
88 </script> 88 </script>
89 </head> 89 </head>
90 <body> 90 <body>
91 This test performs an animation of the left property with four different 91 This test performs an animation of the left property with four different
92 fill modes. It animates over 0.1 second with a 0.1 second delay. 92 fill modes. It animates over 0.1 second with a 0.1 second delay.
93 At the end of the animations, we remove the animation name which should 93 At the end of the animations, we remove the animation name which should
94 cause the value to jump back to the unanimated style. 94 cause the value to jump back to the unanimated style.
95 <div id="a" class="box"> 95 <div id="a" class="box">
96 None 96 None
97 </div> 97 </div>
98 <div id="b" class="box"> 98 <div id="b" class="box">
99 Backwards 99 Backwards
100 </div> 100 </div>
101 <div id="c" class="box"> 101 <div id="c" class="box">
102 Forwards 102 Forwards
103 </div> 103 </div>
104 <div id="d" class="box"> 104 <div id="d" class="box">
105 Both 105 Both
106 </div> 106 </div>
107 <div id="result"> 107 <div id="result">
108 </div> 108 </div>
109 </body> 109 </body>
110 </html> 110 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/fill-mode-multiple-keyframes.html ('k') | third_party/WebKit/LayoutTests/animations/fill-mode-transform.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698