Specification link: 14.4 Masking

masking-intro-01-f ← index → masking-mask-02-f

Tests that contain the draft-watermark are under development and may be incorrectly testing a feature.

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

## Operator Script

Run the test. No interaction required.

## Pass Criteria

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

## Test Description

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.

masking-intro-01-f ← index → masking-mask-02-f