LayoutTests/svg/filters/feImage-filterUnits-objectBoundingBox-primitiveUnits-userSpaceOnUse.svg

<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<title>Each green rect needs to be fully enclosed in the red frame rect</title>
<circle id="circle-rel" cx="50%" cy="50%" r="25%" fill="green"/>
<circle id="circle-abs" cx="100" cy="100" r="50" fill="green"/>

<!-- Filter region at 0%, 0%, 100% x 100% of target bounding box: x=0, y=0, w=200, h=200 -->
<filter id="filter1a-rel" x="0" y="0" width="1" height="1">
    <!-- Default effect subregion == default filter region -->
    <feImage xlink:href="#circle-rel" />
</filter>

<!-- Filter region at 0%, 0%, 100% x 100% of target bounding box: x=0, y=0, w=200, h=200 -->
<filter id="filter1b-rel" x="0" y="0" width="1" height="1">
    <!-- Default effect subregion != default filter region, as the length values below are resolved against the 800x800 viewport! -->
    <!-- So simply using x="0%" y="0%" width="100%" height="100%" is wrong, if you want to get the same effect as filter1a-rel.
         We need following result values: x=0, y=0. width=200, height=200 (that is 25% in percentages!) -->
    <feImage x="0%" y="0%" width="25%" height="25%" xlink:href="#circle-rel" />
</filter>

<!-- Default filter region at -10%, -10% x 120% x 120% of target bounding box: x=-20, y=-20, w=240, h=240 -->
<filter id="filter2a-rel">
    <!-- Default effect subregion == default filter region -->
    <feImage xlink:href="#circle-rel" />
</filter>

<!-- Default filter region at -10%, -10% x 120% x 120% of target bounding box: x=-20, y=-20, w=240, h=240 -->
<filter id="filter2b-rel">
    <!-- Default effect subregion != default filter region, as the length values below are resolved against the 800x800 viewport! -->
    <!-- So simply using x="0%" y="0%" width="100%" height="100%" is wrong, if you want to get the same effect as filter2a-rel.
         We need following result values: x=-20, y=-20. width=240, height=240 (that is w/h=30%, x/y=-2.5%) -->
    <feImage x="-2.5%" y="-2.5%" width="30%" height="30%" xlink:href="#circle-rel" />
</filter>


<!-- Filter region at 0%, 0%, 100% x 100% of target bounding box: x=0, y=0, w=200, h=200 -->
<filter id="filter1a-abs" x="0" y="0" width="1" height="1">
    <!-- Default effect subregion == default filter region -->
    <feImage xlink:href="#circle-abs" />
</filter>

<!-- Filter region at 0%, 0%, 100% x 100% of target bounding box: x=0, y=0, w=200, h=200 -->
<filter id="filter1b-abs" x="0" y="0" width="1" height="1">
    <!-- Default effect subregion != default filter region, as the length values below are resolved against the 800x800 viewport! -->
    <!-- So simply using x="0%" y="0%" width="100%" height="100%" is wrong, if you want to get the same effect as filter1a-abs.
         We need following result values: x=0, y=0. width=200, height=200 (that is 25% in percentages!) -->
    <feImage x="0%" y="0%" width="25%" height="25%" xlink:href="#circle-abs" />
</filter>

<!-- Default filter region at -10%, -10% x 120% x 120% of target bounding box: x=-20, y=-20, w=240, h=240 -->
<filter id="filter2a-abs">
    <!-- Default effect subregion == default filter region -->
    <feImage xlink:href="#circle-abs" />
</filter>

<!-- Default filter region at -10%, -10% x 120% x 120% of target bounding box: x=-20, y=-20, w=240, h=240 -->
<filter id="filter2b-abs">
    <!-- Default effect subregion != default filter region, as the length values below are resolved against the 800x800 viewport! -->
    <!-- So simply using x="0%" y="0%" width="100%" height="100%" is wrong, if you want to get the same effect as filter2a-abs.
         We need following result values: x=-20, y=-20. width=240, height=240 (that is w/h=30%, x/y=-2.5%) -->
    <feImage x="-2.5%" y="-2.5%" width="30%" height="30%" xlink:href="#circle-abs" />
</filter>
</defs>

<g>
    <rect x="50" y="50" width="100" height="100" fill="none" stroke="red"/>
    <rect width="200" height="200" fill="red" filter="url(#filter1a-rel)"/>

    <g transform="translate(150, 0)">
        <rect x="50" y="50" width="100" height="100" fill="none" stroke="red"/>
        <rect width="200" height="200" fill="red" filter="url(#filter1a-abs)"/>
    </g>

    <g transform="translate(300, 0)">
        <rect x="50" y="50" width="100" height="100" fill="none" stroke="red"/>
        <rect width="200" height="200" fill="red" filter="url(#filter1b-rel)"/>
    </g>

    <g transform="translate(450, 0)">
        <rect x="50" y="50" width="100" height="100" fill="none" stroke="red"/>
        <rect width="200" height="200" fill="red" filter="url(#filter1b-abs)"/>
    </g>
</g>

<g transform="translate(0, 150)">
    <rect x="40" y="40" width="120" height="120" fill="none" stroke="red"/>
    <rect width="200" height="200" fill="red" filter="url(#filter2a-rel)"/>

    <g transform="translate(150, 0)">
        <rect x="40" y="40" width="120" height="120" fill="none" stroke="red"/>
        <rect width="200" height="200" fill="red" filter="url(#filter2b-rel)"/>
    </g>
</g>

<g transform="translate(0, 300)">
    <rect x="30" y="30" width="100" height="100" fill="none" stroke="red"/>
    <rect width="200" height="200" fill="red" filter="url(#filter2a-abs)"/>

    <g transform="translate(150, 0)">
        <rect x="30" y="30" width="100" height="100" fill="none" stroke="red"/>
        <rect width="200" height="200" fill="red" filter="url(#filter2b-abs)"/>
    </g>
</g>
</svg>