| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| img { |
| margin: 10px; |
| } |
| |
| img { |
| animation-duration: 2s !important; |
| animation-timing-function: linear !important; |
| } |
| |
| #grayscale-box { |
| filter: grayscale(1); |
| } |
| .animating #grayscale-box { |
| animation-name: grayscale-anim; |
| } |
| |
| #sepia-box { |
| filter: sepia(1); |
| } |
| .animating #sepia-box { |
| animation: sepia-anim; |
| } |
| |
| #saturate-box { |
| filter: saturate(1); |
| } |
| .animating #saturate-box { |
| animation: saturate-anim; |
| } |
| |
| #huerotate-box { |
| filter: hue-rotate(90deg); |
| } |
| .animating #huerotate-box { |
| animation: huerotate-anim; |
| } |
| |
| #invert-box { |
| filter: invert(1); |
| } |
| .animating #invert-box { |
| animation: invert-anim; |
| } |
| |
| #opacity-box { |
| filter: opacity(0); |
| } |
| .animating #opacity-box { |
| animation: opacity-anim; |
| } |
| |
| #brightness-box { |
| filter: brightness(0); |
| } |
| .animating #brightness-box { |
| animation: brightness-anim; |
| } |
| |
| #contrast-box { |
| filter: contrast(0); |
| } |
| .animating #contrast-box { |
| animation: contrast-anim; |
| } |
| |
| #blur-box { |
| filter: blur(10px); |
| } |
| .animating #blur-box { |
| animation: blur-anim; |
| } |
| |
| @keyframes grayscale-anim { |
| from { filter: grayscale(0); } |
| to { filter: grayscale(1); } |
| } |
| |
| @keyframes sepia-anim { |
| from { filter: sepia(0); } |
| to { filter: sepia(1); } |
| } |
| |
| @keyframes saturate-anim { |
| from { filter: saturate(0); } |
| to { filter: saturate(1); } |
| } |
| |
| @keyframes huerotate-anim { |
| from { filter: hue-rotate(0); } |
| to { filter: hue-rotate(180deg); } |
| } |
| |
| @keyframes invert-anim { |
| from { filter: invert(0); } |
| to { filter: invert(1); } |
| } |
| |
| @keyframes opacity-anim { |
| from { filter: opacity(1); } |
| to { filter: opacity(0); } |
| } |
| |
| @keyframes brightness-anim { |
| from { filter: brightness(1); } |
| to { filter: brightness(0); } |
| } |
| |
| @keyframes contrast-anim { |
| from { filter: contrast(1); } |
| to { filter: contrast(0); } |
| } |
| |
| @keyframes blur-anim { |
| from { filter: blur(0); } |
| to { filter: blur(20px); } |
| } |
| |
| </style> |
| <script src="../../animations/resources/animation-test-helpers.js"></script> |
| <script type="text/javascript"> |
| |
| const preExpectedValues = [ |
| // [element-id, property, expected-value] |
| ["grayscale-box", "filter", 'grayscale(1)'], |
| ["sepia-box", "filter", 'sepia(1)'], |
| ["saturate-box", "filter", 'saturate(1)'], |
| ["huerotate-box", "filter", 'hue-rotate(90deg)'], |
| ["invert-box", "filter", 'invert(1)'], |
| ["opacity-box", "filter", 'opacity(0)'], |
| ["brightness-box", "filter", 'brightness(0)'], |
| ["contrast-box", "filter", 'contrast(0)'], |
| ["blur-box", "filter", 'blur(10px)'], |
| ]; |
| |
| const expectedValues = [ |
| // [time, element-id, property, expected-value, tolerance] |
| [1, "grayscale-box", "filter", 'grayscale(0.5)', 0.15], |
| [1, "sepia-box", "filter", 'sepia(0.5)', 0.15], |
| [1, "saturate-box", "filter", 'saturate(0.5)', 0.15], |
| [1, "huerotate-box", "filter", 'hue-rotate(90deg)', 20], |
| [1, "invert-box", "filter", 'invert(0.5)', 0.15], |
| [1, "opacity-box", "filter", 'opacity(0.5)', 0.15], |
| [1, "brightness-box", "filter", 'brightness(0.5)', 0.15], |
| [1, "contrast-box", "filter", 'contrast(0.5)', 0.15], |
| [1, "blur-box", "filter", 'blur(10px)', 4], |
| ]; |
| |
| function runPreTest() { |
| for (var i=0; i < preExpectedValues.length; i++) { |
| var id = preExpectedValues[i][0]; |
| var prop = preExpectedValues[i][1]; |
| var expected = preExpectedValues[i][2]; |
| var element = document.getElementById(id); |
| var computedStyle = window.getComputedStyle(element)[prop]; |
| if (computedStyle == expected) |
| result += "PASS: Element " + id + " had filter value " + expected + " before animation.<br>"; |
| else |
| result += "FAIL: Element " + id + " had filter value " + computedStyle + " rather than " + expected + " before animation.<br>"; |
| } |
| |
| // Completed the pre-animation tests. Now start the animation. |
| setTimeout(function () { |
| document.body.className = "animating"; |
| runAnimationTest(expectedValues); |
| }, 0); |
| } |
| |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| window.addEventListener("load", runPreTest, false); |
| </script> |
| </head> |
| <body> |
| |
| <img src="resources/reference.png" id="grayscale-box"> |
| <img src="resources/reference.png" id="sepia-box"> |
| <img src="resources/reference.png" id="saturate-box"> |
| <img src="resources/reference.png" id="huerotate-box"> |
| <img src="resources/reference.png" id="invert-box"> |
| <img src="resources/reference.png" id="opacity-box"> |
| <img src="resources/reference.png" id="brightness-box"> |
| <img src="resources/reference.png" id="contrast-box"> |
| <img src="resources/reference.png" id="blur-box"> |
| |
| <!-- this result element is filled by the animation test system --> |
| <div id="result"> |
| </div> |
| </body> |
| </html> |
