chromium/third_party/blink/web_tests/svg/filters/feImage-filterUnits-userSpaceOnUse-primitiveUnits-objectBoundingBox.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"/>

<!-- Filter region at 0%, 0%, 100% x 100% of target bounding box: x=0, y=0, w=200, h=200 -->
<filter id="filter1a-rel" primitiveUnits="objectBoundingBox" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
    <!-- 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" primitiveUnits="objectBoundingBox" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
    <!-- Default effect subregion != default filter region, as the length values below are resolved against objectBoundingBox as well -->
    <feImage x="0%" y="0%" width="100%" height="100%" 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" primitiveUnits="objectBoundingBox" filterUnits="userSpaceOnUse" x="-20" y="-20" width="240" height="240">
    <!-- 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" primitiveUnits="objectBoundingBox" filterUnits="userSpaceOnUse" x="-20" y="-20" width="240" height="240">
    <!-- 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=120%, x/y=-10%) -->
    <feImage x="-10%" y="-10%" width="120%" height="120%" xlink:href="#circle-rel" />
</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(#filter1b-rel)"/>
    </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>
</svg>