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

   1 <body style="zoom: 50%"></body>
   2 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
   3   <defs>
   4     <filter id="blurY" color-interpolation-filters="sRGB">
   5       <feGaussianBlur stdDeviation="0 5"/>
   6     </filter>
   7     <filter id="lighting" color-interpolation-filters="sRGB">
   8       <feSpecularLighting>
   9         <feSpotLight pointsAtX="160" pointsAtY="130" pointsAtZ="0" specularExponent="1" limitingConeAngle="20" x="0" y="0" z="10"/>
  10       </feSpecularLighting>
  11       <feColorMatrix type="matrix" values="0 0 0 1 0  0 0 0 1 0  0 0 0 1 0  0 0 0 0 1"/>
  12       <feBlend in2="SourceGraphic" mode="multiply"/>
  13     </filter>
  14     <filter id="offset" x="0%" color-interpolation-filters="sRGB">
  15       <feOffset dx="10" dy="10"/>
  16     </filter>
  17     <filter id="displacement" color-interpolation-filters="sRGB">
  18       <feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G"/>
  19     </filter>
  20     <filter id="merge" color-interpolation-filters="sRGB">
  21       <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.3 0"  result="trans"/>
  22       <feOffset dx="5"  dy="5"  in="trans" result="offset1"/>
  23       <feOffset dx="10" dy="10" in="trans" result="offset2"/>
  24       <feOffset dx="15" dy="15" in="trans" result="offset3"/>
  25       <feMerge>
  26         <feMergeNode in="trans"/>
  27         <feMergeNode in="offset1"/>
  28         <feMergeNode in="offset2"/>
  29         <feMergeNode in="offset3"/>
  30       </feMerge>
  31     </filter>
  32     <filter id="turbulence" color-interpolation-filters="sRGB">
  33       <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
  34     </filter>
  35   </defs>
  36 </svg>
  37 <style>
  38 img {
  39     margin: 10px;
  40     transform: translateZ(0);
  41 }
  42 </style>
  43 <img src="resources/reference.png">
  44 <img style="-webkit-filter: url(#blurY); filter: url(#blurY);" src="resources/reference.png">
  45 <img style="-webkit-filter: url(#lighting); filter: url(#lighting);" src="resources/reference.png">
  46 <img style="-webkit-filter: url(#offset); filter: url(#offset);" src="resources/reference.png">
  47 <img style="-webkit-filter: url(#displacement); filter: url(#displacement);" src="resources/reference.png">
  48 <img style="-webkit-filter: url(#merge); filter: url(#merge);" src="resources/reference.png">
  49 <img style="-webkit-filter: url(#turbulence); filter: url(#turbulence);" src="resources/reference.png">
  50 <img style="-webkit-filter:blur(10px)" src="resources/reference.png">
  51 <img style="-webkit-filter:drop-shadow(rgba(0,0,0,0.5) 0 5px 5px)" src="resources/reference.png">