I18N Tests: Language-dependent styling 5

   Results

This is one of a set of pages that examine whether a user agent is capable of styling elements using CSS selectors in XHTML 1.1 (served as XML) that examine the language declared in element attributes.

Tests on this page seek to determine whether the xml\:lang |= selector works. The tests check expected behavior against a combination of the HTML 4.01, XHTML 1.1 and CSS 2.1 and CSS3 Namespaces specifications. Some user agents recognize attributes such as xml:lang in CSS selectors using namespace syntax (xml|lang), whereas others recognize only escaped forms (xml\:lang). These tests specify both types of selector: the former produce a green background for a positive result, whereas the latter produce a blue background.

1 xml:lang |= "es", xml:lang="es"

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

The style element says: div[xml|lang |="es"] { background-color:green; color:white; } div[xml\:lang |="es"] { background-color:blue; color:white; } Markup is <div xml:lang="es">Green or blue</div>.

Check that the text describes the color you see.

2 xml:lang |= "es", xml:lang="es-MX"

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

The style element says: div[xml|lang |="es"] { background-color:green; color:white; } div[xml\:lang |="es"] { background-color:blue; color:white; } Markup is <div xml:lang="es-MX">Green or blue</div>.

Check that the text describes the color you see.

3 xml:lang |= "es", xml:lang="ES"

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

The style element says: div[xml|lang |="es"] { background-color:green; color:white; } div[xml\:lang |="es"] { background-color:blue; color:white; } Markup is <div xml:lang="ES">Green or blue</div>.

Check that the text describes the color you see.

4 xml:lang |= "es", xml: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[xml|lang |="es"] { background-color:green; color:white; } div[xml\:lang |="es"] { background-color:blue; color:white; } Markup is <div xml:lang="MX-es">White</div>.

Check that the text describes the color you see.

5 xml:lang |= "en-GB", xml:lang="en-GB"

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

The style element says: div[xml|lang |="en-GB"] { background-color:green; color:white; } div[xml\:lang |="en-GB"] { background-color:blue; color:white; } Markup is <div xml:lang="en-GB">Green or blue </div>.

Check that the text describes the color you see.

6 xml:lang |= "en-GB", xml:lang="en-GB-scouse"

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

The style element says: div[xml|lang |="en-GB"] { background-color:green; color:white; } div[xml\:lang |="en-GB"] { background-color:blue; color:white; } Markup is <div xml:lang="en-GB-scouse">Green or blue </div>.

Check that the text describes the color you see.

7 xml:lang |= "en-GB", xml:lang="en-US"

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

The style element says: div[xml|lang |="en-GB"] { background-color:green; color:white; } div[xml\:lang |="en-GB"] { background-color:blue; color:white; } Markup is <div xml:lang="en-US">White</div>.

Check that the text describes the color you see.

8 xml:lang |= "en-GB", xml:lang="en"

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

The style element says: div[xml|lang |="en-GB"] { background-color:green; color:white; } div[xml\:lang |="en-GB"] { background-color:blue; color:white; } Markup is <div xml:lang="en">White</div>.

Check that the text describes the color you see.

9 xml:lang |= "az-Arab-IR", xml: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[xml|lang |="az-Arab-IR"] { background-color:green; color:white; } div[xml\:lang |="az-Arab-IR"] { background-color:blue; color:white; } Markup is <div xml:lang="az-Arab-IR">Green or blue</div>.

Check that the text describes the color you see.

10 xml:lang |= "az-Arab-IR", xml:lang="az-IR"

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

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

If the styling is picked up, you should see green text.

11 xml:lang |= "cs-CZ", xml: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[xml|lang |="cs-CZ"] { background-color:green; color:white; } div[xml\:lang |="cs-CZ"] { background-color:blue; color:white; } Markup is <div xml:lang="cs-Latn-CZ">White</div>. The HTML specification doesn't specify this behavior.

If the styling is picked up, you should see green text.

12 xml:lang |= "az-Arab-IR", xml: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[xml|lang |="az-Arab-IR"] { background-color:green; color:white; } div[xml\:lang |="az-Arab-IR"] { background-color:blue; color:white; } Markup is <div xml:lang="az-arab-IR">White</div>.

Check that the text describes the 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[xml|lang |="fr"] { background-color:green; color:white; } p[xml\:lang |="fr"] { background-color:blue; color:white; } Markup is <p xml:lang="fr">Green or blue <em>green or blue</em></p>.

Check that the text describes the 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[xml|lang |="fr"] { background-color:green; color:white; } p[xml\:lang |="fr"] { background-color:blue; color:white; } Markup is <div xml:lang="fr">White<p>White</p></div>.

Check that the text describes the 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[xml|lang |="de"] { background-color:green; color:white; } em[xml\:lang |="de"] { background-color:blue; color:white; } Markup is <p xml:lang="de">White<em>white</em></p>.

Check that the text describes the color you see.