Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1058)

Side by Side Diff: LayoutTests/css3/filters/filterRegions.html

Issue 1235293003: Implement filter effects region for reference filters. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Fixes per review comments Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <!--
2
3 Copyright 2001 The Apache Software Foundation
4 Copyright 2014 The Chromium Authors. All rights reserved.
5
6 Licensed under the Apache License, Version 2.0 (the "License");
7 you may not use this file except in compliance with the License.
8 You may obtain a copy of the License at
9
10 http://www.apache.org/licenses/LICENSE-2.0
11
12 Unless required by applicable law or agreed to in writing, software
13 distributed under the License is distributed on an "AS IS" BASIS,
14 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 See the License for the specific language governing permissions and
16 limitations under the License.
17
18 -->
19 <!-- ========================================================================= - ->
20 <!-- Based on batik/filters/filterRegions.svg and converted into an HTML - ->
21 <!-- reftest, this test validates the filter region processing for the top - ->
22 <!-- level filter nodes and filter primitives. For each test, a filter is - ->
23 <!-- invoked to render in a region specified by the filter region. The - ->
24 <!-- expected result draws a filled rectangle for the expected filter region - ->
25 <!-- - ->
26 <!-- @author vincent.hardy@eng.sun.com (for batik/filters/filterRegions.svg) - ->
27 <!-- ========================================================================= - ->
28
29 <html>
30 <body>
31 <style>
32 div {
33 position: absolute;
34 }
35 .sample0 {
36 top: 0px;
37 left: 0px;
38 width: 100px;
39 height: 50px;
40 filter: url(#filterRegion_0);
41 -webkit-filter: url(#filterRegion_0);
42 }
43 .sample1 {
44 left: 0px;
45 top: 0px;
46 width: 300px;
47 height: 25px;
48 filter:url(#filterRegion_1);
49 -webkit-filter:url(#filterRegion_1);
50 }
51 .sample2 {
52 left: 0px;
53 top: 0px;
54 width: 100px;
55 height: 25px;
56 filter:url(#filterRegion_2);
57 -webkit-filter:url(#filterRegion_2);
58 }
59 .sample3 {
60 left: 0px;
61 top: 0px;
62 width: 300px;
63 height: 25px;
64 filter:url(#filterRegion_3);
65 -webkit-filter:url(#filterRegion_3);
66 }
67 .sample4 {
68 left: 0px;
69 top: 0px;
70 width: 300px;
71 height: 25px;
72 filter:url(#filterRegion_4);
73 -webkit-filter:url(#filterRegion_4);
74 }
75 .sample5 {
76 left: 0px;
77 top: 0px;
78 width: 300px;
79 height: 25px;
80 filter:url(#filterRegion_5);
81 -webkit-filter:url(#filterRegion_5);
82 }
83 .sample6 {
84 left: 0px;
85 top: 0px;
86 width: 500px;
87 height: 25px;
88 filter:url(#filterRegion_6);
89 -webkit-filter:url(#filterRegion_6);
90 }
91 .sample2_0 {
92 left: 0px;
93 top: 0px;
94 width: 50px;
95 height: 25px;
96 filter:url(#filterRegion_2_0);
97 -webkit-filter:url(#filterRegion_2_0);
98 }
99 .sample2_1 {
100 left: 20px;
101 top: 30px;
102 width: 50px;
103 height: 40px;
104 filter:url(#filterRegion_2_1);
105 -webkit-filter:url(#filterRegion_2_1);
106 }
107 .sample2_2 {
108 left: 20px;
109 top: 30px;
110 width: 50px;
111 height: 40px;
112 filter:url(#filterRegion_2_2);
113 -webkit-filter:url(#filterRegion_2_2);
114 }
115 .sample2_3 {
116 left: 20px;
117 top: 30px;
118 width: 50px;
119 height: 40px;
120 filter:url(#filterRegion_2_3);
121 -webkit-filter:url(#filterRegion_2_3);
122 }
123 .sample2_4 {
124 left: 20px;
125 top: 30px;
126 width: 50px;
127 height: 40px;
128 filter:url(#filterRegion_2_4);
129 -webkit-filter:url(#filterRegion_2_4);
130 }
131 .sample2_5 {
132 left: 20px;
133 top: 30px;
134 width: 50px;
135 height: 40px;
136 filter:url(#filterRegion_2_5);
137 -webkit-filter:url(#filterRegion_2_5);
138 }
139 .sample3_1 {
140 left: 0px;
141 top: 0px;
142 width: 450px;
143 height: 150px;
144 filter:url(#filterRegion_3_1);
145 -webkit-filter:url(#filterRegion_3_1);
146 }
147 .sample3_0 {
148 left: 0px;
149 top: 0px;
150 width: 40px;
151 height: 50px;
152 filter:url(#filterRegion_3_0);
153 -webkit-filter:url(#filterRegion_3_0);
154 }
155 .sample3_2 {
156 left: 50px;
157 top: 40px;
158 width: 50px;
159 height: 40px;
160 filter:url(#filterRegion_3_2);
161 -webkit-filter:url(#filterRegion_3_2);
162 }
163 .sample3_3 {
164 left: 50px;
165 top: 40px;
166 width: 50px;
167 height: 40px;
168 filter:url(#filterRegion_3_3);
169 -webkit-filter:url(#filterRegion_3_3);
170 }
171 </style>
172 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlin k" id="body" width="0" height="0">
173 <defs>
174 <filter id="filterRegion_0" >
175 <feFlood style="flood-color:green;" />
176 </filter>
177
178 <filter id="filterRegion_1" filterUnits="userSpaceOnUse"
179 primitiveUnits="userSpaceOnUse"
180 x="20" y="30" width="50" height="40">
181 <feFlood style="flood-color:green" />
182 </filter>
183
184 <filter id="filterRegion_2" filterUnits="userSpaceOnUse"
185 primitiveUnits="userSpaceOnUse"
186 x="20" y="30" width="50" height="40">
187 <feFlood style="flood-color:green" x="25" y="35" width="50" height=" 40"/>
188 </filter>
189
190 <filter id="filterRegion_3" filterUnits="userSpaceOnUse"
191 primitiveUnits="userSpaceOnUse"
192 x="20" y="30" width="50" height="40">
193 <feFlood style="flood-color:green" height="20"/>
194 </filter>
195
196 <filter id="filterRegion_4" filterUnits="userSpaceOnUse"
197 primitiveUnits="userSpaceOnUse"
198 x="20" y="30" width="50" height="40">
199 <feFlood style="flood-color:green" width="25"/>
200 </filter>
201
202 <filter id="filterRegion_5" filterUnits="userSpaceOnUse"
203 primitiveUnits="userSpaceOnUse"
204 x="20" y="30" width="50" height="40">
205 <feFlood style="flood-color:green" y="10"/>
206 </filter>
207
208 <filter id="filterRegion_6" filterUnits="userSpaceOnUse"
209 primitiveUnits="userSpaceOnUse"
210 x="20" y="30" width="50" height="40">
211 <feFlood style="flood-color:green" x="10"/>
212 </filter>
213
214 <filter id="filterRegion_2_0" primitiveUnits="objectBoundingBox">
215 <feFlood style="flood-color:green;" />
216 </filter>
217
218 <filter id="filterRegion_2_1" filterUnits="userSpaceOnUse"
219 primitiveUnits="objectBoundingBox">
220 <feFlood style="flood-color:green;" x="0" y="0" width="1" height="1" />
221 </filter>
222
223 <filter id="filterRegion_2_2" filterUnits="userSpaceOnUse"
224 primitiveUnits="objectBoundingBox">
225 <feFlood style="flood-color:green" x="0%" y="0%" width="100%" height ="100%"/>
226 </filter>
227
228 <filter id="filterRegion_2_3" filterUnits="userSpaceOnUse"
229 primitiveUnits="objectBoundingBox">
230 <feFlood style="flood-color:green" x=".25" y="50%" width=".5" height ="25%"/>
231 </filter>
232
233 <filter id="filterRegion_2_4" filterUnits="userSpaceOnUse"
234 primitiveUnits="objectBoundingBox">
235 <feFlood style="flood-color:green" x="25%" y=".5" width="50%" height =".25"/>
236 </filter>
237
238 <filter id="filterRegion_2_5" filterUnits="userSpaceOnUse"
239 primitiveUnits="objectBoundingBox"
240 x="20" y="30" width="50" height="40">
241 <feFlood style="flood-color:green" y=".5" height=".25"/>
242 </filter>
243
244 <filter id="filterRegion_3_0" filterUnits="objectBoundingBox" >
245 <feFlood style="flood-color:green;" />
246 </filter>
247
248 <filter id="filterRegion_3_1" filterUnits="objectBoundingBox"
249 primitiveUnits="userSpaceOnUse">
250 <feFlood style="flood-color:green" x="20" y="30" width="20" height=" 25"/>
251 </filter>
252
253 <filter id="filterRegion_3_2" filterUnits="objectBoundingBox"
254 primitiveUnits="userSpaceOnUse"
255 x="-1" y="-1" width="2" height="2">
256 <feFlood style="flood-color:green" />
257 </filter>
258
259 <filter id="filterRegion_3_3" filterUnits="objectBoundingBox"
260 primitiveUnits="userSpaceOnUse"
261 x="-50%" y="-50%" width="75%" height="75%" >
262 <feFlood style="flood-color:green" />
263 </filter>
264
265 </defs>
266
267 <div style="left: 30px; top: 50px;">
268 <div style="left: 240px; top: 95px;">
269 <div class="sample0"></div>
270 </div>
271
272 <div>
273 <div class="sample1"></div>
274 </div>
275
276 <div style="left: 100px; top: 0px;">
277 <div class="sample2"></div>
278 </div>
279
280 <div style="left: 200px; top: 0px;">
281 <div class="sample3"></div>
282 </div>
283
284 <div style="left: 300px; top: 0px;">
285 <div class="sample4"></div>
286 </div>
287
288 <div style="left: 0px; top: 75px;">
289 <div class="sample5"></div>
290 </div>
291
292 <div style="left: 100px; top: 75px;">
293 <div class="sample6"></div>
294 </div>
295
296 <div style="left: 120px; top: 280px;">
297 <div class="sample2_0"></div>
298 </div>
299
300 <div style="left: 0px; top: 160px;">
301 <div class="sample2_1"></div>
302 </div>
303
304 <div style="left: 100px; top: 160px;">
305 <div class="sample2_2"></div>
306 </div>
307
308 <div style="left: 200px; top: 160px;">
309 <div class="sample2_3"></div>
310 </div>
311
312 <div style="left: 300px; top: 160px;">
313 <div class="sample2_4"></div>
314 </div>
315
316 <div style="left: 0px; top: 245px;">
317 <div class="sample2_5"></div>
318 </div>
319
320 <div style="left: 0px; top: 330px;">
321 <div class="sample3_1"></div>
322 </div>
323
324 <div style="left: 320px; top: 330px;">
325 <div class="sample3_0"></div>
326 </div>
327
328 <div style="left: 100px; top: 330px;">
329 <div class="sample3_2"></div>
330 </div>
331
332 <div style="left: 200px; top: 330px;">
333 <div class="sample3_3"></div>
334 </div>
335 </div>
336 </body>
337 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/filters/feoffset-region-zoom.html ('k') | LayoutTests/css3/filters/filterRegions-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698