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

   1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   2 <defs>
   3     <radialGradient id="gradient0" gradientUnits="objectBoundingBox" cx=".5" cy=".5" fx=".5" fy=".5" r=".5">
   4         <stop stop-color="blue" offset="0"/>
   5         <stop stop-color="red" offset="1"/>
   6     </radialGradient>
   7
   8     <radialGradient xlink:href="#gradient1" id="gradient1" gradientUnits="objectBoundingBox" cx=".5" cy=".5" fx=".5" fy=".5" r=".5">
   9         <stop stop-color="blue" offset="0"/>
  10         <stop stop-color="red" offset="1"/>
  11     </radialGradient>
  12
  13     <radialGradient id="gradient2" xlink:href="#gradient4"/>
  14     <radialGradient id="gradient4" xlink:href="#gradient2"/>
  15     <radialGradient id="gradient3" xlink:href="#gradient2"/>
  16 </defs>
  17
  18 <!-- This should render with a gradient -->
  19 <rect x="0" y="0" width="100" height="100" fill="url(#gradient1)" stroke="green"/>
  20
  21 <!-- This should not render anything -->
  22 <rect x="100" y="0" width="100" height="100" fill="url(#gradient2)" stroke="green"/>
  23
  24 <!-- This should not render anything -->
  25 <rect x="0" y="100" width="100" height="100" fill="url(#gradient3)" stroke="green"/>
  26
  27 <line x1="225" x2="225" y1="0" y2="200" stroke="red"/>
  28 <text text-anchor="middle" x="225" y="250">Both sides of the red line should look identical</text>
  29
  30 <!-- This is the reference rendering -->
  31 <g transform="translate(250,0)">
  32     <rect x="0" y="0" width="100" height="100" fill="url(#gradient0)" stroke="green"/>
  33     <rect x="100" y="0" width="100" height="100" fill="none" stroke="green"/>
  34     <rect x="0" y="100" width="100" height="100" fill="none" stroke="green"/>
  35 </g>
  36 </svg>