masking-mask-01-b.svg

Run the test. No interaction required.

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

Test to see if the masking features using the mask element and mask property are available.

A red rectangle is displayed in the background to help view the result of transparency and masking.

From top to bottom, the tests are as follows.

In the top test, a linear gradient is used inside the mask to change the opacity of the rectangle from 1.0 (at the top) to 0.5 (at the bottom).

In the second test, a simple 50% opaque rectangle is used as a mask.

In the third test, no mask is used, but a rectangle is shown with 50% opacity. The second and third test should look the same.

Lastly, a string of text has a mask applied to it. The mask only covers a partial area of the text, so the text should only be half visible. Also the mask consists of 4 rectangles with various levels of opacity.