chromium/third_party/blink/web_tests/svg/filters/filter-placement-issue.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<!-- This tests some filter placement oddities caused by rounding
(https://bugs.webkit.org/show_bug.cgi?id=73643).
When opened, the test should not show any thin red lines that
change with zooming. -->

<defs>
<filter id="shadow1" x="0" y="0">
<feOffset in="SourceGraphic" dx="0" dy="0" result="ofs" />
<feComposite operator="over" in="SourceGraphic" in2="ofs" />
</filter>

<filter id="shadow2" x="0" y="0" width="0.96" height="0.94">
<feOffset in="SourceGraphic" dx="0" dy="0" result="ofs" />
<feComposite operator="over" in="SourceGraphic" in2="ofs" />
</filter>

<filter id="shadow3" width="0.94" height="0.94" x="0.04" y="0.04">
<feOffset in="SourceGraphic" dx="0" dy="0" result="ofs" />
<feComposite operator="over" in="SourceGraphic" in2="ofs" />
</filter>

<filter id="shadow4" x="0.04" y="0.04">
<feOffset in="SourceGraphic" dx="0" dy="0" result="ofs" />
<feComposite operator="over" in="SourceGraphic" in2="ofs" />
</filter>

<filter id="diff">
  <feOffset in="SourceGraphic" dx="0" dy="-100" result="ofs"/>
  <feOffset in="SourceGraphic" dx="0" dy="300" result="ofs3"/>
  <feComposite operator="arithmetic" in="ofs" in2="SourceGraphic" k2="-1" k3="1" result="mix"/>
  <feComposite operator="arithmetic" in="ofs3" in2="mix" k2="-1" k3="1" />
</filter>


<g id="rects" fill="red">
  <rect x="15.1" y="20.1" width="8" height="30" />
  <rect x="30.2" y="20.2" width="8" height="30" />
  <rect x="45.3" y="20.3" width="8" height="30" />
  <rect x="60.4" y="20.4" width="8" height="30" />
  <rect x="75.5" y="20.5" width="8" height="30" />
  <rect x="90.6" y="20.6" width="8" height="30" />
  <rect x="105.7" y="20.7" width="8" height="30" />
  <rect x="120.8" y="20.8" width="8" height="30" />
  <rect x="135.9" y="20.9" width="8" height="30" />
  <rect x="151" y="21" width="8" height="30" />

  <rect x="15.1" y="55.1" width="8" height="30" />
  <rect x="30.2" y="55.2" width="8" height="30" />
  <rect x="45.3" y="55.3" width="8" height="30" />
  <rect x="60.4" y="55.4" width="8" height="30" />
  <rect x="75.5" y="55.5" width="8" height="30" />
  <rect x="90.6" y="55.6" width="8" height="30" />
  <rect x="105.7" y="55.7" width="8" height="30" />
  <rect x="120.8" y="55.8" width="8" height="30" />
  <rect x="135.9" y="55.9" width="8" height="30" />
  <rect x="151" y="56" width="8" height="30" />

  <rect x="3" y="3" width="165" height="90" stroke="green" stroke-width="4" fill="none" />
</g>

</defs>

<g>

<g filter="url(#diff)">
<g filter="url(#shadow1)" transform="translate(100 0)">
<use xlink:href="#rects" />
</g>

<g filter="url(#shadow2)" transform="translate(100 100)">
<use xlink:href="#rects" />
</g>

<g filter="url(#shadow3)" transform="translate(100 200)">
<use xlink:href="#rects" />
</g>

<g filter="url(#shadow4)" transform="translate(100 300)">
<use xlink:href="#rects" />
</g>
</g>

</g>

</svg>