chromium/src/third_party/blink/web_tests/svg/custom/recursive-gradient.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <radialGradient id="gradient0" gradientUnits="objectBoundingBox" cx=".5" cy=".5" fx=".5" fy=".5" r=".5">
        <stop stop-color="blue" offset="0"/>
        <stop stop-color="red" offset="1"/>
    </radialGradient>

    <radialGradient xlink:href="#gradient1" id="gradient1" gradientUnits="objectBoundingBox" cx=".5" cy=".5" fx=".5" fy=".5" r=".5">
        <stop stop-color="blue" offset="0"/>
        <stop stop-color="red" offset="1"/>
    </radialGradient>

    <radialGradient id="gradient2" xlink:href="#gradient4"/>
    <radialGradient id="gradient4" xlink:href="#gradient2"/>
    <radialGradient id="gradient3" xlink:href="#gradient2"/>
</defs>

<!-- This should render with a gradient -->
<rect x="0" y="0" width="100" height="100" fill="url(#gradient1)" stroke="green"/>

<!-- This should not render anything -->
<rect x="100" y="0" width="100" height="100" fill="url(#gradient2)" stroke="green"/>

<!-- This should not render anything -->
<rect x="0" y="100" width="100" height="100" fill="url(#gradient3)" stroke="green"/>

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

<!-- This is the reference rendering -->
<g transform="translate(250,0)">
    <rect x="0" y="0" width="100" height="100" fill="url(#gradient0)" stroke="green"/>
    <rect x="100" y="0" width="100" height="100" fill="none" stroke="green"/>
    <rect x="0" y="100" width="100" height="100" fill="none" stroke="green"/>
</g>
</svg>