clip-input.svg - mozsearch

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<svg id="svg-root"

  xmlns="http://www.w3.org/2000/svg"

  xmlns:xlink="http://www.w3.org/1999/xlink">

  <g id="testmeta">

    <title>SVG Filter Chains: Clip Input Filter</title>

    <link rel="copyright"

          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>

    <link rel="license"

          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>

    <link rel="author"

          title="Max Vujovic"

          href="mailto:mvujovic@adobe.com"/>

    <link rel="help"

          href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>

    <link rel="match"

          href="clip-input-ref.svg" />

    <metadata class="flags">namespace svg</metadata>

    <desc class="assert">

      In an SVG filter chain, this test verifies that a filter region clips a

      SourceGraphic input filter. If the test passes, you should see a green

      square.

    </desc>

  </g>

  <g id="test-body-content">

    <filter id="f1" x="100" y="0" width="100" height="100" filterUnits="userSpaceOnUse">

      <!-- Create a red square at x=100. -->

      <feFlood flood-color="red"/>

    </filter>

    <filter id="f2" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">

      <!-- Create a green square at x=0. -->

      <feFlood result="green" flood-color="green"/>

      <!--

          Attempt to offset the red square left to cover up the green square.

          However, this filter's filter region should clip away the red square,

          and only transparent pixels should be offset left, leaving the green

          square intact.

-->

      <feOffset result="red" in="SourceGraphic" dx="-100" x="0" y="0" width="200" height="100"/>

      <feMerge>

          <feMergeNode in="green"/>

          <feMergeNode in="red"/>

      </feMerge>

    </filter>

    <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)"/>

  </g>

</svg>