Specification link: 13.2 Gradients

pservers-grad-11-b ← index → pservers-grad-13-b

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

# pservers-grad-12-b.svg
SVG Image | PNG Image

## Operator Script

Run the test. No interaction required.

## Pass Criteria

The test passes if the rendering of the three rectangles matches those in the reference image. Specifically:

- The upper rectangle is filled with an elliptical radial gradient with blue at the center and lime at its edges.
- The middle rectangle is also filled with an elliptical radial gradient with blue inside and lime outside, but with the center point of the gradient in the top-left quadrant of the rectangle.
- The bottom rectangle is filled with a circular radial gradient with yellow at the center and blue at its edges. Since it is circular, most of the rectangle is filled with plain blue.

## Test Description

Test that the viewer can handle the gradientUnits attribute on radial gradients. It tests the following values of gradientUnits: default (objectBoundingBox), objectBoundingBox, and userSpaceOnUse.

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

The first rectangle uses the default attributes on the radialGradient element. Therefore the radial gradient should be relative to the object bounding box. It should appear from the center of the viewport (blue) to the edges of the viewport (lime). The rectangle is wider than tall so it the gradient should be elliptical, not circular.

The next rectangle uses gradientUnits=objectBoundingBox. The radial gradient should travel from a center of 20%, 20% of the rectangle with a radius of 50%.

The last rectangle uses gradientUnits=userSpaceOnUse. The rectangle element is given it's own transformation and the gradient is assumed to be in this user space. The gradient should appear in the center of the rectangle as a radial gradient from yellow (center) to blue (edge).

pservers-grad-11-b ← index → pservers-grad-13-b