<script>
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.setBackingScaleFactor(2, function() { testRunner.notifyDone(); });
}
</script>
<body></body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
<defs>
<filter id="displacement" color-interpolation-filters="sRGB">
<feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<filter id="turbulence" color-interpolation-filters="sRGB">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
</filter>
</defs>
</svg>
<style>
img {
margin: 10px;
transform: translateZ(0);
}
</style>
<img style="filter: url(#displacement); position: absolute; top: 10px; left: 10px;" src="resources/reference.png"/>
<img style="filter: url(#turbulence); position: absolute; top: 10px; left: 210px;" src="resources/reference.png"/>
<img style="filter:blur(10px); position: absolute; top: 140px; left: 10px;" src="resources/reference.png"/>
<img style="filter:drop-shadow(rgba(0,0,0,0.5) 0 20px 20px); position: absolute; top: 140px; left: 210px;" src="resources/reference.png"/>