Intended audience: users, HTML coders, script developers, CSS coders, Web project managers, and anyone who wants to know whether browsers support the CSS Ruby spec.
Updated
These tests check whether user agents support the properties defined in the CSS-Text-Decoration-3 spec for emphasis marks. These are simple, user-oriented tests, designed to check basic functionality, rather than test all edge cases and implementation details.
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 |
These tests work through various possible values and value combinations for the text-emphasis-style property. First, the values are applied to horizontal text, and second to the same text in vertical writing mode.
There is also one test to check that marks don't appear over a space character.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| dot text-emphasis-style-001.html |
text-emphasis-style:dot; a dot appears next to each character | pass | pass | pass |
| circle text-emphasis-style-002.html |
text-emphasis-style:circle; a circle appears next to each character | pass | pass | pass |
| double-circle text-emphasis-style-003.html |
text-emphasis-style:double-circle; a double-circle appears next to each character | pass | pass | pass |
| triangle text-emphasis-style-004.html |
text-emphasis-style:triangle; a triangle appears next to each character | pass | pass | pass |
| sesame text-emphasis-style-005.html |
text-emphasis-style:sesame; a sesame mark appears next to each character | pass | pass | pass |
| filled dot text-emphasis-style-006.html |
text-emphasis-style:filled dot; a filled dot appears next to each character | pass | pass | pass |
| filled circle text-emphasis-style-007.html |
text-emphasis-style:filled circle; a filled circle appears next to each character | pass | pass | pass |
| filled double-circle text-emphasis-style-008.html |
text-emphasis-style:filled double-circle; a filled double-circle appears next to each character | pass | pass | pass |
| filled triangle text-emphasis-style-009.html |
text-emphasis-style:filled triangle; a filled triangle appears next to each character | pass | pass | pass |
| filled sesame text-emphasis-style-010.html |
text-emphasis-style:filled sesame; a filled sesame appears next to each character | pass | pass | pass |
| open dot text-emphasis-style-011.html |
text-emphasis-style:open dot; an open dot appears next to each character | pass | pass | pass |
| open circle text-emphasis-style-012.html |
text-emphasis-style:open circle; an open circle appears next to each character | pass | pass | pass |
| open double-circle text-emphasis-style-014.html |
text-emphasis-style:open double-circle; an open double-circle appears next to each character | pass | pass | pass |
| open triangle text-emphasis-style-015.html |
text-emphasis-style:open triangle; an open triangle appears next to each character | pass | pass | pass |
| open sesame text-emphasis-style-016.html |
text-emphasis-style:open sesame; an open sesame appears next to each character | pass | pass | pass |
| filled text-emphasis-style-018.html |
text-emphasis-style:filled; a filled circle appears next to each character | pass | pass | pass |
| open text-emphasis-style-019.html |
text-emphasis-style:open; an open circle appears next to each character | pass | pass | pass |
| 'string' text-emphasis-style-017.html |
text-emphasis-style:'x'; an 'x' appears next to each character | pass | pass | pass |
| text-emphasis-style and space text-emphasis-style-020.html |
text-emphasis-style:dot; no dot appears next to the space (Zs) characters | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| dot (tbrl) text-emphasis-style-tbrl-001.html |
text-emphasis-style:dot; a dot appears next to each character | pass | pass | pass |
| circle (tbrl) text-emphasis-style-tbrl-002.html |
text-emphasis-style:circle; a circle appears next to each character | pass | pass | pass |
| double-circle (tbrl) text-emphasis-style-tbrl-003.html |
text-emphasis-style:double-circle; a double-circle appears next to each character | pass | pass | pass |
| triangle (tbrl) text-emphasis-style-tbrl-004.html |
text-emphasis-style:triangle; a triangle appears next to each character | pass | pass | pass |
| sesame (tbrl) text-emphasis-style-tbrl-005.html |
text-emphasis-style:sesame; a sesame mark appears next to each character | pass | pass | pass |
| filled dot (tbrl) text-emphasis-style-tbrl-006.html |
text-emphasis-style:filled dot; a filled dot appears next to each character | pass | pass | pass |
| filled circle (tbrl) text-emphasis-style-tbrl-007.html |
text-emphasis-style:filled circle; a filled circle appears next to each character | pass | pass | pass |
| filled double-circle (tbrl) text-emphasis-style-tbrl-008.html |
text-emphasis-style:filled double-circle; a filled double-circle appears next to each character | pass | pass | pass |
| filled triangle (tbrl) text-emphasis-style-tbrl-009.html |
text-emphasis-style:filled triangle; a filled triangle appears next to each character | pass | pass | pass |
| filled sesame (tbrl) text-emphasis-style-tbrl-010.html |
text-emphasis-style:filled sesame; a filled sesame appears next to each character | pass | pass | pass |
| open dot (tbrl) text-emphasis-style-tbrl-011.html |
text-emphasis-style:open dot; an open dot appears next to each character | pass | pass | pass |
| open circle (tbrl) text-emphasis-style-tbrl-012.html |
text-emphasis-style:open circle; an open circle appears next to each character | pass | pass | pass |
| open double-circle (tbrl) text-emphasis-style-tbrl-014.html |
text-emphasis-style:open double-circle; an open double-circle appears next to each character | pass | pass | pass |
| open triangle (tbrl) text-emphasis-style-tbrl-015.html |
text-emphasis-style:open triangle; an open triangle appears next to each character | pass | pass | pass |
| open sesame (tbrl) text-emphasis-style-tbrl-016.html |
text-emphasis-style:open sesame; an open sesame appears next to each character | pass | pass | pass |
| filled (tbrl) text-emphasis-style-tbrl-018.html |
text-emphasis-style:filled; a filled sesame appears next to each character | pass | pass | pass |
| open (tbrl) text-emphasis-style-tbrl-019.html |
text-emphasis-style:open; an open sesame appears next to each character | pass | pass | pass |
| 'string' (tbrl) text-emphasis-style-tbrl-017.html |
text-emphasis-style:'x'; an 'x' appears next to each character | pass | pass | pass |
| text-emphasis-style and space (tbrl) text-emphasis-style-tbrl-020.html |
text-emphasis-style:dot; no dot appears next to the space (Zs) characters | pass | pass | pass |
Spec links for this table: link
Notes
This section repeats the above tests for the text-emphasis property, which is a shorthand property that can carry a value for text-emphasis-style and another for text-emphasis-color. There are no tests here for colour values.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| dot text-emphasis-001.html |
text-emphasis:dot; a dot appears next to each character | pass | pass | pass |
| circle text-emphasis-002.html |
text-emphasis:circle; a circle appears next to each character | pass | pass | pass |
| double-circle text-emphasis-003.html |
text-emphasis:double-circle; a double-circle appears next to each character | pass | pass | pass |
| triangle text-emphasis-004.html |
text-emphasis:triangle; a triangle appears next to each character | pass | pass | pass |
| sesame text-emphasis-005.html |
text-emphasis:sesame; a sesame mark appears next to each character | pass | pass | pass |
| filled dot text-emphasis-006.html |
text-emphasis:filled dot; a filled dot appears next to each character | pass | pass | pass |
| filled circle text-emphasis-007.html |
text-emphasis:filled circle; a filled circle appears next to each character | pass | pass | pass |
| filled double-circle text-emphasis-008.html |
text-emphasis:filled double-circle; a filled double-circle appears next to each character | pass | pass | pass |
| filled triangle text-emphasis-009.html |
text-emphasis:filled triangle; a filled triangle appears next to each character | pass | pass | pass |
| filled sesame text-emphasis-010.html |
text-emphasis:filled sesame; a filled sesame appears next to each character | pass | pass | pass |
| open dot text-emphasis-011.html |
text-emphasis:open dot; an open dot appears next to each character | pass | pass | pass |
| open circle text-emphasis-012.html |
text-emphasis:open circle; an open circle appears next to each character | pass | pass | pass |
| open double-circle text-emphasis-014.html |
text-emphasis:open double-circle; an open double-circle appears next to each character | pass | pass | pass |
| open triangle text-emphasis-015.html |
text-emphasis:open triangle; an open triangle appears next to each character | pass | pass | pass |
| open sesame text-emphasis-016.html |
text-emphasis:open sesame; an open sesame appears next to each character | pass | pass | pass |
| filled text-emphasis-018.html |
text-emphasis:filled; a filled circle appears next to each character | pass | pass | pass |
| open text-emphasis-019.html |
text-emphasis:open; an open circle appears next to each character | pass | pass | pass |
| 'string' text-emphasis-017.html |
text-emphasis:'x'; an 'x' appears next to each character | pass | pass | pass |
| text-emphasis and space text-emphasis-020.html |
text-emphasis:dot; no dot appears next to the space (Zs) characters | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| dot (tbrl) text-emphasis-tbrl-001.html |
text-emphasis:dot; a dot appears next to each character | pass | pass | pass |
| circle (tbrl) text-emphasis-tbrl-002.html |
text-emphasis:circle; a circle appears next to each character | pass | pass | pass |
| double-circle (tbrl) text-emphasis-tbrl-003.html |
text-emphasis:double-circle; a double-circle appears next to each character | pass | pass | pass |
| triangle (tbrl) text-emphasis-tbrl-004.html |
text-emphasis:triangle; a triangle appears next to each character | pass | pass | pass |
| sesame (tbrl) text-emphasis-tbrl-005.html |
text-emphasis:sesame; a sesame mark appears next to each character | pass | pass | pass |
| filled dot (tbrl) text-emphasis-tbrl-006.html |
text-emphasis:filled dot; a filled dot appears next to each character | pass | pass | pass |
| filled circle (tbrl) text-emphasis-tbrl-007.html |
text-emphasis:filled circle; a filled circle appears next to each character | pass | pass | pass |
| filled double-circle (tbrl) text-emphasis-tbrl-008.html |
text-emphasis:filled double-circle; a filled double-circle appears next to each character | pass | pass | pass |
| filled triangle (tbrl) text-emphasis-tbrl-009.html |
text-emphasis:filled triangle; a filled triangle appears next to each character | pass | pass | pass |
| filled sesame (tbrl) text-emphasis-tbrl-010.html |
text-emphasis:filled sesame; a filled sesame appears next to each character | pass | pass | pass |
| open dot (tbrl) text-emphasis-tbrl-011.html |
text-emphasis:open dot; an open dot appears next to each character | pass | pass | pass |
| open circle (tbrl) text-emphasis-tbrl-012.html |
text-emphasis:open circle; an open circle appears next to each character | pass | pass | pass |
| open double-circle (tbrl) text-emphasis-tbrl-014.html |
text-emphasis:open double-circle; an open double-circle appears next to each character | pass | pass | pass |
| open triangle (tbrl) text-emphasis-tbrl-015.html |
text-emphasis:open triangle; an open triangle appears next to each character | pass | pass | pass |
| open sesame (tbrl) text-emphasis-tbrl-016.html |
text-emphasis:open sesame; an open sesame appears next to each character | pass | pass | pass |
| filled (tbrl) text-emphasis-tbrl-018.html |
text-emphasis:filled; a filled sesame appears next to each character | pass | pass | pass |
| open (tbrl) text-emphasis-tbrl-019.html |
text-emphasis:open; an open sesame appears next to each character | pass | pass | pass |
| 'string' (tbrl) text-emphasis-tbrl-017.html |
text-emphasis:'x'; an 'x' appears next to each character | pass | pass | pass |
| text-emphasis and space (tbrl) text-emphasis-tbrl-020.html |
text-emphasis:dot; no dot appears next to the space (Zs) characters | pass | pass | pass |
Spec links for this table: link
Notes
These tests assess support for the text-emphasis-position property. The same tests are run for text in both horizontal and vertical writing modes.
The expectation is that for horizontal text browsers will, by default (ie. when text-emphasis-position is not set), position emphasis marks above Japanese text, but below Chinese text. For vertical text, it is expected that emphasis marks will appear to the right for both languages.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| default (ja) text-emphasis-position-001.html |
text-emphasis:dot; by default the dot appears OVER horizontal Japanese text | pass | pass | pass |
| default (zh) text-emphasis-position-002.html |
text-emphasis:dot; by default the dot appears UNDER horizontal Chinese text | pass | fail | fail |
| default (ja, vertical) text-emphasis-position-003.html |
text-emphasis:dot; by default the dot appears to the RIGHT of vertical Japanese text | pass | pass | pass |
| default (zh, vertical) text-emphasis-position-004.html |
text-emphasis:dot; by default the dot appears to the RIGHT of vertical Chinese text | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| over right text-emphasis-position-005.html |
text-emphasis:dot; text-emphasis-position:over right; the dot appears OVER horizontally set characters | pass | pass | pass |
| over left text-emphasis-position-006.html |
text-emphasis:dot; text-emphasis-position:over left; the dot appears OVER horizontally set characters | pass | pass | pass |
| under right text-emphasis-position-007.html |
text-emphasis:dot; text-emphasis-position:under right; the dot appears UNDER horizontally set characters | pass | pass | pass |
| under left text-emphasis-position-008.html |
text-emphasis:dot; text-emphasis-position:under left; the dot appears UNDER horizontally set characters | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Webkit Safari |
|---|---|---|---|---|
| over right (vertical) text-emphasis-position-009.html |
text-emphasis:dot; text-emphasis-position:over right; the dot appears to the RIGHT of vertically set characters | pass | pass | pass |
| under right (vertical) text-emphasis-position-010.html |
text-emphasis:dot; text-emphasis-position:under right; the dot appears to the RIGHT of vertically set characters | pass | pass | pass |
| over left (vertical) text-emphasis-position-011.html |
text-emphasis:dot; text-emphasis-position:over left; the dot appears to the LEFT of vertically set characters | pass | pass | pass |
| under left (vertical) text-emphasis-position-012.html |
text-emphasis:dot; text-emphasis-position:under left; the dot appears to the LEFT of vertically set characters | pass | pass | pass |
Spec links for this table: link
CSS Text Decoration Module Level 3 (editor's copy)