<script>
    function startTest() {
        if (window.testRunner) {
            testRunner.waitUntilDone();
            testRunner.setBackingScaleFactor(2, function() { testRunner.notifyDone(); });
        }
    }
</script>
<body onload="startTest();"></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"/>