Updated
These tests check whether user agents highlight expected characters when the ::first-letter selector is used in CSS. These are simple, user-oriented tests, designed to check basic functionality, rather than test all edge cases and implementation details.
The tests check whether ::first-letter selects just the first character on the line, or the first grapheme cluster (ie. a sequence of characters that form a logical unit, such as a base character and it's combining characters).
To see the test, click on the link in the left-most column. To see detailed results for a single test, click on a row and look just above the table. The detailed results show the date(s) the test result was recorded, and the version of the browser tested.
Any dependencies are shown in notes above the table, and notes below the table will usually provide any additional useful information, including an explanation of why a result was marked as 'partially successful'. Where the instructions tell you to look for red characters, these characters should be clearly discernable behind the black text of the test – ignore any anti-aliasing 'glow'.
Key:
| pass | fail | partially successful |
This test checks whether first-letter has an effect on a single Latin character. If a browser doesn't pass this test, the remaining tests are moot.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| latin, single letter first-letter-basic.html |
:first-letter will select a single letter at the start of a line. | pass | pass | pass |
Spec links for this table: link
The first grapheme cluster should be selected, rather than just the first character.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| latin, letter + diacritic first-letter-1cchar.html |
:first-letter will select a letter + a following combining character at the start of a line. | pass | pass | pass |
| latin, letter + 2 diacritics first-letter-2cchars.html |
:first-letter will select a letter + two following combining characters at the start of a line. | pass | pass | pass |
Spec links for this table: link
Does the browser tailor its selection to deal with the Dutch ij?
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| latin, ij in dutch first-letter-ij.html |
[Exploratory] :first-letter will select an IJ as a single item at the start of a line in a Dutch context. | fail | fail | fail |
Spec links for this table: link
The first grapheme cluster should be selected, rather than just the first character.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| hindi, letter only first-letter-deva-1consonant.html |
:first-letter will select a devanagari letter at the start of a line. | pass | pass | pass |
| hindi, base character with 1 combining character first-letter-deva-1cchar.html |
:first-letter will select a devanagari letter and a following combining character at the start of a line. | pass | pass | pass |
| hindi, consonant + 2 combining characters first-letter-deva-2cchars.html |
:first-letter will select a devanagari letter and two following combining characters at the start of a line. | pass | pass | pass |
Spec links for this table: link
The browser should tailor its selection to account for the fact that Devanagari conjuncts and orthographic syllables should not be split.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| hindi, simple conjunct first-letter-deva-conjunct.html |
[Exploratory] :first-letter will select a devanagari two-consonant conjunct at the start of a line. | pass | pass | pass |
| hindi, conjunct plus combining character first-letter-deva-syllable.html |
[Exploratory] :first-letter will select a devanagari two-consonant conjunct and a combining character at the start of a line. | pass | pass | pass |
Spec links for this table: link