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

   1 <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
   2 <defs>
   3     <clipPath id='clipPath_0'>
   4         <rect x='50' y='0' width='50' height='50' fill='none' clip-path='url(#clipPath_0)'/>
   5     </clipPath>
   6
   7     <rect x='50' y='150' width='50' height='50' id="rect" fill='none' clip-path='url(#clipPath_1)'/>
   8     <clipPath id='clipPath_1'>
   9         <use xlink:href="#rect"/>
  10     </clipPath>
  11 </defs>
  12
  13 <!--
  14 Spec: clip-path: If the IRI reference is not valid (e.g it points to an object that doesn't exist or the object
  15                  is not a ‘clipPath’ element) the ‘clip-path’ property must be treated as if it hadn't been specified.
  16 -->
  17
  18 <rect x='50' y='0' width='100' height='100' fill='blue'/>
  19 <rect x='50' y='0' width='100' height='100' fill='green' clip-path='url(#clipPath_0)'/>
  20
  21 <rect x='50' y='150' width='100' height='100' fill='blue'/>
  22 <rect x='50' y='150' width='100' height='100' fill='green' clip-path='url(#clipPath_1)'/>
  23
  24 <line x1="175" x2="175" y1="0" y2="250" stroke="red"/>
  25 <text text-anchor="middle" x="175" y="300">Both sides of the red line should look identical</text>
  26
  27 <!-- This is the reference rendering -->
  28 <g transform="translate(150,0)">
  29     <rect x="50" y="0" width="100" height="100" fill="blue"/>
  30     <rect x="50" y="0" width="50" height="50" fill="green"/>
  31     <rect x="50" y="150" width="100" height="100" fill="blue"/>
  32     <rect x="50" y="150" width="50" height="50" fill="green"/>
  33 </g>
  34 </svg>