|
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).