anim-feImage-preserveAspectRatio-01.svg

Enable keyboard shortcuts

Checkerboard

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

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

     class="reftest-wait">

  <title>Test animation of the "preserveAspectRatio" attribute on the "feImage" element</title>

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

  <script type="text/javascript">

    function doTest() {

      setTimeAndSnapshot(1, true);

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

  </script>

  <rect width="100%" height="100%" fill="lime"/>

  <filter id="filter" filterUnits="userSpaceOnUse"

          x="0" y="0" width="100" height="20">

    <!-- data: URI is a 1x1 lime GIF -->

    <feImage preserveAspectRatio="xMidYMid meet"

             style="image-rendering: optimizeSpeed;"

             xlink:href="data:image/gif,GIF87a%01%00%01%00%80%01%00%00%FF%00%FF%FF%FF%2C%00%00%00%00%01%00%01%00%00%02%02D%01%00%3B">

      <animate attributeName="preserveAspectRatio"

               begin="0s" dur="2s"

               to="xMidYMid slice"

               fill="freeze"/>

    </feImage>

  </filter>

  <rect width="100" height="20" fill="red"/>

  <rect width="100" height="20" filter="url(#filter)"/>

</svg>