| OLD | NEW |
| (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> |
| OLD | NEW |