| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| .bg { |
| height: 100px; |
| width: 100px; |
| margin: 10px; |
| position: relative; |
| background-image: url('../resources/reference.png'); |
| display: inline-block; |
| -webkit-transform: translateZ(0); |
| -webkit-animation-duration:2s !important; |
| } |
| |
| .box { |
| position: absolute; |
| top: 0; |
| left: 0; |
| height: 100px; |
| width: 100px; |
| -webkit-transform: translateZ(0); |
| -webkit-animation-duration: 2s !important; |
| -webkit-backdrop-filter: invert(0); |
| } |
| |
| #grayscale-box { |
| -webkit-animation: grayscale-anim 2s linear |
| } |
| |
| #sepia-box { |
| -webkit-animation: sepia-anim 2s linear |
| } |
| |
| #saturate-box { |
| -webkit-animation: saturate-anim 2s linear |
| } |
| |
| #huerotate-box { |
| -webkit-animation: huerotate-anim 2s linear |
| } |
| |
| #invert-box { |
| -webkit-animation: invert-anim 2s linear |
| } |
| |
| #opacity-box { |
| -webkit-animation: opacity-anim 2s linear |
| } |
| |
| #brightness-box { |
| -webkit-animation: brightness-anim 2s linear |
| } |
| |
| #contrast-box { |
| -webkit-animation: contrast-anim 2s linear |
| } |
| |
| #blur-box { |
| -webkit-animation: blur-anim 2s linear |
| } |
| |
| #dropshadow-box { |
| -webkit-animation: dropshadow-anim 2s linear |
| } |
| |
| |
| @-webkit-keyframes grayscale-anim { |
| from { -webkit-backdrop-filter: grayscale(0); } |
| to { -webkit-backdrop-filter: grayscale(1); } |
| } |
| |
| @-webkit-keyframes sepia-anim { |
| from { -webkit-backdrop-filter: sepia(0); } |
| to { -webkit-backdrop-filter: sepia(1); } |
| } |
| |
| @-webkit-keyframes saturate-anim { |
| from { -webkit-backdrop-filter: saturate(0); } |
| to { -webkit-backdrop-filter: saturate(1); } |
| } |
| |
| @-webkit-keyframes huerotate-anim { |
| from { -webkit-backdrop-filter: hue-rotate(0); } |
| to { -webkit-backdrop-filter: hue-rotate(180deg); } |
| } |
| |
| @-webkit-keyframes invert-anim { |
| from { -webkit-backdrop-filter: invert(0); } |
| to { -webkit-backdrop-filter: invert(1); } |
| } |
| |
| @-webkit-keyframes opacity-anim { |
| from { -webkit-backdrop-filter: opacity(1); } |
| to { -webkit-backdrop-filter: opacity(0); } |
| } |
| |
| @-webkit-keyframes brightness-anim { |
| from { -webkit-backdrop-filter: brightness(1); } |
| to { -webkit-backdrop-filter: brightness(0); } |
| } |
| |
| @-webkit-keyframes contrast-anim { |
| from { -webkit-backdrop-filter: contrast(1); } |
| to { -webkit-backdrop-filter: contrast(0); } |
| } |
| |
| @-webkit-keyframes blur-anim { |
| from { -webkit-backdrop-filter: blur(0); } |
| to { -webkit-backdrop-filter: blur(20px); } |
| } |
| |
| </style> |
| <script src="../../../animations/resources/animation-test-helpers.js"></script> |
| <script type="text/javascript"> |
| var expectedValues = [ |
| // [animation-name, time, element-id, property, expected-value, tolerance] |
| ["grayscale-anim", 1, "grayscale-box", "webkitBackdropFilter", 'grayscale(0.5)', 0.1], |
| ["sepia-anim", 1, "sepia-box", "webkitBackdropFilter", 'sepia(0.5)', 0.1], |
| ["saturate-anim", 1, "saturate-box", "webkitBackdropFilter", 'saturate(0.5)', 0.1], |
| ["huerotate-anim", 1, "huerotate-box", "webkitBackdropFilter", 'hue-rotate(90deg)', 10], |
| ["invert-anim", 1, "invert-box", "webkitBackdropFilter", 'invert(0.5)', 0.1], |
| ["opacity-anim", 1, "opacity-box", "webkitBackdropFilter", 'opacity(0.5)', 0.1], |
| ["brightness-anim", 1, "brightness-box", "webkitBackdropFilter", 'brightness(0.5)', 0.1], |
| ["contrast-anim", 1, "contrast-box", "webkitBackdropFilter", 'contrast(0.5)', 0.1], |
| ["blur-anim", 1, "blur-box", "webkitBackdropFilter", 'blur(10px)', 2], |
| ]; |
| |
| runAnimationTest(expectedValues); |
| </script> |
| </head> |
| <body> |
| |
| <div class="bg"><div class="box" id="grayscale-box"></div></div> |
| <div class="bg"><div class="box" id="sepia-box"></div></div> |
| <div class="bg"><div class="box" id="saturate-box"></div></div> |
| <div class="bg"><div class="box" id="huerotate-box"></div></div> |
| <div class="bg"><div class="box" id="invert-box"></div></div> |
| <div class="bg"><div class="box" id="opacity-box"></div></div> |
| <div class="bg"><div class="box" id="brightness-box"></div></div> |
| <div class="bg"><div class="box" id="contrast-box"></div></div> |
| <div class="bg"><div class="box" id="blur-box"></div></div> |
| |
| <div id="result"> |
| </div> |
| </body> |
| </html> |
