pservers-grad-05-b.svg

Run the test. No interaction required.

The test passes if the rendering matches the reference image, except for any differences in text due to CSS2 rules.

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

There are two tests which contain 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, black. 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