| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| img { |
| margin: 10px; |
| } |
| |
| #grayscale-box { |
| transition: filter 5s; |
| filter: grayscale(0); |
| } |
| |
| .trigger #grayscale-box { |
| filter: grayscale(1); |
| } |
| |
| #sepia-box { |
| filter: sepia(1); |
| } |
| |
| #saturate-box { |
| transition: filter 5s; |
| filter: saturate(0); |
| } |
| |
| .trigger #saturate-box { |
| filter: saturate(1); |
| } |
| |
| #huerotate-box { |
| filter: hue-rotate(90deg); |
| } |
| |
| #invert-box { |
| transition: filter 5s; |
| filter: invert(0); |
| } |
| |
| .trigger #invert-box { |
| filter: invert(1); |
| } |
| |
| #opacity-box { |
| filter: opacity(0.5); |
| } |
| |
| #brightness-box { |
| transition: filter 5s; |
| filter: brightness(0); |
| } |
| |
| .trigger #brightness-box { |
| filter: brightness(1); |
| } |
| |
| #contrast-box { |
| filter: contrast(0); |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| function doTest() { |
| if (window.testRunner) { |
| document.getElementById('layer-tree').innerText = internals.layerTreeAsText(document) |
| testRunner.notifyDone(); |
| } |
| } |
| |
| function triggerTransition() { |
| document.body.className = "trigger"; |
| setTimeout(doTest, 200); |
| } |
| |
| window.addEventListener("load", triggerTransition, false); |
| </script> |
| </head> |
| <body> |
| |
| <!-- Every third image below will transition, and thus might |
| get a compositing layer. Every 3n+1 element is not transitioning 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> |
