blob: 80291076cd6b6c4158f17f439394f94cdd570c89 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<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>
|
