113 lines
2.8 KiB
HTML
113 lines
2.8 KiB
HTML
<!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>
|