Full version, Basic version

Specification link: 13.2 Gradients

pservers-grad-04-b ← index → pservers-grad-06-b

# pservers-grad-05-b
SVG Image | PNG Image

Test that checks the capability of the stop opacity in linear and radial gradients.

There are two tests which contains rectangles with gradients using stop-opacity properties. A cyan color text string "Background" is put behind both of the rectangles to help demonstrate the opacity concept. From top-down the appearance of objects is as follows.

The first rectangle has a linear gradient fill with a vector starting at top left and going to bottom right. The stop colors are at 20% spacing apart and are in the following order : violet, blue, lime, yellow, orange, red. Also a stop opacity is given to the colors in the following order: 1, 0.2, 0.5, 0, 0.8, 1 Because the gradient vector vector goes from (0,0) to (1,1) in object bounding box space and because the object bounding box has a larger width than height, the gradient vector is skewed off of a pure 45 degree angle. The gradient stripes are also skewed so that they are no longer perpendicular to the gradient vector.

The next rectangle has a radial gradient fill with a multi-color stops from innermost to outermost in the following order : black, yellow, red, blue, white, green. Also a stop opacity is given to the colors in the following order: 1, 0.2, 0.5, 0, 0.8, 1

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

pservers-grad-04-b ← index → pservers-grad-06-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.