Full version, Basic version

Specification link: 14.4 Masking

linking-uri-02-b ← index → masking-opacity-01-b

# masking-mask-01-b
SVG Image | PNG Image

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

linking-uri-02-b ← index → masking-opacity-01-b

Distributed under both the W3C Test Suite License and the W3C 3-clause BSD License.
To contribute to a W3C Test Suite, see the policies and contribution forms.