I18N Tests: Language-dependent styling 3

   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 described in CSS 2.1. 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">White</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">White</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 style element says: div[lang="cs-CZ"] { background-color: green; color: white; } 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"] { 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>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"] { background-color: green; color: white; } 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"] { background-color: green; color: white; }. The markup is <div xml:lang="it">White</div>.

Check that the text describes the background color you see.