LayoutTests/svg/filters/feMorphology-radius-cases.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="500">
  <defs>
    <filter id="Erode-1">
      <feMorphology operator="erode" in="SourceGraphic" radius="-1" />
    </filter>
    <filter id="Erode0">
      <feMorphology operator="erode" in="SourceGraphic" radius="0" />
    </filter>
    <filter id="Erode10">
      <feMorphology operator="erode" in="SourceGraphic" radius="10" />
    </filter>
    <filter id="Dilate-1">
      <feMorphology operator="dilate" in="SourceGraphic" radius="-1" />
    </filter>
    <filter id="Dilate0">
      <feMorphology operator="dilate" in="SourceGraphic" radius="0" />
    </filter>
    <filter id="Dilate10">
      <feMorphology operator="dilate" in="SourceGraphic" radius="10" />
    </filter>
  </defs>
  <g stroke="black" stroke-width="10">
    <rect x= "10" y="10" width="100" height="100" fill="lime"/>
    <rect x="10" y="130" width="100" height="100" fill="lime"/>

    <!-- negative radius case -->
    <g>
      <rect x="140" y="10" width="100" height="100" fill="lime"/>
      <rect x="140" y="10" width="100" height="100" fill="red" filter="url(#Erode-1)"/>
    </g>

    <g>
      <rect x="140" y="130" width="100" height="100" fill="lime"/>
      <rect x="140" y="130" width="100" height="100" fill="red" filter="url(#Dilate-1)"/>
    </g>
    
    <!-- zero radius case -->
    <rect x= "270" y="10" width="100" height="100" fill="lime" filter="url(#Erode0)"/>
    <rect x="270" y="130" width="100" height="100" fill="lime" filter="url(#Dilate0)"/>
  </g>

  <!-- positive radius case but scaled down to less than 1 (treated as zero radius case) -->
  <svg x="400" y="10" width="100" height="100" viewBox="0 0 10000 10000">
    <g stroke="black" stroke-width="1000">
      <rect width="100%" height="100%" fill="lime" filter="url(#Erode10)"/>
    </g>
  </svg>
  <svg x="400" y="130" width="100" height="100" viewBox="0 0 10000 10000">
    <g stroke="black" stroke-width="1000">
      <rect width="100%" height="100%" fill="lime" filter="url(#Dilate10)"/>
    </g>
  </svg>

  <!-- positive radius case but inside a nested svg -->
  <svg x="530" y="10" width="100" height="100">
    <g stroke="black" stroke-width="10">
      <rect width="100%" height="100%" fill="lime" filter="url(#Erode10)"/>
    </g>
  </svg>
  <svg x="530" y="130" width="100" height="100" viewBox="0 0 100 100">
    <g stroke="black" stroke-width="10">
      <rect width="100%" height="100%" fill="lime" filter="url(#Dilate10)"/>
    </g>
  </svg>

  <!-- positive radius case -->
  <g stroke="black" stroke-width="10">
    <rect x="660" y="10" width="100" height="100" fill="lime" filter="url(#Erode10)"/>
    <rect x="660" y="130" width="100" height="100" fill="lime" filter="url(#Dilate10)"/>
  </g>
</svg>