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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/fill-mode-transform.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-removed.html ('k') | third_party/WebKit/LayoutTests/animations/fill-unset-properties.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 fill mode on transform</title> 7 <title>Test simple fill mode on transform</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: 10px; 11 left: 10px;
12 top: 10px; 12 top: 10px;
13 height: 100px; 13 height: 100px;
14 width: 100px; 14 width: 100px;
15 transform: translate3d(100px, 0, 0); 15 transform: translate3d(100px, 0, 0);
16 -webkit-animation-delay: 0.1s; 16 animation-delay: 0.1s;
17 -webkit-animation-duration: 0.1s; 17 animation-duration: 0.1s;
18 -webkit-animation-timing-function: linear; 18 animation-timing-function: linear;
19 -webkit-animation-name: anim; 19 animation-name: anim;
20 } 20 }
21 @-webkit-keyframes anim { 21 @keyframes anim {
22 from { transform: translate3d(200px, 0, 0); } 22 from { transform: translate3d(200px, 0, 0); }
23 to { transform: translate3d(300px, 0, 0); } 23 to { transform: translate3d(300px, 0, 0); }
24 } 24 }
25 #a { 25 #a {
26 background-color: blue; 26 background-color: blue;
27 -webkit-animation-fill-mode: none; 27 animation-fill-mode: none;
28 } 28 }
29 #b { 29 #b {
30 background-color: red; 30 background-color: red;
31 -webkit-animation-fill-mode: backwards; 31 animation-fill-mode: backwards;
32 } 32 }
33 #c { 33 #c {
34 background-color: green; 34 background-color: green;
35 -webkit-animation-fill-mode: forwards; 35 animation-fill-mode: forwards;
36 } 36 }
37 #d { 37 #d {
38 background-color: yellow; 38 background-color: yellow;
39 -webkit-animation-fill-mode: both; 39 animation-fill-mode: both;
40 } 40 }
41 #e { 41 #e {
42 background-color: #999; 42 background-color: #999;
43 -webkit-animation-fill-mode: both; 43 animation-fill-mode: both;
44 -webkit-animation-iteration-count: 2; 44 animation-iteration-count: 2;
45 -webkit-animation-direction: alternate; 45 animation-direction: alternate;
46 } 46 }
47 </style> 47 </style>
48 <script type="text/javascript" charset="utf-8"> 48 <script type="text/javascript" charset="utf-8">
49 const numAnims = 5; 49 const numAnims = 5;
50 var animsFinished = 0; 50 var animsFinished = 0;
51 const allowance = 5; 51 const allowance = 5;
52 const expectedValues = [ 52 const expectedValues = [
53 {id: "a", start: 100, end: 100}, 53 {id: "a", start: 100, end: 100},
54 {id: "b", start: 200, end: 100}, 54 {id: "b", start: 200, end: 100},
55 {id: "c", start: 100, end: 300}, 55 {id: "c", start: 100, end: 300},
(...skipping 12 matching lines...) Expand all
68 setTimeout(endTest, 0); // this set timeout should be ok in the test environment 68 setTimeout(endTest, 0); // this set timeout should be ok in the test environment
69 // since we're just giving style a chance to resolve 69 // since we're just giving style a chance to resolve
70 } 70 }
71 }; 71 };
72 72
73 function endTest() { 73 function endTest() {
74 74
75 for (var i=0; i < expectedValues.length; i++) { 75 for (var i=0; i < expectedValues.length; i++) {
76 var el = document.getElementById(expectedValues[i].id); 76 var el = document.getElementById(expectedValues[i].id);
77 var expectedValue = expectedValues[i].end; 77 var expectedValue = expectedValues[i].end;
78 var computedValue = window.getComputedStyle(el).webkitTransform; 78 var computedValue = window.getComputedStyle(el).transform;
79 var realValue = parseFloat(computedValue.split("(")[1].split(",")[4] ); 79 var realValue = parseFloat(computedValue.split("(")[1].split(",")[4] );
80 if (Math.abs(expectedValue - realValue) < allowance) { 80 if (Math.abs(expectedValue - realValue) < allowance) {
81 result += "PASS"; 81 result += "PASS";
82 } else { 82 } else {
83 result += "FAIL"; 83 result += "FAIL";
84 } 84 }
85 result += " - end of animation - id: " + expectedValues[i].id + " ex pected: " + expectedValue + " actual: " + realValue + "<br>"; 85 result += " - end of animation - id: " + expectedValues[i].id + " ex pected: " + expectedValue + " actual: " + realValue + "<br>";
86 } 86 }
87 document.getElementById('result').innerHTML = result; 87 document.getElementById('result').innerHTML = result;
88 88
89 if (window.testRunner) 89 if (window.testRunner)
90 testRunner.notifyDone(); 90 testRunner.notifyDone();
91 } 91 }
92 92
93 window.onload = function () { 93 window.onload = function () {
94 for (var i=0; i < expectedValues.length; i++) { 94 for (var i=0; i < expectedValues.length; i++) {
95 var el = document.getElementById(expectedValues[i].id); 95 var el = document.getElementById(expectedValues[i].id);
96 var expectedValue = expectedValues[i].start; 96 var expectedValue = expectedValues[i].start;
97 var computedValue = window.getComputedStyle(el).webkitTransform; 97 var computedValue = window.getComputedStyle(el).transform;
98 var realValue = parseFloat(computedValue.split("(")[1].split(",")[4]); 98 var realValue = parseFloat(computedValue.split("(")[1].split(",")[4]);
99 if (Math.abs(expectedValue - realValue) < allowance) { 99 if (Math.abs(expectedValue - realValue) < allowance) {
100 result += "PASS"; 100 result += "PASS";
101 } else { 101 } else {
102 result += "FAIL"; 102 result += "FAIL";
103 } 103 }
104 result += " - start of animation - id: " + expectedValues[i].id + " ex pected: " + expectedValue + " actual: " + realValue + "<br>"; 104 result += " - start of animation - id: " + expectedValues[i].id + " ex pected: " + expectedValue + " actual: " + realValue + "<br>";
105 } 105 }
106 document.addEventListener("webkitAnimationEnd", animationEnded, false); 106 document.addEventListener("animationend", animationEnded, false);
107 }; 107 };
108 108
109 </script> 109 </script>
110 </head> 110 </head>
111 <body> 111 <body>
112 This test performs an animation of the transform property with four different 112 This test performs an animation of the transform property with four different
113 fill modes. It animates over 0.1 second with a 0.1 second delay. 113 fill modes. It animates over 0.1 second with a 0.1 second delay.
114 It takes snapshots at document load and the end of the animations. 114 It takes snapshots at document load and the end of the animations.
115 <div id="a" class="box"> 115 <div id="a" class="box">
116 None 116 None
117 </div> 117 </div>
118 <div id="b" class="box"> 118 <div id="b" class="box">
119 Backwards 119 Backwards
120 </div> 120 </div>
121 <div id="c" class="box"> 121 <div id="c" class="box">
122 Forwards 122 Forwards
123 </div> 123 </div>
124 <div id="d" class="box"> 124 <div id="d" class="box">
125 Both 125 Both
126 </div> 126 </div>
127 <div id="e" class="box"> 127 <div id="e" class="box">
128 Both Iterate 128 Both Iterate
129 </div> 129 </div>
130 <div id="result"> 130 <div id="result">
131 </div> 131 </div>
132 </body> 132 </body>
133 </html> 133 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/fill-mode-removed.html ('k') | third_party/WebKit/LayoutTests/animations/fill-unset-properties.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698