chromium/src/third_party/blink/web_tests/svg/filters/feImage-scaled-viewport.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="600" height="600" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Test for http://crbug.com/235800 -->
  <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" x="0%" y="0%" width="100%" height="100%">
      <!-- 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" x="0%" y="0%" width="100%" height="100%">
      <!-- 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">
      <!-- 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">
      <!-- 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="100" y="100" width="200" height="200" fill="none" stroke="red"/>
    <rect width="400" height="400" fill="red" filter="url(#filter1a-rel)"/>

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

  <g transform="translate(0, 300)">
    <rect x="80" y="80" width="240" height="240" fill="none" stroke="red"/>
    <rect width="400" height="400" fill="red" filter="url(#filter2a-rel)"/>

    <g transform="translate(300, 0)">
        <rect x="80" y="80" width="240" height="240" fill="none" stroke="red"/>
        <rect width="400" height="400" fill="red" filter="url(#filter2b-rel)"/>
    </g>
  </g>
</svg>