<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
    <clipPath id='clipPath_0'>
        <rect x='50' y='0' width='50' height='50' fill='none' clip-path='url(#clipPath_0)'/>
    </clipPath>

    <rect x='50' y='150' width='50' height='50' id="rect" fill='none' clip-path='url(#clipPath_1)'/>
    <clipPath id='clipPath_1'>
        <use xlink:href="#rect"/>
    </clipPath>
</defs>

<!--
Spec: clip-path: If the IRI reference is not valid (e.g it points to an object that doesn't exist or the object
                 is not a ‘clipPath’ element) the ‘clip-path’ property must be treated as if it hadn't been specified.
-->

<rect x='50' y='0' width='100' height='100' fill='blue'/>
<rect x='50' y='0' width='100' height='100' fill='green' clip-path='url(#clipPath_0)'/>

<rect x='50' y='150' width='100' height='100' fill='blue'/>
<rect x='50' y='150' width='100' height='100' fill='green' clip-path='url(#clipPath_1)'/>

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

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