third_party/WebKit/LayoutTests/svg/custom/recursive-mask.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <mask id="mask1" mask="url(#mask1)">
        <rect width="50" height="50" fill="white"/>
    </mask>

    <mask id="mask2">
        <rect x="100" width="50" height="50" fill="white" mask="url(#mask2)"/>
    </mask>

    <mask id="mask3">
        <rect x="0" y="100" width="50" height="50" fill="white" mask="url(#mask1)"/>
        <rect x="100" y="100" width="50" height="50" fill="white" mask="url(#mask2)"/>
    </mask>

    <rect id="rect" x="0" y="100" width="50" height="50" fill="white" mask="url(#mask4)"/>
    <mask id="mask4">
        <use xlink:href="#rect"/>
    </mask>
</defs>

<!-- This should result in a 50x50 rect -->
<rect x="0" y="0" width="100" height="100" fill="blue" mask="url(#mask1)"/>

<!-- This should result in a 50x50 rect -->
<rect x="100" y="0" width="100" height="100" fill="blue" mask="url(#mask2)"/>

<!-- This should not render -->
<rect x="100" y="100" width="100" height="100" fill="blue" mask="url(#mask3)"/>

<!-- This should result in a 50x50 rect -->
<rect x="0" y="100" width="100" height="100" fill="blue" mask="url(#mask4)"/>

<line x1="175" x2="175" y1="0" y2="150" stroke="red"/>
<text text-anchor="middle" x="175" y="200">Both sides of the red line should look identical</text>

<!-- This is the reference rendering -->
<g transform="translate(200,0)">
    <rect x="0" y="0" width="50" height="50" fill="blue"/>
    <rect x="100" y="0" width="50" height="50" fill="blue"/>
    <rect x="0" y="100" width="50" height="50" fill="blue"/>
</g>
</svg>