LayoutTests/imported/mozilla/svg/smil/transform/translate-clipPath-1.svg

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     onload="setTimeAndSnapshot(101, false)">
  <script xlink:href="../smil-util.js" type="text/javascript"/>
  <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>