I18N Tests: Language-dependent styling 2

   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"] { color:green; } 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"] { color:green; } 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"] { color:green; } 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"] { color:green; } 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"] { color: green; } 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"] { color: green; } 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"] { color: green; } 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"] { color: green; } 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"] { color: green; } 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"] { color: green; } 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 style element says: div[lang |= "cs-CZ"] { color: green; } Markup is <div lang="cs-Latn-CZ">White</div>. The HTML specification doesn't specify this behavior.

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"] { color: green; } 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"] { color:green; } 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"] { color:green; } Markup is <div lang="fr">White<p>White</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"] { color:green; } Markup is <p lang="de">White<em>White</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 |= "it"] { color:green; }. The markup is <div xml:lang="it">White</div>.

Check that the text describes the background color you see.