OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | 2 |
3 <html> | 3 <html> |
4 <head> | 4 <head> |
5 <style> | 5 <style> |
6 img { | 6 img { |
7 margin: 10px; | 7 margin: 10px; |
8 } | 8 } |
9 | 9 |
10 .animating img { | 10 img { |
11 -webkit-animation-duration: 2s !important; | 11 -webkit-animation-duration: 2s !important; |
12 -webkit-animation-timing-function: linear !important; | 12 -webkit-animation-timing-function: linear !important; |
13 } | 13 } |
14 | 14 |
15 #grayscale-box { | 15 #grayscale-box { |
| 16 -webkit-filter: grayscale(1); |
| 17 } |
| 18 .animating #grayscale-box { |
16 -webkit-animation-name: grayscale-anim; | 19 -webkit-animation-name: grayscale-anim; |
17 -webkit-filter: grayscale(1); | |
18 } | 20 } |
19 | 21 |
20 #sepia-box { | 22 #sepia-box { |
| 23 -webkit-filter: sepia(1); |
| 24 } |
| 25 .animating #sepia-box { |
21 -webkit-animation: sepia-anim; | 26 -webkit-animation: sepia-anim; |
22 -webkit-filter: sepia(1); | |
23 } | 27 } |
24 | 28 |
25 #saturate-box { | 29 #saturate-box { |
| 30 -webkit-filter: saturate(1); |
| 31 } |
| 32 .animating #saturate-box { |
26 -webkit-animation: saturate-anim; | 33 -webkit-animation: saturate-anim; |
27 -webkit-filter: saturate(1); | |
28 } | 34 } |
29 | 35 |
30 #huerotate-box { | 36 #huerotate-box { |
| 37 -webkit-filter: hue-rotate(90deg); |
| 38 } |
| 39 .animating #huerotate-box { |
31 -webkit-animation: huerotate-anim; | 40 -webkit-animation: huerotate-anim; |
32 -webkit-filter: hue-rotate(90deg); | |
33 } | 41 } |
34 | 42 |
35 #invert-box { | 43 #invert-box { |
| 44 -webkit-filter: invert(1); |
| 45 } |
| 46 .animating #invert-box { |
36 -webkit-animation: invert-anim; | 47 -webkit-animation: invert-anim; |
37 -webkit-filter: invert(1); | |
38 } | 48 } |
39 | 49 |
40 #opacity-box { | 50 #opacity-box { |
| 51 -webkit-filter: opacity(0); |
| 52 } |
| 53 .animating #opacity-box { |
41 -webkit-animation: opacity-anim; | 54 -webkit-animation: opacity-anim; |
42 -webkit-filter: opacity(0); | |
43 } | 55 } |
44 | 56 |
45 #brightness-box { | 57 #brightness-box { |
| 58 -webkit-filter: brightness(0); |
| 59 } |
| 60 .animating #brightness-box { |
46 -webkit-animation: brightness-anim; | 61 -webkit-animation: brightness-anim; |
47 -webkit-filter: brightness(0); | |
48 } | 62 } |
49 | 63 |
50 #contrast-box { | 64 #contrast-box { |
| 65 -webkit-filter: contrast(0); |
| 66 } |
| 67 .animating #contrast-box { |
51 -webkit-animation: contrast-anim; | 68 -webkit-animation: contrast-anim; |
52 -webkit-filter: contrast(0); | |
53 } | 69 } |
54 | 70 |
55 #blur-box { | 71 #blur-box { |
| 72 -webkit-filter: blur(10px); |
| 73 } |
| 74 .animating #blur-box { |
56 -webkit-animation: blur-anim; | 75 -webkit-animation: blur-anim; |
57 -webkit-filter: blur(10px); | |
58 } | 76 } |
59 | 77 |
60 @-webkit-keyframes grayscale-anim { | 78 @-webkit-keyframes grayscale-anim { |
61 from { -webkit-filter: grayscale(0); } | 79 from { -webkit-filter: grayscale(0); } |
62 to { -webkit-filter: grayscale(1); } | 80 to { -webkit-filter: grayscale(1); } |
63 } | 81 } |
64 | 82 |
65 @-webkit-keyframes sepia-anim { | 83 @-webkit-keyframes sepia-anim { |
66 from { -webkit-filter: sepia(0); } | 84 from { -webkit-filter: sepia(0); } |
67 to { -webkit-filter: sepia(1); } | 85 to { -webkit-filter: sepia(1); } |
(...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
165 <img src="resources/reference.png" id="grayscale-box"> | 183 <img src="resources/reference.png" id="grayscale-box"> |
166 <img src="resources/reference.png" id="sepia-box"> | 184 <img src="resources/reference.png" id="sepia-box"> |
167 <img src="resources/reference.png" id="saturate-box"> | 185 <img src="resources/reference.png" id="saturate-box"> |
168 <img src="resources/reference.png" id="huerotate-box"> | 186 <img src="resources/reference.png" id="huerotate-box"> |
169 <img src="resources/reference.png" id="invert-box"> | 187 <img src="resources/reference.png" id="invert-box"> |
170 <img src="resources/reference.png" id="opacity-box"> | 188 <img src="resources/reference.png" id="opacity-box"> |
171 <img src="resources/reference.png" id="brightness-box"> | 189 <img src="resources/reference.png" id="brightness-box"> |
172 <img src="resources/reference.png" id="contrast-box"> | 190 <img src="resources/reference.png" id="contrast-box"> |
173 <img src="resources/reference.png" id="blur-box"> | 191 <img src="resources/reference.png" id="blur-box"> |
174 | 192 |
175 <!-- this result element is filled in the script above, before the animations st
art --> | |
176 <div id="preresult"> | |
177 </div> | |
178 | |
179 <!-- this result element is filled by the animation test system --> | 193 <!-- this result element is filled by the animation test system --> |
180 <div id="result"> | 194 <div id="result"> |
181 </div> | 195 </div> |
182 </body> | 196 </body> |
183 </html> | 197 </html> |
OLD | NEW |