LayoutTests/svg/filters/subRegion-one-effect.svg

<svg xmlns="http://www.w3.org/2000/svg" id="body" width="800" height="600">
    <defs>
      <style type="text/css">
       * {stroke:black; stroke-width:0.2;}
      </style>

        <filter id="filter_1effect_01" x="-50%" y="-50%" width="100%" 
                height="100%" primitiveUnits="objectBoundingBox">
            <feOffset x="0%" y="0%" width="100%" height="100%" />
        </filter>

        <filter id="filter_1effect_02" x="-50%" y="-50%" width="100%" 
                height="100%" primitiveUnits="objectBoundingBox">
            <feOffset x="-25%" y="-25%" width="50%" height="75%" />
        </filter>

        <filter id="filter_1effect_03" x="-50%" y="-50%" width="100%" 
                height="100%" primitiveUnits="objectBoundingBox">
            <feOffset x="0%" y="0%" width="50%" height="50%" />
        </filter>

        <filter id="filter_1effect_04" x="-50%" y="-50%" width="100%" 
                height="100%" primitiveUnits="objectBoundingBox">
            <feOffset x="50%" y="50%" width="50%" height="25%" />
        </filter>

        <filter id="filter_1effect_05" x="-50%" y="-50%" width="100%" 
                height="100%" primitiveUnits="objectBoundingBox">
            <feOffset x="25%" y="25%" width="50%" height="50%" />
        </filter>

        <filter id="filter_1effect_06" x="-50%" y="-50%" width="100%" 
                height="100%" primitiveUnits="objectBoundingBox">
            <feOffset x="-25%" y="-25%" width="100%" height="100%" />
        </filter>

        <filter id="filter_1effect_07" x="-50%" y="-50%" width="100%" 
                height="100%" primitiveUnits="objectBoundingBox">
            <feOffset x="12.5%" y="12.5%" width="25%" height="25%" />
        </filter>


        <filter id="filter_1effect_08" primitiveUnits="objectBoundingBox">
            <feOffset x="0%" y="0%" width="100%" height="100%" />
        </filter>

        <filter id="filter_1effect_09" primitiveUnits="objectBoundingBox">
            <feOffset x="-25%" y="-25%" width="50%" height="75%" />
        </filter>

        <filter id="filter_1effect_10" primitiveUnits="objectBoundingBox">
            <feOffset x="0%" y="0%" width="50%" height="50%" />
        </filter>

        <filter id="filter_1effect_11" primitiveUnits="objectBoundingBox">
            <feOffset x="50%" y="50%" width="100%" height="100%" />
        </filter>

        <filter id="filter_1effect_12" primitiveUnits="objectBoundingBox">
            <feOffset x="25%" y="25%" width="50%" height="50%" />
        </filter>

        <filter id="filter_1effect_13" primitiveUnits="objectBoundingBox">
            <feOffset x="-25%" y="-25%" width="100%" height="100%" />
        </filter>

        <filter id="filter_1effect_14" primitiveUnits="objectBoundingBox">
            <feOffset x="-25%" y="-25%" width="150%" height="150%" />
        </filter>
    </defs>

    <g transform="translate(10, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="0" y="0" width="50" height="50" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_01);stroke:none;"/>
    </g>

    <g transform="translate(110, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="0" y="0" width="50" height="50" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="12.5" y="12.5" width="25" height="37.5" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_02);stroke:none;"/>
    </g>

    <g transform="translate(210, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="0" y="0" width="50" height="50" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="25" y="25" width="25" height="25" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_03);stroke:none;"/>
    </g>

    <g transform="translate(310, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="0" y="0" width="50" height="50" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="50" y="37.5" width="25" height="12.5" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_04);stroke:none;"/>
    </g>

    <g transform="translate(410, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="0" y="0" width="50" height="50" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="37.5" y="37.5" width="25" height="25" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_05);stroke:none;"/>
    </g>

    <g transform="translate(510, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="0" y="0" width="50" height="50" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="12.5" y="12.5" width="50" height="50" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_06);stroke:none;"/>
    </g>

    <g transform="translate(610, 10)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="0" y="0" width="50" height="50" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="31.25" y="31.25" width="12.5" height="12.5" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_07);stroke:none;"/>
    </g>

    <g transform="translate(10, 210)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="20" y="20" width="60" height="60" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_08);stroke:none;"/>
    </g>

    <g transform="translate(110, 210)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="20" y="20" width="60" height="60" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="12.5" y="12.5" width="25" height="37.5" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_09);stroke:none;"/>
    </g>

    <g transform="translate(210, 210)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="20" y="20" width="60" height="60" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="25" y="25" width="25" height="25" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_10);stroke:none;"/>
    </g>

    <g transform="translate(310, 210)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="20" y="20" width="60" height="60" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="50" y="50" width="50" height="50" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_11);stroke:none;"/>
    </g>

    <g transform="translate(410, 210)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="20" y="20" width="60" height="60" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="37.5" y="37.5" width="25" height="25" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_12);stroke:none;"/>
    </g>

    <g transform="translate(510, 210)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="20" y="20" width="60" height="60" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="12.5" y="12.5" width="50" height="50" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_13);stroke:none;"/>
    </g>

    <g transform="translate(610, 210)">
        <rect x="25" y="25" width="50" height="50" style="fill:rgb(150,255,150);stroke-dasharray:5;"/>
        <rect x="20" y="20" width="60" height="60" style="fill:rgb(200,200,200);stroke-dasharray:3;fill-opacity:0.4" />
        <rect x="12.5" y="12.5" width="75" height="75" style="fill:rgb(0,0,150);fill-opacity:0.4;stroke-width:0.5;"/>

        <!-- Filter -->
        <rect x="25" y="125" width="50" height="50" style="fill:rgb(0,255,0);filter:url(#filter_1effect_14);stroke:none;"/>
    </g>
</svg>