| <html> |
| <head> |
| <title>Smart Invert Images and Video Test</title> |
| <style type="text/css"> |
| picture, img, video { width: 150px; filter: none; } |
| /* Testing explicit author overrides. */ |
| .invert { filter: invert(1); } |
| .no-invert { filter: none; } |
| .preserve-filter { filter: grayscale(1); } |
| #result { position: absolute; top: -5000px; } |
| </style> |
| </head> |
| <body> |
| |
| <img class="invert" src="../compositing/resources/simple_image_opaque.png" alt=""> |
| <picture class="invert"><img class="fallback no-invert" src="../compositing/resources/simple_image_opaque.png" alt=""></picture> |
| <picture class="invert"> |
| <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w"> |
| <img class="fallback no-invert" src="../compositing/resources/simple_image.png" alt=""> |
| </picture> |
| <video class="invert" poster="../compositing/resources/simple_image_opaque.png"></video> |
| <video class="invert" poster="../compositing/resources/simple_image_opaque.png" controls></video> |
| <br> |
| <img class="no-invert" src="../compositing/resources/simple_image_opaque.png"> |
| <picture class="no-invert"><img class="fallback" src="../compositing/resources/simple_image_opaque.png" alt=""></picture> |
| <picture class="no-invert"> |
| <source media="screen" class="no-invert" srcset="../compositing/resources/simple_image_opaque.png 150w"> |
| <img class="fallback no-invert" src="../compositing/resources/simple_image.png" alt=""> |
| </picture> |
| <video class="no-invert" poster="../compositing/resources/simple_image_opaque.png"></video> |
| <video class="no-invert" poster="../compositing/resources/simple_image_opaque.png" controls></video> |
| <br> |
| <img class="preserve-filter" src="../compositing/resources/simple_image_opaque.png" alt=""> |
| <picture class="preserve-filter"><img class="fallback" src="../compositing/resources/simple_image_opaque.png" alt=""></picture> |
| <picture class="preserve-filter"> |
| <source media="screen" class="preserve-filter" srcset="../compositing/resources/simple_image_opaque.png 150w"> |
| <img class="fallback preserve-filter" src="../compositing/resources/simple_image.png" alt=""> |
| </picture> |
| <video class="preserve-filter" poster="../compositing/resources/simple_image_opaque.png"></video> |
| <video class="preserve-filter" poster="../compositing/resources/simple_image_opaque.png" controls></video> |
| |
| <div id="result"></div> |
| </body> |
| </html> |
