| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 img { | |
| 6 margin: 10px; | |
| 7 -webkit-animation-duration: 5s !important; | |
| 8 -webkit-animation-iteration-count: infinite !important; | |
| 9 -webkit-animation-direction: alternate !important; | |
| 10 } | |
| 11 | |
| 12 #grayscale-box { | |
| 13 -webkit-animation-name: grayscale-anim; | |
| 14 -webkit-filter: grayscale(1); | |
| 15 } | |
| 16 | |
| 17 #sepia-box { | |
| 18 -webkit-filter: sepia(1); | |
| 19 } | |
| 20 | |
| 21 #saturate-box { | |
| 22 -webkit-animation: saturate-anim; | |
| 23 -webkit-filter: saturate(1); | |
| 24 } | |
| 25 | |
| 26 #huerotate-box { | |
| 27 -webkit-filter: hue-rotate(90deg); | |
| 28 } | |
| 29 | |
| 30 #invert-box { | |
| 31 -webkit-animation: invert-anim; | |
| 32 -webkit-filter: invert(1); | |
| 33 } | |
| 34 | |
| 35 #opacity-box { | |
| 36 -webkit-filter: opacity(0); | |
| 37 } | |
| 38 | |
| 39 #brightness-box { | |
| 40 -webkit-animation: brightness-anim; | |
| 41 -webkit-filter: brightness(0); | |
| 42 } | |
| 43 | |
| 44 #contrast-box { | |
| 45 -webkit-filter: contrast(0); | |
| 46 } | |
| 47 | |
| 48 | |
| 49 @-webkit-keyframes grayscale-anim { | |
| 50 from { -webkit-filter: grayscale(0); } | |
| 51 to { -webkit-filter: grayscale(1); } | |
| 52 } | |
| 53 | |
| 54 @-webkit-keyframes saturate-anim { | |
| 55 from { -webkit-filter: saturate(0); } | |
| 56 to { -webkit-filter: saturate(1); } | |
| 57 } | |
| 58 | |
| 59 @-webkit-keyframes invert-anim { | |
| 60 from { -webkit-filter: invert(0); } | |
| 61 to { -webkit-filter: invert(1); } | |
| 62 } | |
| 63 | |
| 64 @-webkit-keyframes brightness-anim { | |
| 65 from { -webkit-filter: brightness(1); } | |
| 66 to { -webkit-filter: brightness(0); } | |
| 67 } | |
| 68 | |
| 69 </style> | |
| 70 <script> | |
| 71 if (window.testRunner) { | |
| 72 testRunner.waitUntilDone(); | |
| 73 testRunner.dumpAsText(); | |
| 74 } | |
| 75 | |
| 76 function doTest() { | |
| 77 if (window.testRunner) { | |
| 78 document.getElementById('layer-tree').innerText = window.internals
.layerTreeAsText(document) | |
| 79 testRunner.notifyDone(); | |
| 80 } | |
| 81 } | |
| 82 | |
| 83 window.addEventListener("load", doTest, false); | |
| 84 </script> | |
| 85 </head> | |
| 86 <body> | |
| 87 | |
| 88 <!-- Every third image below is animating, and thus might | |
| 89 get a compositing layer. Every 3n+1 element is not animating but | |
| 90 has a static filter, and shouldn't need a compositing layer. | |
| 91 Every 3n+2 element is a purely static image, and shouldn't | |
| 92 even be a layer --> | |
| 93 <img src="resources/reference.png" id="grayscale-box"> | |
| 94 <img src="resources/reference.png" id="sepia-box"> | |
| 95 <img src="resources/reference.png"> | |
| 96 <br> | |
| 97 <img src="resources/reference.png" id="saturate-box"> | |
| 98 <img src="resources/reference.png" id="huerotate-box"> | |
| 99 <img src="resources/reference.png"> | |
| 100 <br> | |
| 101 <img src="resources/reference.png" id="invert-box"> | |
| 102 <img src="resources/reference.png" id="opacity-box"> | |
| 103 <img src="resources/reference.png"> | |
| 104 <br> | |
| 105 <img src="resources/reference.png" id="brightness-box"> | |
| 106 <img src="resources/reference.png" id="contrast-box"> | |
| 107 <img src="resources/reference.png"> | |
| 108 | |
| 109 <pre id="layer-tree">Layer tree goes here in DRT</pre> | |
| 110 | |
| 111 </body> | |
| 112 </html> | |
| OLD | NEW |