src/third_party/WebKit/LayoutTests/css3/filters/effect-all-on-background-hw.html

   1 <script>
   2   if (window.testRunner)
   3     window.testRunner.dumpAsTextWithPixelResults();
   4 </script>
   5 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
   6   <defs>
   7     <filter id="xor" color-interpolation-filters="sRGB">
   8       <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.5 0" result="transp"/>
   9       <feOffset dx="10" dy="10"/>
  10       <feComposite in2="transp" operator="xor"/>
  11     </filter>
  12   </defs>
  13 </svg>
  14 <style>
  15 li {
  16     margin: 10px;
  17     width: 160px;
  18     height: 90px;
  19     background-image: url(resources/reference.png);
  20     display: block;
  21     float: left;
  22     transform:translateZ(0);
  23 }
  24 </style>
  25 <ul>
  26 <li style="-webkit-filter: blur(3px)"/>
  27 <li style="-webkit-filter: brightness(0.5)"/>
  28 <li style="-webkit-filter: contrast(3)"/>
  29 <li style="-webkit-filter: drop-shadow(5px 5px 5px blue)"/>
  30 <li style="-webkit-filter: grayscale(0.5)"/>
  31 <li style="-webkit-filter: hue-rotate(180deg)"/>
  32 <li style="-webkit-filter: invert(1.0)"/>
  33 <li style="-webkit-filter: opacity(0.5)"/>
  34 <li style="-webkit-filter: saturate(10)"/>
  35 <li style="-webkit-filter: sepia(1.0)"/>
  36 <li style="-webkit-filter: url(#xor)"/>
  37 </ul>