translate-clipPath-1.svg

Enable keyboard shortcuts

Checkerboard

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

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

     class="reftest-wait">

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

  <script>

    function doTest() {

      setTimeAndSnapshot(101, false);

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

  </script>

  <defs>

    <clipPath id="clip">

      <rect x="0" y="0" width="50" height="100%"/>

      <animateTransform attributeName="transform" type="translate" begin="100s" dur="1s"

		        from="0 0" to="-50 0" fill="freeze"/>

    </clipPath>

  </defs>

  <!-- Test 1: Lime background covered by clipped red block.

       After the animation, the clipping path doesn't intersecting the red

       block at all, so no red is shown. -->

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

  <rect x="0" width="50" height="100%" fill="red"

        style="clip-path: url(#clip);"/>

  <!-- Test 2: Purple background covered by clipped lime block.

       Initially, the clipping path is to the right of the lime, so the purple

       background shows through.  But after the animation, the clipping path

       exactly matches the dimensions of the lime block, which lets it

       completly cover all the purple. -->

  <g transform="translate(100, 0)">

    <rect x="-50" y="0" width="50" height="100%" fill="purple"/>

    <rect x="-50" y="0" width="50" height="100%" fill="lime"

        style="clip-path: url(#clip);"/>

  </g>

  <!-- Not a test: Paint the rest of the viewport, to match lime.svg -->

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

</svg>