614272-1.svg - mozsearch

Enable keyboard shortcuts

Checkerboard

<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>