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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: ManualTests/animate-none.html

Issue 637763002: Unprefix usage of -webkit-transform in tests (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 6 years, 2 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
« no previous file with comments | « ManualTests/animate-duration.html ('k') | ManualTests/animated-gif-on-compositing-layer.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//EN" 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd"> 2 "http://www.w3.org/TR/html4/strict.dtd">
3 3
4 <html> 4 <html>
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>Testing animation-name: none</title> 7 <title>Testing animation-name: none</title>
8 8
9 <style type="text/css" media="screen"> 9 <style type="text/css" media="screen">
10 div { 10 div {
11 width: 300px; 11 width: 300px;
12 height: 100px; 12 height: 100px;
13 margin: 10px; 13 margin: 10px;
14 -webkit-animation-name: 'fail'; 14 -webkit-animation-name: 'fail';
15 -webkit-animation-duration: 3.5s; 15 -webkit-animation-duration: 3.5s;
16 -webkit-animation-iteration-count: infinite; 16 -webkit-animation-iteration-count: infinite;
17 -webkit-animation-direction: alternate; 17 -webkit-animation-direction: alternate;
18 -webkit-animation-timing-function: linear; 18 -webkit-animation-timing-function: linear;
19 } 19 }
20 20
21 @-webkit-keyframes 'fail' { 21 @-webkit-keyframes 'fail' {
22 from { 22 from {
23 -webkit-transform: rotate(-90deg); 23 transform: rotate(-90deg);
24 } 24 }
25 to { 25 to {
26 -webkit-transform: rotate(90deg); 26 transform: rotate(90deg);
27 } 27 }
28 } 28 }
29 29
30 #box1 { 30 #box1 {
31 position: relative; 31 position: relative;
32 background-color: blue; 32 background-color: blue;
33 -webkit-animation-name: 'sway1'; 33 -webkit-animation-name: 'sway1';
34 -webkit-animation-duration: 2.5s; 34 -webkit-animation-duration: 2.5s;
35 -webkit-animation-iteration-count: infinite; 35 -webkit-animation-iteration-count: infinite;
36 -webkit-animation-direction: alternate; 36 -webkit-animation-direction: alternate;
37 -webkit-animation-timing-function: linear; 37 -webkit-animation-timing-function: linear;
38 } 38 }
39 39
40 @-webkit-keyframes 'sway1' { 40 @-webkit-keyframes 'sway1' {
41 from { 41 from {
42 -webkit-transform: translate(0, 0); 42 transform: translate(0, 0);
43 } 43 }
44 to { 44 to {
45 -webkit-transform: translate(200px, 0); 45 transform: translate(200px, 0);
46 } 46 }
47 } 47 }
48 48
49 #box2 { 49 #box2 {
50 position: relative; 50 position: relative;
51 background-color: red; 51 background-color: red;
52 -webkit-animation-name: 'sway2'; 52 -webkit-animation-name: 'sway2';
53 -webkit-animation-duration: 3s; 53 -webkit-animation-duration: 3s;
54 -webkit-animation-iteration-count: infinite; 54 -webkit-animation-iteration-count: infinite;
55 -webkit-animation-direction: alternate; 55 -webkit-animation-direction: alternate;
56 -webkit-animation-timing-function: linear; 56 -webkit-animation-timing-function: linear;
57 } 57 }
58 58
59 @-webkit-keyframes 'sway2' { 59 @-webkit-keyframes 'sway2' {
60 from { 60 from {
61 -webkit-transform: translate(0px, 0); 61 transform: translate(0px, 0);
62 } 62 }
63 to { 63 to {
64 -webkit-transform: translate(200px, 0); 64 transform: translate(200px, 0);
65 } 65 }
66 } 66 }
67 67
68 #box3 { 68 #box3 {
69 position: relative; 69 position: relative;
70 background-color: green; 70 background-color: green;
71 -webkit-animation-name: 'sway3'; 71 -webkit-animation-name: 'sway3';
72 -webkit-animation-duration: 3.5s; 72 -webkit-animation-duration: 3.5s;
73 -webkit-animation-iteration-count: infinite; 73 -webkit-animation-iteration-count: infinite;
74 -webkit-animation-direction: alternate; 74 -webkit-animation-direction: alternate;
75 -webkit-animation-timing-function: linear; 75 -webkit-animation-timing-function: linear;
76 } 76 }
77 77
78 @-webkit-keyframes 'sway3' { 78 @-webkit-keyframes 'sway3' {
79 from { 79 from {
80 -webkit-transform: translate(0px, 0); 80 transform: translate(0px, 0);
81 } 81 }
82 to { 82 to {
83 -webkit-transform: translate(200px, 0); 83 transform: translate(200px, 0);
84 } 84 }
85 } 85 }
86 86
87 #box4 { 87 #box4 {
88 position: relative; 88 position: relative;
89 background-color: orange; 89 background-color: orange;
90 -webkit-animation-name: 'none'; 90 -webkit-animation-name: 'none';
91 -webkit-animation-duration: 3s; 91 -webkit-animation-duration: 3s;
92 -webkit-animation-iteration-count: infinite; 92 -webkit-animation-iteration-count: infinite;
93 -webkit-animation-direction: alternate; 93 -webkit-animation-direction: alternate;
(...skipping 15 matching lines...) Expand all
109 background-color: blue; 109 background-color: blue;
110 -webkit-animation-name: 'fade', 'sway6'; 110 -webkit-animation-name: 'fade', 'sway6';
111 -webkit-animation-duration: 3s, 4s; 111 -webkit-animation-duration: 3s, 4s;
112 -webkit-animation-iteration-count: infinite, infinite; 112 -webkit-animation-iteration-count: infinite, infinite;
113 -webkit-animation-direction: alternate, alternate; 113 -webkit-animation-direction: alternate, alternate;
114 -webkit-animation-timing-function: linear, linear; 114 -webkit-animation-timing-function: linear, linear;
115 } 115 }
116 116
117 @-webkit-keyframes 'sway6' { 117 @-webkit-keyframes 'sway6' {
118 from { 118 from {
119 -webkit-transform: translate(0px, 0); 119 transform: translate(0px, 0);
120 } 120 }
121 to { 121 to {
122 -webkit-transform: translate(200px, 0); 122 transform: translate(200px, 0);
123 } 123 }
124 } 124 }
125 125
126 @-webkit-keyframes 'fade' { 126 @-webkit-keyframes 'fade' {
127 from { 127 from {
128 opacity: 1.0; 128 opacity: 1.0;
129 } 129 }
130 to { 130 to {
131 opacity: 0.1; 131 opacity: 0.1;
132 } 132 }
133 } 133 }
134 134
135 /* set up animation that should never be run */ 135 /* set up animation that should never be run */
136 @-webkit-keyframes none { 136 @-webkit-keyframes none {
137 from { 137 from {
138 -webkit-transform: translate(200px, 0) rotate(-90deg); 138 transform: translate(200px, 0) rotate(-90deg);
139 } 139 }
140 to { 140 to {
141 -webkit-transform: translate(0px, 0) rotate(90deg); 141 transform: translate(0px, 0) rotate(90deg);
142 } 142 }
143 } 143 }
144 144
145 </style> 145 </style>
146 <script type="text/javascript" charset="utf-8"> 146 <script type="text/javascript" charset="utf-8">
147 function killanims() { 147 function killanims() {
148 console.log("click"); 148 console.log("click");
149 var box1 = document.getElementById("box1"); 149 var box1 = document.getElementById("box1");
150 box1.style.webkitAnimationName = ''; 150 box1.style.webkitAnimationName = '';
151 var box2 = document.getElementById("box2"); 151 var box2 = document.getElementById("box2");
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after
198 </div> 198 </div>
199 199
200 <div id="box6"> 200 <div id="box6">
201 This rectangle starts with two animations. After 2 seconds a timer 201 This rectangle starts with two animations. After 2 seconds a timer
202 will set the animation-name on the fade to 'none'. The other 202 will set the animation-name on the fade to 'none'. The other
203 animation (horizontal) should continue. 203 animation (horizontal) should continue.
204 </div> 204 </div>
205 205
206 </body> 206 </body>
207 </html> 207 </html>
OLDNEW
« no previous file with comments | « ManualTests/animate-duration.html ('k') | ManualTests/animated-gif-on-compositing-layer.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698