| <!-- |
| |
| Copyright 2001 The Apache Software Foundation |
| Copyright 2014 The Chromium Authors. All rights reserved. |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <!-- ========================================================================= --> |
| <!-- Based on batik/filters/filterRegions.svg and converted into an HTML --> |
| <!-- reftest, this test validates the filter region processing for the top --> |
| <!-- level filter nodes and filter primitives. For each test, a filter is --> |
| <!-- invoked to render in a region specified by the filter region. The --> |
| <!-- expected result draws a filled rectangle for the expected filter region --> |
| <!-- --> |
| <!-- @author vincent.hardy@eng.sun.com (for batik/filters/filterRegions.svg) --> |
| <!-- ========================================================================= --> |
| |
| <html> |
| <body> |
| <style> |
| div { |
| position: absolute; |
| } |
| .sample0 { |
| top: 0px; |
| left: 0px; |
| width: 100px; |
| height: 50px; |
| filter: url(#filterRegion_0); |
| } |
| .sample1 { |
| left: 0px; |
| top: 0px; |
| width: 300px; |
| height: 25px; |
| filter:url(#filterRegion_1); |
| } |
| .sample2 { |
| left: 0px; |
| top: 0px; |
| width: 100px; |
| height: 25px; |
| filter:url(#filterRegion_2); |
| } |
| .sample3 { |
| left: 0px; |
| top: 0px; |
| width: 300px; |
| height: 25px; |
| filter:url(#filterRegion_3); |
| } |
| .sample4 { |
| left: 0px; |
| top: 0px; |
| width: 300px; |
| height: 25px; |
| filter:url(#filterRegion_4); |
| } |
| .sample5 { |
| left: 0px; |
| top: 0px; |
| width: 300px; |
| height: 25px; |
| filter:url(#filterRegion_5); |
| } |
| .sample6 { |
| left: 0px; |
| top: 0px; |
| width: 500px; |
| height: 25px; |
| filter:url(#filterRegion_6); |
| } |
| .sample2_0 { |
| left: 0px; |
| top: 0px; |
| width: 50px; |
| height: 25px; |
| filter:url(#filterRegion_2_0); |
| } |
| .sample2_1 { |
| left: 20px; |
| top: 30px; |
| width: 50px; |
| height: 40px; |
| filter:url(#filterRegion_2_1); |
| } |
| .sample2_2 { |
| left: 20px; |
| top: 30px; |
| width: 50px; |
| height: 40px; |
| filter:url(#filterRegion_2_2); |
| } |
| .sample2_3 { |
| left: 20px; |
| top: 30px; |
| width: 50px; |
| height: 40px; |
| filter:url(#filterRegion_2_3); |
| } |
| .sample2_4 { |
| left: 20px; |
| top: 30px; |
| width: 50px; |
| height: 40px; |
| filter:url(#filterRegion_2_4); |
| } |
| .sample2_5 { |
| left: 20px; |
| top: 30px; |
| width: 50px; |
| height: 40px; |
| filter:url(#filterRegion_2_5); |
| } |
| .sample3_1 { |
| left: 0px; |
| top: 0px; |
| width: 450px; |
| height: 150px; |
| filter:url(#filterRegion_3_1); |
| } |
| .sample3_0 { |
| left: 0px; |
| top: 0px; |
| width: 40px; |
| height: 50px; |
| filter:url(#filterRegion_3_0); |
| } |
| .sample3_2 { |
| left: 50px; |
| top: 40px; |
| width: 50px; |
| height: 40px; |
| filter:url(#filterRegion_3_2); |
| } |
| .sample3_3 { |
| left: 50px; |
| top: 40px; |
| width: 50px; |
| height: 40px; |
| filter:url(#filterRegion_3_3); |
| } |
| </style> |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body" width="0" height="0"> |
| <defs> |
| <filter id="filterRegion_0" > |
| <feFlood style="flood-color:green;" /> |
| </filter> |
| |
| <filter id="filterRegion_1" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:green" /> |
| </filter> |
| |
| <filter id="filterRegion_2" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:green" x="25" y="35" width="50" height="40"/> |
| </filter> |
| |
| <filter id="filterRegion_3" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:green" height="20"/> |
| </filter> |
| |
| <filter id="filterRegion_4" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:green" width="25"/> |
| </filter> |
| |
| <filter id="filterRegion_5" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:green" y="10"/> |
| </filter> |
| |
| <filter id="filterRegion_6" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:green" x="10"/> |
| </filter> |
| |
| <filter id="filterRegion_2_0" primitiveUnits="objectBoundingBox"> |
| <feFlood style="flood-color:green;" /> |
| </filter> |
| |
| <filter id="filterRegion_2_1" filterUnits="userSpaceOnUse" |
| primitiveUnits="objectBoundingBox"> |
| <feFlood style="flood-color:green;" x="0" y="0" width="1" height="1"/> |
| </filter> |
| |
| <filter id="filterRegion_2_2" filterUnits="userSpaceOnUse" |
| primitiveUnits="objectBoundingBox"> |
| <feFlood style="flood-color:green" x="0%" y="0%" width="100%" height="100%"/> |
| </filter> |
| |
| <filter id="filterRegion_2_3" filterUnits="userSpaceOnUse" |
| primitiveUnits="objectBoundingBox"> |
| <feFlood style="flood-color:green" x=".25" y="50%" width=".5" height="25%"/> |
| </filter> |
| |
| <filter id="filterRegion_2_4" filterUnits="userSpaceOnUse" |
| primitiveUnits="objectBoundingBox"> |
| <feFlood style="flood-color:green" x="25%" y=".5" width="50%" height=".25"/> |
| </filter> |
| |
| <filter id="filterRegion_2_5" filterUnits="userSpaceOnUse" |
| primitiveUnits="objectBoundingBox" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:green" y=".5" height=".25"/> |
| </filter> |
| |
| <filter id="filterRegion_3_0" filterUnits="objectBoundingBox" > |
| <feFlood style="flood-color:green;" /> |
| </filter> |
| |
| <filter id="filterRegion_3_1" filterUnits="objectBoundingBox" |
| primitiveUnits="userSpaceOnUse"> |
| <feFlood style="flood-color:green" x="20" y="30" width="20" height="25"/> |
| </filter> |
| |
| <filter id="filterRegion_3_2" filterUnits="objectBoundingBox" |
| primitiveUnits="userSpaceOnUse" |
| x="-1" y="-1" width="2" height="2"> |
| <feFlood style="flood-color:green" /> |
| </filter> |
| |
| <filter id="filterRegion_3_3" filterUnits="objectBoundingBox" |
| primitiveUnits="userSpaceOnUse" |
| x="-50%" y="-50%" width="75%" height="75%"> |
| <feFlood style="flood-color:green" /> |
| </filter> |
| |
| </defs> |
| |
| <div style="left: 30px; top: 50px;"> |
| <div style="left: 240px; top: 95px;"> |
| <div class="sample0"></div> |
| </div> |
| |
| <div> |
| <div class="sample1"></div> |
| </div> |
| |
| <div style="left: 100px; top: 0px;"> |
| <div class="sample2"></div> |
| </div> |
| |
| <div style="left: 200px; top: 0px;"> |
| <div class="sample3"></div> |
| </div> |
| |
| <div style="left: 300px; top: 0px;"> |
| <div class="sample4"></div> |
| </div> |
| |
| <div style="left: 0px; top: 75px;"> |
| <div class="sample5"></div> |
| </div> |
| |
| <div style="left: 100px; top: 75px;"> |
| <div class="sample6"></div> |
| </div> |
| |
| <div style="left: 120px; top: 280px;"> |
| <div class="sample2_0"></div> |
| </div> |
| |
| <div style="left: 0px; top: 160px;"> |
| <div class="sample2_1"></div> |
| </div> |
| |
| <div style="left: 100px; top: 160px;"> |
| <div class="sample2_2"></div> |
| </div> |
| |
| <div style="left: 200px; top: 160px;"> |
| <div class="sample2_3"></div> |
| </div> |
| |
| <div style="left: 300px; top: 160px;"> |
| <div class="sample2_4"></div> |
| </div> |
| |
| <div style="left: 0px; top: 245px;"> |
| <div class="sample2_5"></div> |
| </div> |
| |
| <div style="left: 0px; top: 330px;"> |
| <div class="sample3_1"></div> |
| </div> |
| |
| <div style="left: 320px; top: 330px;"> |
| <div class="sample3_0"></div> |
| </div> |
| |
| <div style="left: 100px; top: 330px;"> |
| <div class="sample3_2"></div> |
| </div> |
| |
| <div style="left: 200px; top: 330px;"> |
| <div class="sample3_3"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
