masking-opacity-01-b.svg

Run the test. No interaction required.

In the top test, the green rectangle should appear on top of the blue rectangle.

In the second test, the blue rectangle should not show through in the region where the green and blue overlap.

In the third test, the blue rectangle should show through in the overlap region.

Lastly, the result should be similar to the previous test only fainter (because the opacity) is resulting in less contribution.

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

Test to see the effect of applying an opacity property to a group.

A blue rectangle with a green rectangle on top are contained in a group. This opacity of the group and the opacity of the rectangles are changed in this test. A red rectangle is provided in the background so that opacity changes are obvious visually.

From top to bottom, the tests are as follows.

In the top test, the opacities of the group and the individual rectangles are all set to 1.

In the second test, the group is given an opacity of 0.5.

In the third test, the group maintains a group opacity of 1 whereas each individual rectangle is given an opacity of 0.5 in the group.

Lastly, the group and individual rectangles are all given an opacity of 0.5.