Test the maskUnits attribute on mask element.

There are three tests. In all cases, a string of lime colored text is put in the background to make the masking effects more apparent. From top to bottom, the tests are as follows.

In the top test, default attributes are used on the mask element. This means that maskUnits=userSpaceOnUse. Also x=0%, y=0%, width=100%, height=100% by default. The content of the mask will be relative to the viewport because of the default values. The mask represents 4 rectangles with varying opacities. Only 2 of the rectangles will contribute to the mask.

In the second test, maskUnits is set to objectBoundingBox. The mask is defined as a 2x2 matrix of rectangles with varying opacities. The result will be a red rectangle which has 4 quadrants with varying opacities.

Lastly, userSpaceOnUse is explicitly set as the maskUnits. In this case, the red rectangle has defined its own translated and rotated user space. The mask will appear in the user space. The content of the mask are once again a 2x2 matrix of rectangles with varying opacities.

The rendered picture should match the reference image exactly, except for possible variations in the labelling text (per CSS2 rules).