| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| img { |
| margin: 10px; |
| -webkit-animation-duration: 5s !important; |
| -webkit-animation-iteration-count: infinite !important; |
| -webkit-animation-direction: alternate !important; |
| } |
| |
| #grayscale-box { |
| -webkit-animation-name: grayscale-anim; |
| -webkit-filter: grayscale(1); |
| } |
| |
| #sepia-box { |
| -webkit-filter: sepia(1); |
| } |
| |
| #saturate-box { |
| -webkit-animation: saturate-anim; |
| -webkit-filter: saturate(1); |
| } |
| |
| #huerotate-box { |
| -webkit-filter: hue-rotate(90deg); |
| } |
| |
| #invert-box { |
| -webkit-animation: invert-anim; |
| -webkit-filter: invert(1); |
| } |
| |
| #opacity-box { |
| -webkit-filter: opacity(0); |
| } |
| |
| #brightness-box { |
| -webkit-animation: brightness-anim; |
| -webkit-filter: brightness(0); |
| } |
| |
| #contrast-box { |
| -webkit-filter: contrast(0); |
| } |
| |
| |
| @-webkit-keyframes grayscale-anim { |
| from { -webkit-filter: grayscale(0); } |
| to { -webkit-filter: grayscale(1); } |
| } |
| |
| @-webkit-keyframes saturate-anim { |
| from { -webkit-filter: saturate(0); } |
| to { -webkit-filter: saturate(1); } |
| } |
| |
| @-webkit-keyframes invert-anim { |
| from { -webkit-filter: invert(0); } |
| to { -webkit-filter: invert(1); } |
| } |
| |
| @-webkit-keyframes brightness-anim { |
| from { -webkit-filter: brightness(1); } |
| to { -webkit-filter: brightness(0); } |
| } |
| |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| function doTest() { |
| if (window.testRunner) { |
| document.getElementById('layer-tree').innerText = window.internals.layerTreeAsText(document) |
| testRunner.notifyDone(); |
| } |
| } |
| |
| window.addEventListener("load", doTest, false); |
| </script> |
| </head> |
| <body> |
| |
| <!-- Every third image below is animating, and thus might |
| get a compositing layer. Every 3n+1 element is not animating but |
| has a static filter, and shouldn't need a compositing layer. |
| Every 3n+2 element is a purely static image, and shouldn't |
| even be a layer --> |
| <img src="resources/reference.png" id="grayscale-box"> |
| <img src="resources/reference.png" id="sepia-box"> |
| <img src="resources/reference.png"> |
| <br> |
| <img src="resources/reference.png" id="saturate-box"> |
| <img src="resources/reference.png" id="huerotate-box"> |
| <img src="resources/reference.png"> |
| <br> |
| <img src="resources/reference.png" id="invert-box"> |
| <img src="resources/reference.png" id="opacity-box"> |
| <img src="resources/reference.png"> |
| <br> |
| <img src="resources/reference.png" id="brightness-box"> |
| <img src="resources/reference.png" id="contrast-box"> |
| <img src="resources/reference.png"> |
| |
| <pre id="layer-tree">Layer tree goes here in DRT</pre> |
| |
| </body> |
| </html> |
