pservers-grad-06-b.svg

Run the test. No interaction required.

The test passes if the rendering matches the reference image, apart from any differences in font choice due to CSS2 rules. Specifically:

• The top rectangle is filled with a linear gradient from blue on the left, to lime in the middle. The right half of the rectangle is filled with plain lime.
• The middle rectangle is filled with an elliptical radial gradient with black on the inside and orange on the outside. The center point of the gradient is near the center-bottom of the rectangle. The gradient is skewed, so that it appears as a rotated elliptical gradient.
• The bottom rectangle is filled with a repeating pattern of tiled red, green, yellow and blue parallelograms.

Test that the viewer can handle the gradientTransform and the patternTransform attribute on gradients and patterns respectively.

From top-down the appearance of objects is as follows.

The top rectangle has a linear gradient whose coordinate system has been scaled down by a half. So the gradient travelling from left to right (from blue to green to lime) should only occuply the left half the rectangle.

The next rectangle has radial gradient that has been translated to the center and skewed in the positive X direction by 45 degrees. Therefore the gradient should appear ellipltical and rotated around the center.

The last row contains a rectangle with pattern on the fill. The transformation on the pattern moves the coordinate system to the top left of the rectangle and then scales it by a factor of 2 and then skew's it in the X direction by 45 degrees. The pattern consists of a 2 by 2 array of colored rectangles.