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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, European Research Consortium for =-->
<!--= Informatics and Mathematics (ERCIM), Keio University). =-->
<!--= All Rights Reserved. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="[reviewer]" author="ED" status="created"
version="$Revision: 1.2 $" testname="$RCSfile: filters-background-01-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/filters.html#AccessingBackgroundImage">
<p>
Test background image processing.
</p>
<p>
The first subtest enables background image processing and adds an empty ‘g’ element
which invokes the ShiftBGAndBlur filter. This filter takes the current accumulated
background image (i.e., the entire reference graphic) as input, shifts its offscreen
down, blurs it, and then writes the result to the canvas. Note that the offscreen for
the filter is initialized to transparent black, which allows the already rendered
rectangle, circle and triangle to show through after the filter renders its own
result to the canvas.
</p>
<p>
The second subtest enables background image processing and instead invokes the
ShiftBGAndBlur filter on the inner ‘g’ element. The accumulated background at the
time the filter is applied contains only the rectangle. Because the children
of the inner ‘g’ (i.e., the circle and triangle) are not part of the inner ‘g’ element's
background and because ShiftBGAndBlur ignores SourceGraphic, the children of the inner ‘g’
do not appear in the result.
</p>
<p>
The third subtest enables background image processing and invokes the ShiftBGAndBlur on the
‘polygon’ element that draws the triangle. The accumulated background at the time the filter
is applied contains the rectangle plus the circle ignoring the effect of the ‘opacity’
property on the inner ‘g’ element. (Note that the blurred circle at the bottom does not
let the rectangle show through on its left side. This is due to ignoring the effect of
the ‘opacity’ property.) Because the triangle itself is not part of the accumulated background
and because ShiftBGAndBlur ignores SourceGraphic, the triangle does not appear in the result.
</p>
<p>
The fourth subtest is the same as the third except that filter ShiftBGAndBlur_WithSourceGraphic is
invoked instead of ShiftBGAndBlur. ShiftBGAndBlur_WithSourceGraphic performs the same effect as
ShiftBGAndBlur, but then renders the SourceGraphic on top of the shifted, blurred background
image. In this case, SourceGraphic is the blue triangle; thus, the result is the same as in
the fourth case except that the triangle now appears.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if:
</p>
<ul>
<li>each blue rectangle has the same shapes twice inside, once without filters applied, once with (blurred)</li>
<li>from left to right, the blue rectangles contain the following shapes: [rectangle, circle, triangle], [rectangle], [rectangle, circle], [rectangle, circle, triangle]</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: filters-background-01-f.svg,v $</title>
<defs>
<font-face
font-family="SVGFreeSansASCII"
unicode-range="U+0-7F">
<font-face-src>
<font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
</font-face-src>
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<filter id="ShiftBGAndBlur" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
<desc>
This filter discards the SourceGraphic, if any, and just produces
a result consisting of the BackgroundImage shifted down 125 units
and then blurred.
</desc>
<feOffset in="BackgroundImage" dx="0" dy="125" />
<feGaussianBlur stdDeviation="8" />
</filter>
<filter id="ShiftBGAndBlur_WithSourceGraphic"
filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
<desc>
This filter takes the BackgroundImage, shifts it down 125 units, blurs it,
and then renders the SourceGraphic on top of the shifted/blurred background.
</desc>
<feOffset in="BackgroundImage" dx="0" dy="125" />
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g transform="scale(0.4) translate(-200 300)">
<g enable-background="new" transform="translate(270,0)">
<desc>The second adds an empty 'g' element which invokes ShiftBGAndBlur.</desc>
<rect x="25" y="25" width="100" height="100" fill="fuchsia"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="#D3FF00"/>
<polygon points="160,25 160,125 240,75" fill="#7A16FF"/>
</g>
<g filter="url(#ShiftBGAndBlur)"/>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(540,0)">
<desc>The third invokes ShiftBGAndBlur on the inner group.</desc>
<rect x="25" y="25" width="100" height="100" fill="fuchsia"/>
<g filter="url(#ShiftBGAndBlur)" opacity=".5">
<circle cx="125" cy="75" r="45" fill="#D3FF00"/>
<polygon points="160,25 160,125 240,75" fill="#7A16FF"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(810,0)">
<desc>The fourth invokes ShiftBGAndBlur on the triangle.</desc>
<rect x="25" y="25" width="100" height="100" fill="fuchsia"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="#D3FF00"/>
<polygon points="160,25 160,125 240,75" fill="#7A16FF"
filter="url(#ShiftBGAndBlur)"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
<g enable-background="new" transform="translate(1080,0)">
<desc>The fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle.</desc>
<rect x="25" y="25" width="100" height="100" fill="fuchsia"/>
<g opacity=".5">
<circle cx="125" cy="75" r="45" fill="#D3FF00"/>
<polygon points="160,25 160,125 240,75" fill="#7A16FF"
filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/>
</g>
<rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
</g>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.2 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- comment out this watermark once the test is approved -->
<g id="draft-watermark">
<rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
<text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
</g>
</svg>
|
