import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg

@@ -0,0 +1,53 @@
+<!--
+     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"
+     onload="setTimeAndSnapshot(2, true)">
+  <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>
+</svg>