blob: 898595a860a551a5d5a0900d58d8dce263f143f8 (
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
40
41
42
43
44
|
<svg class="reftest-wait"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
onload="setTimeout(go, 0);">
<script>
function setMatrixForElem(id, matrix) {
var elem = document.getElementById(id);
elem.setAttribute("transform", "matrix("+matrix+")");
}
function go() {
// This moves image1 completely offscreen
setMatrixForElem("image1", "0.5 -1 0 1 0 -30");
// This flattens image2 to take up 0 space
setMatrixForElem("image2", "1 0 0 0 0 0");
// NOTE: The third image should be unaffected by the above
// and should still render.
document.documentElement.removeAttribute('class');
}
</script>
<defs>
<path id="P1" d="M 0 50 h50 v-50 h-50 z"/>
<path id="P2" d="M 50 100 h50 v-50 h-50 z"/>
<path id="P3" d="M 0 100 h50 v-50 h-50 z"/>
<clipPath id="Q1"><use x="25" xlink:href="#P1"/></clipPath>
<clipPath id="Q2"><use x="25" xlink:href="#P2"/></clipPath>
<clipPath id="Q3"><use x="25" xlink:href="#P3"/></clipPath>
</defs>
<image xlink:href="solidblue.png" id="image1"
width="100" height="100"
x="25" clip-path="url(#Q1)"/>
<image xlink:href="solidblue.png" id="image2"
width="100" height="100"
x="25" y="50" clip-path="url(#Q2)"/>
<image xlink:href="solidblue.png"
width="100" height="100"
x="25" clip-path="url(#Q3)"/>
</svg>
|
