| <!-- |
| |
| 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; |
| background-color: green; |
| } |
| .sample0Expected { |
| left: -10px; |
| top: -5px; |
| width: 120px; |
| height: 60px; |
| } |
| .sample1Expected { |
| left: 20px; |
| top: 30px; |
| width: 50px; |
| height: 40px; |
| } |
| .sample2Expected { |
| left: 25px; |
| top: 35px; |
| width: 50px; |
| height: 40px; |
| } |
| .sample3Expected { |
| left: 20px; |
| top: 30px; |
| width: 50px; |
| height: 20px; |
| } |
| .sample4Expected { |
| left: 20px; |
| top: 30px; |
| width: 25px; |
| height: 40px; |
| } |
| .sample5Expected { |
| left: 20px; |
| top: 10px; |
| width: 50px; |
| height: 40px; |
| } |
| .sample6Expected { |
| left: 10px; |
| top: 30px; |
| width: 50px; |
| height: 40px; |
| } |
| .sample2_0Expected { |
| left: -5px; |
| top: -3px; |
| width: 60px; |
| height: 31px; |
| } |
| .sample2_1Expected { |
| left: 20px; |
| top: 30px; |
| width: 50px; |
| height: 40px; |
| } |
| .sample2_2Expected { |
| left: 20px; |
| top: 30px; |
| width: 50px; |
| height: 40px; |
| } |
| .sample2_3Expected { |
| left: 32px; |
| top: 50px; |
| width: 26px; |
| height: 10px; |
| } |
| .sample2_4Expected { |
| left: 32px; |
| top: 50px; |
| width: 26px; |
| height: 10px; |
| } |
| .sample2_5Expected { |
| left: 40px; |
| top: 50px; |
| width: 50px; |
| height: 10px; |
| } |
| .sample3_1Expected { |
| left: 20px; |
| top: 30px; |
| width: 20px; |
| height: 25px; |
| } |
| .sample3_0Expected { |
| left: -4px; |
| top: -5px; |
| width: 48px; |
| height: 60px; |
| } |
| .sample3_2Expected { |
| left: 0px; |
| top: 0px; |
| width: 100px; |
| height: 80px; |
| } |
| .sample3_3Expected { |
| left: 25px; |
| top: 20px; |
| width: 37.5px; |
| height: 30px; |
| } |
| </style> |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body" width="450" height="500" viewBox="0 0 450 500"> |
| <defs> |
| <filter id="filterRegion_0" > |
| <feFlood style="flood-color:red;" /> |
| </filter> |
| |
| <filter id="filterRegion_1" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:red" /> |
| </filter> |
| |
| <filter id="filterRegion_2" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:red" 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:red" height="20"/> |
| </filter> |
| |
| <filter id="filterRegion_4" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:red" width="25"/> |
| </filter> |
| |
| <filter id="filterRegion_5" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:red" y="10"/> |
| </filter> |
| |
| <filter id="filterRegion_6" filterUnits="userSpaceOnUse" |
| primitiveUnits="userSpaceOnUse" |
| x="20" y="30" width="50" height="40"> |
| <feFlood style="flood-color:red" x="10"/> |
| </filter> |
| |
| <filter id="filterRegion_2_0" primitiveUnits="objectBoundingBox"> |
| <feFlood style="flood-color:red;" /> |
| </filter> |
| |
| <filter id="filterRegion_2_1" filterUnits="userSpaceOnUse" |
| primitiveUnits="objectBoundingBox"> |
| <feFlood style="flood-color:red;" x="0" y="0" width="1" height="1"/> |
| </filter> |
| |
| <filter id="filterRegion_2_2" filterUnits="userSpaceOnUse" |
| primitiveUnits="objectBoundingBox"> |
| <feFlood style="flood-color:red" x="0%" y="0%" width="100%" height="100%"/> |
| </filter> |
| |
| <filter id="filterRegion_2_3" filterUnits="userSpaceOnUse" |
| primitiveUnits="objectBoundingBox"> |
| <feFlood style="flood-color:red" x=".25" y="50%" width=".5" height="25%"/> |
| </filter> |
| |
| <filter id="filterRegion_2_4" filterUnits="userSpaceOnUse" |
| primitiveUnits="objectBoundingBox"> |
| <feFlood style="flood-color:red" 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:red" y=".5" height=".25"/> |
| </filter> |
| |
| <filter id="filterRegion_3_0" filterUnits="objectBoundingBox" > |
| <feFlood style="flood-color:red;" /> |
| </filter> |
| |
| <filter id="filterRegion_3_1" filterUnits="objectBoundingBox" |
| primitiveUnits="userSpaceOnUse"> |
| <feFlood style="flood-color:red" 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:red" /> |
| </filter> |
| |
| <filter id="filterRegion_3_3" filterUnits="objectBoundingBox" |
| primitiveUnits="userSpaceOnUse" |
| x="-50%" y="-50%" width="75%" height="75%"> |
| <feFlood style="flood-color:red" /> |
| </filter> |
| |
| </defs> |
| |
| <div style="left: 30px; top: 50px;"> |
| <div style="left: 240px; top: 95px;"> |
| <div class="sample0Expected"></div> |
| </div> |
| |
| <div> |
| <div class="sample1Expected"></div> |
| </div> |
| |
| <div style="left: 100px; top: 0px;"> |
| <div class="sample2Expected"></div> |
| </div> |
| |
| <div style="left: 200px; top: 0px;"> |
| <div class="sample3Expected"></div> |
| </div> |
| |
| <div style="left: 300px; top: 0px;"> |
| <div class="sample4Expected"></div> |
| </div> |
| |
| <div style="left: 0px; top: 75px;"> |
| <div class="sample5Expected"></div> |
| </div> |
| |
| <div style="left: 100px; top: 75px;"> |
| <div class="sample6Expected"></div> |
| </div> |
| |
| <div style="left: 120px; top: 280px;"> |
| <div class="sample2_0Expected"></div> |
| </div> |
| |
| <div style="left: 0px; top: 160px;"> |
| <div class="sample2_1Expected"></div> |
| </div> |
| |
| <div style="left: 100px; top: 160px;"> |
| <div class="sample2_2Expected"></div> |
| </div> |
| |
| <div style="left: 200px; top: 160px;"> |
| <div class="sample2_3Expected"></div> |
| </div> |
| |
| <div style="left: 300px; top: 160px;"> |
| <div class="sample2_4Expected"></div> |
| </div> |
| |
| <div style="left: 0px; top: 245px;"> |
| <div class="sample2_5Expected"></div> |
| </div> |
| |
| <div style="left: 0px; top: 330px;"> |
| <div class="sample3_1Expected"></div> |
| </div> |
| |
| <div style="left: 320px; top: 330px;"> |
| <div class="sample3_0Expected"></div> |
| </div> |
| |
| <div style="left: 100px; top: 330px;"> |
| <div class="sample3_2Expected"></div> |
| </div> |
| |
| <div style="left: 200px; top: 330px;"> |
| <div class="sample3_3Expected"></div> |
| </div> |
| </div> |
| </body> |
| </html> |