2010-03-24 09:54:48 -07:00
|
|
|
<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(1, 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" 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);"/>
|
|
|
|
|
|
2010-05-28 05:15:56 -07:00
|
|
|
<!-- Test 2: Purple background covered by clipped lime block.
|
2010-03-24 09:54:48 -07:00
|
|
|
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>
|
