src/third_party/WebKit/LayoutTests/css3/filters/effect-reference-hidpi-hw.html

   1 <script>
   2     function startTest() {
   3         if (window.testRunner) {
   4             testRunner.waitUntilDone();
   5             testRunner.setBackingScaleFactor(2, function() { testRunner.notifyDone(); });
   6         }
   7     }
   8 </script>
   9 <body onload="startTest();"></body>
  10 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
  11   <defs>
  12     <filter id="displacement" color-interpolation-filters="sRGB">
  13       <feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G"/>
  14     </filter>
  15     <filter id="turbulence" color-interpolation-filters="sRGB">
  16       <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
  17     </filter>
  18   </defs>
  19 </svg>
  20 <style>
  21 img {
  22     margin: 10px;
  23     -webkit-transform: translateZ(0);
  24 }
  25 </style>
  26 <img style="-webkit-filter: url(#displacement); filter: url(#displacement); position: absolute; top: 10px; left: 10px;" src="resources/reference.png"/>
  27 <img style="-webkit-filter: url(#turbulence); filter: url(#turbulence); position: absolute; top: 10px; left: 210px;" src="resources/reference.png"/>
  28 <img style="-webkit-filter:blur(10px); position: absolute; top: 140px; left: 10px;" src="resources/reference.png"/>
  29 <img style="-webkit-filter:drop-shadow(rgba(0,0,0,0.5) 0 20px 20px); position: absolute; top: 140px; left: 210px;" src="resources/reference.png"/>