LayoutTests/svg/filters/filter-refresh.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  style="width:300px;height:400px" onload="runRepaintTest()">

<script xlink:href="../../fast/repaint/resources/repaint.js"></script>
<!-- This tests filters failing to refresh after the initial rendering
(https://bugs.webkit.org/show_bug.cgi?id=53088).
There should be no red squares in the output. -->

<defs>
<filter id="simple" x="0" y="0">
  <feOffset in="SourceGraphic" dx="0" dy="0" />
</filter>

<filter id="animated" x="0" y="0">
  <animate attributeName="x" from="0" to="0" dur="0.05s"/>
  <feOffset in="SourceGraphic" dx="0" dy="0" />
</filter>

<filter id="toGreen" x="0" y="0">
  <feComponentTransfer>
    <feFuncG type="linear" intercept="0.25" slope="0"/>
    <feFuncR type="linear" intercept="0" slope="0"/>
    <feFuncB type="linear" intercept="0" slope="0"/>
  </feComponentTransfer>
</filter>

<rect id="rect" width="30" y="10" height="30" fill="red" />

</defs>

<g>

<g filter="url(#simple)">
  <use xlink:href="#rect" x="10" y="40" />
</g>

<g filter="url(#simple)">
  <g filter="url(#simple)">
    <use xlink:href="#rect" x="50" y="40" />
  </g>
</g>

<g filter="url(#simple)">
  <g filter="url(#animated)">
    <use xlink:href="#rect" x="90" y="40" />
  </g>
</g>

<g filter="url(#animated)">
  <use xlink:href="#rect" x="10" y="80" />
</g>

<g filter="url(#animated)">
  <g filter="url(#simple)">
    <use xlink:href="#rect" x="50" y="80" />
  </g>
</g>

<g filter="url(#animated)">
  <g filter="url(#animated)">
    <use xlink:href="#rect" x="90" y="80" />
  </g>
</g>

<g filter="url(#simple)" transform="translate(0 120)">
  <use xlink:href="#rect" x="10" />

  <g filter="url(#simple)" >
    <use xlink:href="#rect" x="50" />
  </g>

  <g filter="url(#animated)" >
    <use xlink:href="#rect" x="90" />
  </g>
</g>

<g filter="url(#animated)" transform="translate(0 160)">
  <use xlink:href="#rect" x="10" />

  <g filter="url(#simple)" >
    <use xlink:href="#rect" x="50" />
  </g>

  <g filter="url(#animated)" >
    <use xlink:href="#rect" x="90" />
  </g>
</g>

<!-- Trying without use tags now. -->

<g filter="url(#simple)">
  <rect id="separate1" x="140" y="60" width="30" height="30" fill="red"/>
</g>

<rect id="filtered" x="140" y="100" filter="none" width="30" height="30" fill="red"/>

<rect filter="url(#simple)" id="separate2" x="140" y="140" width="30" height="30" fill="red" />

</g>

<script><![CDATA[
    var elements = ['rect', 'separate1', 'separate2'];
    for (var i=0; i<elements.length; ++i) {
      elements[i] = document.getElementById(elements[i]);
    }

    function repaintTest() {
      for (var i=0; i<elements.length; ++i) {
        elements[i].setAttribute('fill', 'green');
      }

      document.getElementById('filtered').setAttribute('filter', 'url(#toGreen)');
    }
]]></script>

</svg>