font-size
On this page:
Test
1 |
References
|
About these tests
Nearby:
More HTML 4.01 Tests
|
UAAG 1.0 Test Suite
UAAG 1.0 Requirement
-
Checkpoint
4.1
Configure text scale
(Priority
1
)
-
Provision
1
:
Allow global configuration of the scale of visually rendered text content. Preserve distinctions in the size of rendered text as the user increases or decreases the scale.
-
Provision
2
:
As part of satisfying provision one of this checkpoint, provide a configuration option to override rendered text sizes specified by the author or user agent defaults.
-
Provision
3
:
As part of satisfying provision one of this checkpoint, offer a range of text sizes to the user that includes at least: the range offered by the conventional utility available in the operating environment that allows users to choose the text size (e.g., the font size), or if no such utility is available, the range of text sizes supported by the conventional APIs of the operating environment for drawing text.
Procedure
- Configure the user agent to render the following test text sizes both larger and smaller than their initial size.
Run test
XX-small size text
X-small size text
Small size text
Medium size text
Large size text
X-large size text
XX-large size text
14pt size text
14px size text
Medium size parent text
Smaller size child text
Medium size parent text
Larger size child text
Medium size parent text
150% size child text
Medium size parent text
75% size child text
Medium size parent text
1.5 em size child text
Medium size parent text
.75 em size child text
Expected results
- The user agent allows the user to make the text size larger and smaller.
- The user agent gives the user a range of both larger and smaller text sizes.
- The user agent preserves the difference in text sizes.
Source code
<p style="font-size: xx-small" style="font-size: x-small" style="font-size: small" style="font-size: medium" style="font-size: large" style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: x-small" style="font-size: small" style="font-size: medium" style="font-size: large" style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: small" style="font-size: medium" style="font-size: large" style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: medium" style="font-size: large" style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: large" style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: x-large" style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: xx-large" style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: 14pt" style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: 14px" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<p style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</p>
<blockquote style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: smaller" style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Smaller size child text</p>
</blockquote>
<p style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Larger size child text</p>
</p>
<blockquote style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: larger" style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">Larger size child text</p>
</blockquote>
<p style="font-size: medium" style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">150% size child text</p>
</p>
<blockquote style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: 150%" style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">150% size child text</p>
</blockquote>
<p style="font-size: medium" style="font-size: medium" style="font-size: medium">
<p style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">75% size child text</p>
</p>
<blockquote style="font-size: medium" style="font-size: medium">
<p style="font-size: 75%" style="font-size: 1.5em" style="font-size: .75em">75% size child text</p>
</blockquote>
<p style="font-size: medium" style="font-size: medium">
<p style="font-size: 1.5em" style="font-size: .75em">1.5 em size child text</p>
</p>
<blockquote style="font-size: medium">
<p style="font-size: 1.5em" style="font-size: .75em">1.5 em size child text</p>
</blockquote>
<p style="font-size: medium">
<p style="font-size: .75em">.75 em size child text</p>
</p>
<blockquote>
<p style="font-size: .75em">.75 em size child text</p>
</blockquote>
-
HTML 4.01 specification for STYLE
-
CSS2 specification for font-size
This test is part of a
test suite
for the
User Agent Accessibility Guidelines (UAAG)
1.0
. This work is conducted by the
User Agent Accessibility Guidelines Working
Group
, which is part of W3C's
Web Accessibility Initiative (WAI)
. Please send comments on this test to w3c-wai-ua@w3.org (
public archive
).
Test created by:
Last modified: $Date: 2003/04/02 23:46:38 $ by $Author: jongund $
Copyright
© 1999 - 2003
W3C®
(
MIT
,
INRIA
,
Keio
), All Rights Reserved. W3C
liability
,
trademark
,
document use
and
software licensing
rules apply.