summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg
blob: 8dd2841add58543dabaa186af3d55d57845141f5 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!--
     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>