chromium/third_party/blink/web_tests/svg/filters/feColorMatrix-values.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="satfull">
        <feColorMatrix type="saturate" values="1" />
    </filter>

    <!-- Display default parameters when values is not present. -->
    <filter id="matnull">
        <feColorMatrix type="matrix" />
    </filter>
    <filter id="satnull">
        <feColorMatrix type="saturate" />
    </filter>
    <filter id="huenull">
        <feColorMatrix type="hueRotate" />
    </filter>

    <!-- Display default parameters when there are too many/few values. -->
    <filter id="mattoofew">
        <feColorMatrix type="matrix" values="1 0.5 1" />
    </filter>
    <filter id="mattoomany">
        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1" />
    </filter>
    <filter id="sattoomany">
        <feColorMatrix type="saturate" values="0.5 1 1" />
    </filter>
    <filter id="huetoomany">
        <feColorMatrix type="hueRotate" values="240 1 1" />
    </filter>

    <!-- The saturation argument is clamped to [0, 1]. -->
    <filter id="satrange">
        <feColorMatrix type="saturate" values="42" />
    </filter>
    <!-- For type=huerotate, values[0] is an angle and thus have wrapping behavior. -->
    <filter id="huerange">
        <feColorMatrix type="hueRotate" values="720" />
    </filter>
  </defs>

  <rect width="300" height="300" fill="red" />
  <rect y="0" width="100" height="100" fill="lime" filter="url(#matnull)"/>
  <rect y="0" x="100" width="100" height="100" fill="lime" filter="url(#mattoofew)"/>
  <rect y="0" x="200" width="100" height="100" fill="lime" filter="url(#mattoomany)"/>
  <rect y="100" width="100" height="100" fill="lime" filter="url(#satnull)"/>
  <rect y="100" x="100" width="100" height="100" fill="lime" filter="url(#sattoomany)"/>
  <rect y="100" x="200" width="100" height="100" fill="lime" filter="url(#satrange)"/>
  <rect y="200" width="100" height="100" fill="lime" filter="url(#huenull)"/>
  <rect y="200" x="100" width="100" height="100" fill="lime" filter="url(#huetoomany)"/>
  <rect y="200" x="200" width="100" height="100" fill="lime" filter="url(#huerange)"/>
</svg>