Intended audience: users, HTML coders, script developers, CSS coders, Web project managers, and anyone who wants to know whether browsers shape Arabic and other cursive text as described in the CSS Text module.
Updated
These tests check whether user agents correctly join or separate cursive characters according to style changes applied to them, as indicated by the CSS Text spec.
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'.
Key:
| pass | fail | partially successful |
Tests in this section check whether joining is broken or not for simple cases concerning ordinary adjacent letters when one letter is in markup to which styling may apply. Most of the tests use Arabic.
This test puts markup around a letter, but applies no styling change, so joins must not be broken.
These tests create no effective change in the formatting for the affected letters, so joins must not be broken.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari | Legacy Edge |
|---|---|---|---|---|---|
| text-decoration shaping-015.html |
Shaping is not broken across inline box boundaries for changes in text-decoration. | pass | pass | skipped | pass |
| outline shaping-016.html |
Shaping is not broken across inline box boundaries for changes in outline. | pass | pass | skipped | pass |
| font size 100% shaping-007.html |
Shaping is not broken across inline box boundaries when font-size is set to 100%. | pass | pass | skipped | pass |
| margin 0 shaping-004.html |
Shaping is not broken across inline box boundaries when margin is set to 0. | pass | pass | skipped | pass |
| padding 0 shaping-005.html |
Shaping is not broken across inline box boundaries when padding is set to 0. | pass | pass | skipped | pass |
| border 0 shaping-006.html |
Shaping is not broken across inline box boundaries when border is set to 0. | pass | pass | skipped | pass |
Spec links for this table: link
These tests do create a change in the formatting, but joining should not be broken.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari | Legacy Edge |
|---|---|---|---|---|---|
| colour shaping-001.html |
Shaping is not broken across inline box boundaries for changes to colour. | pass | pass | skipped | pass |
| font-weight shaping-002.html |
Shaping is not broken across inline box boundaries for changes in font weight. | fail | pass | skipped | fail |
| font-style shaping-003.html |
Shaping is not broken across inline box boundaries for changes in font style. | fail | pass | skipped | fail |
| font size 120% shaping-008.html |
Shaping is not broken across inline box boundaries for changes to font-size. | fail | pass | skipped | fail |
| em element shaping-017.html |
Shaping is not broken across inline box boundaries for the em element. | fail | pass | skipped | fail |
| b element shaping-018.html |
Shaping is not broken across inline box boundaries for the b element. | fail | pass | skipped | fail |
These tests are for features that must break the joining behaviour.
Dependencies
bdi and dir=auto.| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari | Legacy Edge |
|---|---|---|---|---|---|
| margin > 0 shaping-009.html |
Shaping IS broken across inline box boundaries when margin is set to a non-zero value. | pass | fail | skipped | pass |
| padding > 0 shaping-010.html |
Shaping IS broken across inline box boundaries when padding is set to a non-zero value. | pass | fail | skipped | pass |
| border > 0 shaping-011.html |
Shaping IS broken across inline box boundaries when border is set to a non-zero value. | pass | fail | skipped | fail |
| isolation, bdi shaping-012.html |
Shaping IS broken across inline box boundaries when isolation occurs. | pass | pass | skipped | fail |
In this section we run basic tests against languages that use other cursive writing systems, as a quick check that the same results apply.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari | Legacy Edge |
|---|---|---|---|---|---|
| n'ko, colour shaping-020.html |
Shaping is not broken across inline box boundaries for changes to colour in N'Ko. | pass | pass | fail | pass |
| n'ko, font-style shaping-021.html |
Shaping is not broken across inline box boundaries for changes to font-style in N'Ko. | fail | pass | fail | fail |
| n'ko, text-decoration shaping-022.html |
Shaping is not broken across inline box boundaries for changes to text-decoration in N'Ko. | pass | pass | fail | pass |
| mongolian, colour shaping-023.html |
Shaping is not broken across inline box boundaries for changes to colour in Mongolian. | pass | pass | skipped | pass |
| mongolian, font-style shaping-024.html |
Shaping is not broken across inline box boundaries for changes to font-style in Mongolian. | fail | fail | skipped | fail |
| mongolian, text-decoration shaping-025.html |
Shaping is not broken across inline box boundaries for changes to text-decoration in Mongolian. | pass | pass | skipped | pass |
This section runs the same tests as before, but the span element is around a diacritic that appears between the to joining letters. Since styling of the diacritic doesn't affect the joining letters, the same behaviour should apply as for the tests in the previous section.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari | Legacy Edge |
|---|---|---|---|---|---|
| span shaping_cchar-000.html |
[exploratory] Shaping is not broken by a span (with no styling) around a diacritic. | pass | pass | fail | pass |
| colour shaping_cchar-001.html |
[exploratory] Shaping is not broken when changes to colour are applied to an intervening diacritic. | pass | pass | skipped | pass |
| font-weight shaping_cchar-002.html |
[exploratory] Shaping is not broken when changes to font weight are applied to an intervening diacritic. | fail | pass | skipped | fail |
| font-style shaping_cchar-003.html |
[exploratory] Shaping is not broken when changes to font style are applied to an intervening diacritic. | fail | pass | skipped | fail |
| margin 0 shaping_cchar-004.html |
[exploratory] Shaping is not broken when margin is set to 0 for an intervening diacritic. | pass | pass | skipped | pass |
| padding 0 shaping_cchar-005.html |
[exploratory] Shaping is not broken when padding is set to 0 for an intervening diacritic. | pass | pass | skipped | pass |
| border 0 shaping_cchar-006.html |
[exploratory] Shaping is not broken when border is set to 0 for an intervening diacritic. | pass | pass | skipped | pass |
| font size 100% shaping_cchar-007.html |
[exploratory] Shaping is not broken when font-size is set to 100% for an intervening diacritic. | pass | pass | skipped | pass |
| font size 120% shaping_cchar-008.html |
[exploratory] Shaping is not broken when changes to font-size are applied to an intervening diacritic. | fail | pass | skipped | fail |
| margin > 0 shaping_cchar-009.html |
[exploratory] Shaping IS BROKEN when margin is set to a non-zero value on an intervening diacritic. | pass | fail | skipped | pass |
| padding > 0 shaping_cchar-010.html |
[exploratory] Shaping IS BROKEN when padding is set to a non-zero value on an intervening diacritic. | pass | fail | skipped | pass |
| border > 0 shaping_cchar-011.html |
[exploratory] Shaping IS BROKEN when border is set to a non-zero value on an intervening diacritic. | pass | fail | skipped | fail |
Spec links for this table: link
These tests are exploratory. They look at the behaviour produced when the letter with markup around it is displayed as part of a ligated sequence. In theory, this is what the spec refers to as a situation where it is impossible to join across boundaries. We would expect all the tests to break the join.
Dependencies
bdi and dir=auto.| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari | Legacy Edge |
|---|---|---|---|---|---|
| colour shaping_lig-001.html |
[exploratory] Styling part of a ligature for colour will break joining behaviour across inline box boundaries, or apply the styling to the glyph corresponding to the middle letter, or apply the styling to the whole ligature. | pass | pass | skipped | fail |
| font-weight shaping_lig-002.html |
[exploratory] Styling part of a ligature for font-weight will break joining behaviour across inline box boundaries, or apply the styling to the glyph corresponding to the middle letter, or apply the styling to the whole ligature. | pass | pass | skipped | pass |
| font-style shaping_lig-003.html |
[exploratory] Styling part of a ligature for font-style will break joining behaviour across inline box boundaries, or apply the styling to the glyph corresponding to the middle letter, or apply the styling to the whole ligature. | pass | pass | skipped | pass |
| font size 120% shaping_lig-008.html |
[exploratory] Styling part of a ligature for font-size will break joining behaviour across inline box boundaries, or apply the styling to the glyph corresponding to the middle letter, or apply the styling to the whole ligature. | pass | pass | skipped | pass |
Spec links for this table: link
CSS Text Module Level 3, 8.3. Shaping Across Element Boundaries (editor's copy)