third_party/WebKit/LayoutTests/svg/custom/mask-with-all-units.svg

   1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250">
   2 <!-- You should see 4 rects with the same size, filled with green and a fill opacity of 0.5 -->
   3 <defs>
   4 <mask id="mask1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" x="10" y="10" width="100" height="100">
   5   <rect x="60" y="60" width="20%" height="50" fill-opacity="0.5" fill="white"/>
   6 </mask>
   7 <mask id="mask2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
   8   <rect x="0.5" y="0.2%" width="50%" height="0.5" fill-opacity="0.5" fill="white"/>
   9 </mask>
  10 <mask id="mask3" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" y="50%">
  11   <rect x="24%" y="170" width="20%" height="50" fill-opacity="0.5" fill="white"/>
  12 </mask>
  13 <mask id="mask4" maskUnits="userSpaceOnUse" maskContentUnits="objectBoundingBox" x="120" y="120" width="100" height="100">
  14   <rect x="0.5" y="0.2%" width="0.5" height="0.2%" fill-opacity="0.5" fill="white"/>
  15 </mask>
  16 </defs>
  17 <rect x="10" y="10" width="100" height="100" fill="green" mask="url(#mask1)"/>
  18 <rect x="120" y="10" width="100" height="100" fill="green" mask="url(#mask2)"/>
  19 <rect x="10" y="120" width="100" height="100" fill="green" mask="url(#mask3)"/>
  20 <rect x="120" y="120" width="100" height="100" fill="green" mask="url(#mask4)"/>
  21 </svg>
  22