45 lines
2.4 KiB
HTML
45 lines
2.4 KiB
HTML
<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>
|