| 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 |