I18N Tests: Language-dependent styling 1

   Results

This is one of a set of pages that examine whether a user agent is capable of styling elements in XHTML 1.0 served as text/html using CSS selectors that examine the language declared in element attributes.

Tests on this page seek to determine whether the :lang selector works as expected according to the CSS 2.1 specification. The tests check expected behavior against the HTML 4.01 spec.

1 :lang(es), lang="es"

Objective: Is the CSS styling picked up in the simplest case?

The style element says: div:lang(es) { background-color:green; color:white; } Markup is <div lang="es">Green</div>.

Check that the text describes the background color you see.

2 :lang(es), lang="es-MX"

Objective: Does an attribute value with another subtag cause the styling to fail?

The style element says: div:lang(es) { background-color:green; color:white; } Markup is <div lang="es-MX">Green</div>.

Check that the text describes the background color you see.

3 :lang(es), lang="ES"

Objective: Does an attribute value in a different case cause the styling to fail?

The style element says: div:lang(es) { background-color:green; color:white; } Markup is <div lang="ES">Green</div>.

Check that the text describes the background color you see.

4 :lang(es), lang="mx-es"

Objective: Is the CSS styling picked up when the language is not the first subtag in the markup value?

The style element says: div:lang(es) { background-color:green; color:white; } Markup is <div lang="MX-es">White</div>.

Check that the text describes the background color you see.

5 :lang(en-GB), lang="en-GB"

Objective: Is the CSS styling picked up when a region is specified in the CSS?

The style element says: div:lang(en-GB) { background-color:green; color:white; } Markup is <div lang="en-GB">Green</div>.

Check that the text describes the background color you see.

6 :lang(en-GB), lang="en-GB-scouse"

Objective: Does an attribute value with an additional subtag cause the styling to fail?

The style element says: div:lang(en-GB) { background-color:green; color:white; } Markup is <div lang="en-GB-scouse">Green</div>.

Check that the text describes the background color you see.

7 :lang(en-GB), lang="en-US"

Objective: Does a non-matched following subtag in the attribute value cause the styling to fail?

The style element says: div:lang(en-GB) { background-color:green; color:white; } Markup is <div lang="en-US">White</div>.

Check that the text describes the background color you see.

8 :lang(en-GB), lang="en"

Objective: Does an attribute value without a second subtag cause the styling to fail?

The style element says: div:lang(en-GB) { background-color:green; color:white; } Markup is <div lang="en">White</div>.

Check that the text describes the background color you see.

9 :lang(az-Arab-IR), lang="az-Arab-IR"

Objective: Is the CSS styling picked up when a script and region are specified in both places?

The style element says: div:lang(az-Arab-IR) { background-color:green; color:white; } Markup is <div lang="az-Arab-IR">Green</div>.

Check that the text describes the background color you see.

10 :lang(az-Arab-IR), lang="az-IR"

Objective: Is the CSS styling picked up when the script is omitted in the attribute value?

The style element says: div:lang(az-Arab-IR) { background-color:green; color:white; } Markup is <div lang="az-IR">White</div>. The HTML specification doesn't specify this behavior.

Check that the text describes the background color you see.

11 :lang(cs-CZ), lang="cs-Latn-CZ"

Objective: Is the CSS styling picked up when the script is omitted in the CSS selector? The HTML specification doesn't specify this behavior.

The style element says: div:lang(cs-CZ) { background-color:green; color:white; } Markup is <div lang="cs-Latn-CZ">White</div>.

Check that the text describes the background color you see.

12 :lang(az-Arab-IR), lang="az-arab-IR"

Objective: Does a change in case in the script subtag of the attribute value cause the styling to fail?

The style element says: div:lang(az-Arab-IR) { background-color:green; color:white; } Markup is <div lang="az-arab-IR">Green</div>.

Check that the text describes the background color you see.

13 Inheritance by inline elements

Objective: Is the styling inherited by an inline element when the language is declared on its parent block?

The style element says: p:lang (fr) { background-color:green; color:white; } Markup is <p lang="fr">Green <em>green</em></p>.

Check that the text describes the background color you see.

14 Inheritance from an ancestor, block elements

Objective: Is the styling inherited by a block element styled by the CSS when the language is declared on its ancestor, rather than on the element itself?

The style element says: p:lang (fr) { background-color:green; color:white; } Markup is <div lang="fr">White <p>Green</p></div>.

Check that the text describes the background color you see.

15 Inheritance from an ancestor, inline elements

Objective: Is the styling inherited by an inline element styled by the CSS when the language is declared on its ancestor, rather than on the element itself?

The style element says: em:lang(de) { background-color:green; color:white; } Markup is <p lang="de">White <em>green</em></p>.

Check that the text describes the background color you see.

16 xml:lang in HTML

Objective: Is the styling applied by the xml:lang attribute in a document treated as HTML?

This file is served as text/html. The stylesheet says: div:lang(es) { background-color:green; color:white; }. The markup is <div xml:lang="es">White</div>.

Check that the text describes the background color you see.