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