| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| .box { |
| height: 100px; |
| width: 100px; |
| margin: 10px; |
| background-color: blue; |
| display: inline-block; |
| transform:translateZ(0); |
| } |
| |
| #grayscale-box { |
| animation: grayscale-anim 2s linear |
| } |
| |
| #sepia-box { |
| animation: sepia-anim 2s linear |
| } |
| |
| #saturate-box { |
| animation: saturate-anim 2s linear |
| } |
| |
| #hue-rotate-box { |
| animation: hue-rotate-anim 2s linear |
| } |
| |
| #invert-box { |
| animation: invert-anim 2s linear |
| } |
| |
| #opacity-box { |
| animation: opacity-anim 2s linear |
| } |
| |
| #brightness-box { |
| animation: brightness-anim 2s linear |
| } |
| |
| #contrast-box { |
| animation: contrast-anim 2s linear |
| } |
| |
| #blur-box { |
| animation: blur-anim 2s linear |
| } |
| |
| #dropshadow-box { |
| animation: dropshadow-anim 2s linear |
| } |
| |
| @keyframes grayscale-anim { |
| from { } |
| 50% { filter: grayscale(0.5); } |
| to { filter: grayscale(1); } |
| } |
| |
| @keyframes sepia-anim { |
| from { } |
| 50% { filter: sepia(0.5); } |
| to { filter: sepia(1); } |
| } |
| |
| @keyframes saturate-anim { |
| from { } |
| 50% { filter: saturate(0.5); } |
| to { filter: saturate(1); } |
| } |
| |
| @keyframes hue-rotate-anim { |
| from { } |
| 50% { filter: hue-rotate(90deg); } |
| to { filter: hue-rotate(180deg); } |
| } |
| |
| @keyframes invert-anim { |
| from { } |
| 50% { filter: invert(0.5); } |
| to { filter: invert(1); } |
| } |
| |
| @keyframes opacity-anim { |
| from { } |
| 50% { filter: opacity(0.5); } |
| to { filter: opacity(0); } |
| } |
| |
| @keyframes brightness-anim { |
| from { } |
| 50% { filter: brightness(0.5); } |
| to { filter: brightness(0); } |
| } |
| |
| @keyframes contrast-anim { |
| from { } |
| 50% { filter: contrast(0.5); } |
| to { filter: contrast(0); } |
| } |
| |
| @keyframes blur-anim { |
| from { } |
| 50% { filter: blur(10px); } |
| to { filter: blur(20px); } |
| } |
| |
| @keyframes dropshadow-anim { |
| from { } |
| 50% { filter: grayscale(10px 15px 5px rgba(128, 128, 128, 0.5); } |
| to { filter: drop-shadow(20px 30px 10px black)); } |
| } |
| |
| </style> |
| <script src="../../animations/resources/animation-test-helpers.js"></script> |
| <script type="text/javascript"> |
| const expectedValues = [ |
| // [time, element-id, property, expected-value, tolerance] |
| [0.5, "grayscale-box", "filter", 'grayscale(0.25)', 0.05], |
| [0.5, "sepia-box", "filter", 'sepia(0.25)', 0.05], |
| [0.5, "saturate-box", "filter", 'saturate(0.75)', 0.05], |
| [0.5, "hue-rotate-box", "filter", 'hue-rotate(45deg)', 3], |
| [0.5, "invert-box", "filter", 'invert(0.25)', 0.05], |
| [0.5, "opacity-box", "filter", 'opacity(0.75)', 0.05], |
| [0.5, "brightness-box", "filter", 'brightness(0.75)', 0.05], |
| [0.5, "contrast-box", "filter", 'contrast(0.75)', 0.05], |
| [0.5, "blur-box", "filter", 'blur(5px)', 1], |
| // FIXME when we implement computed filter style for drop-shadow. |
| // ["dropshadow-anim", 1, "dropshadow-box", "filter", 'drop-shadow(rgba(0, 0, 0, 0.25) 5px 8px 3px )', 2], |
| ]; |
| |
| runAnimationTest(expectedValues); |
| </script> |
| </head> |
| <body> |
| |
| <div class="box" id="grayscale-box"></div> |
| <div class="box" id="sepia-box"></div> |
| <div class="box" id="saturate-box"></div> |
| <div class="box" id="hue-rotate-box"></div> |
| <div class="box" id="invert-box"></div> |
| <div class="box" id="opacity-box"></div> |
| <div class="box" id="brightness-box"></div> |
| <div class="box" id="contrast-box"></div> |
| <div class="box" id="blur-box"></div> |
| <!-- <div class="box" id="dropshadow-box"></div> --> |
| |
| <div id="result"> |
| </div> |
| </body> |
| </html> |
