anim-feConvolveMatrix-order-01.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

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

     xmlns:xlink="http://www.w3.org/1999/xlink"

     class="reftest-wait">

  <title>Testcase for animation of the "order" attribute of the "feConvolveMatrix" element</title>

  <script xlink:href="smil-util.js" type="text/javascript"/>

  <defs>

    <filter id="f">

      <feConvolveMatrix order="1" kernelMatrix="1" edgeMode="none">

        <!-- Animate the kernel matrix dimensions from 1x1 to 5x5. -->

        <animate attributeName="order"

                 calcMode="linear"

                 begin="0s" dur="4s"

                 from="1" to="5 5"

                 fill="freeze"/>

        <!--

          Animate the kernel matrix values.

          Each successive matrix blurs the image more.

          We will pause on the 3x3 matrix.

-->

        <animate attributeName="kernelMatrix"

                 calcMode="linear"

                 begin="0s" dur="1s"

                 from="1" to="1 1 1 1"

                 fill="freeze"/>

        <animate attributeName="kernelMatrix"

                 calcMode="linear"

                 begin="1s" dur="1s"

                 from="1 1 1 1" to="1 1 1 1 1 1 1 1 1"

                 fill="freeze"/>

        <animate attributeName="kernelMatrix"

                 calcMode="linear"

                 begin="2s" dur="1s"

                 from="1 1 1 1 1 1 1 1 1" to="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"

                 fill="freeze"/>

        <animate attributeName="kernelMatrix"

                 calcMode="linear"

                 begin="3s" dur="1s"

                 from="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" to="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"

                 fill="freeze"/>

      </feConvolveMatrix>

    </filter>

  </defs>

  <g filter="url(#f)">

    <!-- The edge between the orange rect and the blue rect will become blurry. -->

    <rect x="10" y="10" width="50" height="100" fill="orange"/>

    <rect x="60" y="10" width="50" height="100" fill="blue"/>

  </g>

  <script type="text/javascript">

    function doTest() {

      setTimeAndSnapshot(2, true);

    window.addEventListener("MozReftestInvalidate", doTest, false);

  </script>

</svg>