Full version, Basic version

Specification link: 7.10 Units

coords-units-02-b ← index → coords-viewattr-01-b

# coords-units-03-b
SVG Image | PNG Image
coords-units-03-b Validates simple initial viewport size and basic units handling. Initial viewport and CSS units test 200 User space units (no specifier) 200 px Pixels (px) 20 em = 200 px (font-size=10px) Relative to font size (em) 40 ex Relative to font x-height (ex) 41.67% = 200 px Percentage (%) 1 in Inches (in) 2.54 cm = 1 in Centimeters (cm) 25.4 mm = 1 in Millimeters (mm) 72pt = 1 in Points (pt) 6pc = 1 in Picas (pc) $Revision: 1.4 $ |

This test verifies both the initial viewport size and the support for the various unit specifiers.

The units in SVG can be: user coordinate and CSS units: em, ex, px, pt, pc, cm, mm, in and percentages. The test does not check the absolute length accuracy as this can only be truly validated with a ruler. However, it validates that the different units are supported by drawing multiple elements who have the same length specified in different units.

The viewport is the "finite rectangular region" where rendering occurs in SVG. Hence, nothing should be rendered outside the viewport (paragraph 7.1). Furthermore, when no positioning properties are set on the top svg element, the initial viewport size should have the value of the top svg element's "width" and "height" attributes. To check this behavior, the test does not define positioning properties on the top svg element but defines its "width" and "height" properties. Then it fills a red rectangle that is bigger than the viewport size. Then, a rectangle, the size of the viewport is drawn in white. If rendering is limited to the viewport area, none of the red should show.

The line showing the "ex" units will not necessarily appear with the same length as shown in the reference image because the X-height of a font is not necessarily half of the font size (which is assumed in the reference image where 1ex is considered to be .5em).

The rendered picture should match the reference image approximately. There might be variations due to the exact pixel size as negotiated by the SVG renderer.

coords-units-02-b ← index → coords-viewattr-01-b