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

   1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   2 <defs>
   3     <mask id="mask1" mask="url(#mask1)">
   4         <rect width="50" height="50" fill="white"/>
   5     </mask>
   6
   7     <mask id="mask2">
   8         <rect x="100" width="50" height="50" fill="white" mask="url(#mask2)"/>
   9     </mask>
  10
  11     <mask id="mask3">
  12         <rect x="0" y="100" width="50" height="50" fill="white" mask="url(#mask1)"/>
  13         <rect x="100" y="100" width="50" height="50" fill="white" mask="url(#mask2)"/>
  14     </mask>
  15
  16     <rect id="rect" x="0" y="100" width="50" height="50" fill="white" mask="url(#mask4)"/>
  17     <mask id="mask4">
  18         <use xlink:href="#rect"/>
  19     </mask>
  20 </defs>
  21
  22 <!-- This should result in a 50x50 rect -->
  23 <rect x="0" y="0" width="100" height="100" fill="blue" mask="url(#mask1)"/>
  24
  25 <!-- This should result in a 50x50 rect -->
  26 <rect x="100" y="0" width="100" height="100" fill="blue" mask="url(#mask2)"/>
  27
  28 <!-- This should not render -->
  29 <rect x="100" y="100" width="100" height="100" fill="blue" mask="url(#mask3)"/>
  30
  31 <!-- This should result in a 50x50 rect -->
  32 <rect x="0" y="100" width="100" height="100" fill="blue" mask="url(#mask4)"/>
  33
  34 <line x1="175" x2="175" y1="0" y2="150" stroke="red"/>
  35 <text text-anchor="middle" x="175" y="200">Both sides of the red line should look identical</text>
  36
  37 <!-- This is the reference rendering -->
  38 <g transform="translate(200,0)">
  39     <rect x="0" y="0" width="50" height="50" fill="blue"/>
  40     <rect x="100" y="0" width="50" height="50" fill="blue"/>
  41     <rect x="0" y="100" width="50" height="50" fill="blue"/>
  42 </g>
  43 </svg>