chromium/src/third_party/blink/web_tests/svg/custom/mask-with-all-units.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250">
<!-- You should see 4 rects with the same size, filled with green and a fill opacity of 0.5 -->
<defs>
<mask id="mask1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" x="10" y="10" width="100" height="100">
  <rect x="60" y="60" width="20%" height="50" fill-opacity="0.5" fill="white"/>
</mask>
<mask id="mask2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
  <rect x="0.5" y="0.2%" width="50%" height="0.5" fill-opacity="0.5" fill="white"/>
</mask>
<mask id="mask3" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" y="50%">
  <rect x="24%" y="170" width="20%" height="50" fill-opacity="0.5" fill="white"/>
</mask>
<mask id="mask4" maskUnits="userSpaceOnUse" maskContentUnits="objectBoundingBox" x="120" y="120" width="100" height="100">
  <rect x="0.5" y="0.2%" width="0.5" height="0.2%" fill-opacity="0.5" fill="white"/>
</mask>
</defs>
<rect x="10" y="10" width="100" height="100" fill="green" mask="url(#mask1)"/>
<rect x="120" y="10" width="100" height="100" fill="green" mask="url(#mask2)"/>
<rect x="10" y="120" width="100" height="100" fill="green" mask="url(#mask3)"/>
<rect x="120" y="120" width="100" height="100" fill="green" mask="url(#mask4)"/>
</svg>