masking-mask-01-b

raster image of masking-mask-01-b

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.

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