diff options
Diffstat (limited to 'layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg')
-rw-r--r-- | layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg new file mode 100644 index 000000000..d24eb3b8d --- /dev/null +++ b/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> |