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 correctly apply the writing-mode property per the CSS3 spec for the vertical-lr and vertical-rl values. They are just essential tests. More detailed tests for edge cases and finer aspects of rendering can be found in the CSS test suite.
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 |
The proprietary test results are for either prefixed implementations, using -webkit or -ms, or for the nightly version of Firefox, or for non-standard writing-mode values in Internet Explorer.
If writing-mode-vrl-001 or writing-mode-vlr-001 fails, or either of the corresponding -prop tests, the remaining tests for the section can be ignored.
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, vertical lines writing-mode-vrl-001.html |
writing-mode:vertical-rl will display a line of text vertically. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-rl, line wrap writing-mode-vrl-002.html |
writing-mode:vertical-rl will wrap lines from right to left. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-rl, alignment writing-mode-vrl-003.html |
writing-mode:vertical-lr will cause lines to display from the right side of the enclosing box. | pass | pass | pass | pass | pass | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, vertical lines writing-mode-vrl-001-prop.html |
writing-mode:vertical-rl will display a line of text vertically. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-rl, line wrap writing-mode-vrl-002-prop.html |
writing-mode:vertical-rl will wrap lines from right to left. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-rl, alignment writing-mode-vrl-003-prop.html |
writing-mode:vertical-lr will cause lines to display from the right side of the enclosing box. | pass | pass | pass | pass | pass | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, default Han orientation writing-mode-vrl-005.html |
By default, writing-mode:vertical-rl will display chinese characters upright. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-rl, default Latin orientation writing-mode-vrl-007.html |
writing-mode:vertical-lr will display Latin characters rotated 90° right by default. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-rl, default Arabic orientation writing-mode-vrl-008.html |
By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-rl, default Arabic direction writing-mode-vrl-009.html |
By default, writing-mode:vertical-lr will display Arabic characters progressing up the page. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-rl, Arabic joining writing-mode-vrl-010.html |
By default, writing-mode:vertical-lr will display Arabic characters using cursive joining. | pass | pass | pass | pass | pass | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, default Han orientation writing-mode-vrl-005-prop.html |
By default, writing-mode:vertical-rl will display chinese characters upright. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-rl, default Latin orientation writing-mode-vrl-007-prop.html |
writing-mode:vertical-lr will display Latin characters rotated 90° right by default. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-rl, default Arabic orientation writing-mode-vrl-008-prop.html |
By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-rl, default Arabic direction writing-mode-vrl-009-prop.html |
By default, writing-mode:vertical-lr will display Arabic characters progressing up the page. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-rl, Arabic joining writing-mode-vrl-010-prop.html |
By default, writing-mode:vertical-lr will display Arabic characters using cursive joining. | pass | pass | pass | pass | pass | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, Latin wrapping writing-mode-vrl-012.html |
By default, writing-mode:vertical-rl will wrap Latin text across a line break such that the first word in memory is on the right. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-rl, Arabic wrapping writing-mode-vrl-014.html |
By default, writing-mode:vertical-rl will arrange Arabic text across a line break such that the first word in memory is on the right-hand side of the line break. | pass | pass | pass | pass | pass | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, Latin wrapping writing-mode-vrl-012-prop.html |
By default, writing-mode:vertical-rl will wrap Latin text across a line break such that the first word in memory is on the right. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-rl, Arabic wrapping writing-mode-vrl-014-prop.html |
By default, writing-mode:vertical-rl will arrange Arabic text across a line break such that the first word in memory is on the right-hand side of the line break. | pass | pass | pass | pass | pass | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, image orientation writing-mode-vrl-015.html |
By default, replaced content such as images is displayed upright. | pass | pass | pass | pass | pass | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, image orientation writing-mode-vrl-015-prop.html |
By default, replaced content such as images is displayed upright. | pass | pass | pass | pass | pass | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, input type=text writing-mode-vrl-forms-001.html |
writing-mode:vertical-rl will display an input field for text vertically, and with vertical text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-rl, input type=text placeholder writing-mode-vrl-forms-002.html |
writing-mode:vertical-rl will display an input field for text vertically, and with vertical placeholder text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-rl, textarea writing-mode-vrl-forms-003.html |
writing-mode:vertical-rl will display a textarea field vertically, and with vertical text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-rl, textarea placeholder writing-mode-vrl-forms-004.html |
writing-mode:vertical-rl will display a textarea field vertically, and with vertical placeholder text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-rl, select, selected item writing-mode-vrl-forms-005.html |
writing-mode:vertical-rl will display a select box vertically, and the selected item will be displayed vertically. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-rl, select, options writing-mode-vrl-forms-006.html |
writing-mode:vertical-rl will display selection options vertically. | fail | fail | fail | fail | fail | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, input type=text writing-mode-vrl-forms-001-prop.html |
writing-mode:vertical-rl will display an input field for text vertically, and with vertical text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-rl, input type=text placeholder writing-mode-vrl-forms-002-prop.html |
writing-mode:vertical-rl will display an input field for text vertically, and with vertical placeholder text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-rl, textarea writing-mode-vrl-forms-003-prop.html |
writing-mode:vertical-rl will display a textarea field vertically, and with vertical text inside. | pass | fail | fail | fail | fail | fail | pass | fail |
| writing mode:vertical-rl, textarea placeholder writing-mode-vrl-forms-004-prop.html |
writing-mode:vertical-rl will display a textarea field vertically, and with vertical placeholder text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-rl, select, selected item writing-mode-vrl-forms-005-prop.html |
writing-mode:vertical-rl will display a select box vertically, and the selected item will be displayed vertically. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-rl, select, options writing-mode-vrl-forms-006-prop.html |
writing-mode:vertical-rl will display selection options vertically. | fail | fail | fail | fail | fail | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, vertical lines writing-mode-vrl-table-001.html |
writing-mode:vertical-rl will display a line of text vertically within a table cell. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-rl, table cell order writing-mode-vrl-table-002.html |
writing-mode:vertical-rl will display table columns horizontally, with the top of the table on the right. | pass | pass | pass | pass | pass | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-rl, vertical lines writing-mode-vrl-table-001-prop.html |
writing-mode:vertical-rl will display a line of text vertically within a table cell. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-rl, table cell order writing-mode-vrl-table-002-prop.html |
writing-mode:vertical-rl will display table columns horizontally, with the top of the table on the right. | pass | pass | pass | pass | pass | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, vertical lines writing-mode-vlr-001.html |
writing-mode:vertical-lr will display a line of text vertically. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-lr, line wrap writing-mode-vlr-002.html |
writing-mode:vertical-lr will wrap lines from left to right. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-lr, alignment writing-mode-vlr-003.html |
writing-mode:vertical-lr will cause lines to display from the left side of the enclosing box. | pass | pass | pass | pass | pass | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, vertical lines writing-mode-vlr-001-prop.html |
writing-mode:vertical-lr will display a line of text vertically. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-lr, line wrap writing-mode-vlr-002-prop.html |
writing-mode:vertical-lr will wrap lines from left to right. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-lr, alignment writing-mode-vlr-003-prop.html |
writing-mode:vertical-lr will cause lines to display from the left side of the enclosing box. | pass | pass | pass | pass | pass | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, default Mongolian orientation writing-mode-vlr-005.html |
By default, writing-mode:vertical-lr will display Mongolian characters with the right orientation. | pass | pass | pass | fail | pass | fail | fail | fail |
| writing mode:vertical-lr, Mongolian joining writing-mode-vlr-006.html |
By default, writing-mode:vertical-lr will display Mongolian characters with correct joining behaviour. | pass | pass | pass | fail | pass | fail | fail | fail |
| writing mode:vertical-lr, default Latin orientation writing-mode-vlr-007.html |
By default, writing-mode:vertical-lr will display Latin characters rotated 90° right. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-lr, default Arabic orientation writing-mode-vlr-008.html |
By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-rl, default Arabic direction writing-mode-vlr-009.html |
By default, writing-mode:vertical-lr will display Arabic characters progressing up the page. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-lr, Arabic joining writing-mode-vlr-010.html |
By default, writing-mode:vertical-lr will display Arabic characters using cursive joining. | pass | pass | pass | pass | pass | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, default Mongolian orientation writing-mode-vlr-005-prop.html |
By default, writing-mode:vertical-lr will display Mongolian characters with the right orientation. | pass | pass | pass | fail | pass | pass | - | fail |
| writing mode:vertical-lr, Mongolian joining writing-mode-vlr-006-prop.html |
By default, writing-mode:vertical-lr will display Mongolian characters with correct joining behaviour. | pass | pass | pass | fail | pass | pass | - | fail |
| writing mode:vertical-lr, default Latin orientation writing-mode-vlr-007-prop.html |
By default, writing-mode:vertical-lr will display Latin characters rotated 90° right. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-lr, default Arabic orientation writing-mode-vlr-008-prop.html |
By default, writing-mode:vertical-lr will display Arabic characters rotated 90° right. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-rl, default Arabic direction writing-mode-vlr-009-prop.html |
By default, writing-mode:vertical-lr will display Arabic characters progressing up the page. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-lr, Arabic joining writing-mode-vlr-010-prop.html |
By default, writing-mode:vertical-lr will display Arabic characters using cursive joining. | pass | pass | pass | pass | pass | pass | pass | pass |
Spec links for this table: link
Notes
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, Latin wrapping writing-mode-vlr-012.html |
By default, writing-mode:vertical-lr will wrap Latin text across a line break such that the first word in memory is on the left. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-lr, Arabic wrapping writing-mode-vlr-014.html |
By default, writing-mode:vertical-lr will arrange Arabic text across a line break such that the first word in memory is on the left side of the line break. | pass | pass | pass | pass | pass | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, Latin wrapping writing-mode-vlr-012-prop.html |
By default, writing-mode:vertical-lr will wrap Latin text across a line break such that the first word in memory is on the left. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-lr, Arabic wrapping writing-mode-vlr-014-prop.html |
By default, writing-mode:vertical-lr will arrange Arabic text across a line break such that the first word in memory is on the left side of the line break. | pass | pass | pass | pass | pass | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, image orientation writing-mode-vlr-015.html |
By default, replaced content such as images is displayed upright. | pass | pass | pass | pass | pass | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, image orientation writing-mode-vlr-015-prop.html |
By default, replaced content such as images is displayed upright. | pass | pass | pass | pass | pass | pass | pass | pass |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, input type=text writing-mode-vlr-forms-001.html |
writing-mode:vertical-lr will display an input field for text vertically, and with vertical text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-lr, input type=text placeholder writing-mode-vlr-forms-002.html |
writing-mode:vertical-lr will display an input field for text vertically, and with vertical placeholder text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-lr, textarea writing-mode-vlr-forms-003.html |
writing-mode:vertical-lr will display a textarea field vertically, and with vertical text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-lr, textarea placeholder writing-mode-vlr-forms-004.html |
writing-mode:vertical-lr will display a textarea field vertically, and with vertical placeholder text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-lr, select, selected item writing-mode-vlr-forms-005.html |
writing-mode:vertical-lr will display a select box vertically, and the selected item will be displayed vertically. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-lr, select, options writing-mode-vlr-forms-006.html |
writing-mode:vertical-lr will display selection options vertically. | pass | fail | fail | fail | fail | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, input type=text writing-mode-vlr-forms-001-prop.html |
writing-mode:vertical-lr will display an input field for text vertically, and with vertical text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-lr, input type=text placeholder writing-mode-vlr-forms-002-prop.html |
writing-mode:vertical-lr will display an input field for text vertically, and with vertical placeholder text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-lr, textarea writing-mode-vlr-forms-003-prop.html |
writing-mode:vertical-lr will display a textarea field vertically, and with vertical text inside. | pass | fail | fail | fail | fail | fail | pass | fail |
| writing mode:vertical-lr, textarea placeholder writing-mode-vlr-forms-004-prop.html |
writing-mode:vertical-lr will display a textarea field vertically, and with vertical placeholder text inside. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-lr, select, selected item writing-mode-vlr-forms-005-prop.html |
writing-mode:vertical-lr will display a select box vertically, and the selected item will be displayed vertically. | pass | fail | fail | fail | fail | fail | fail | fail |
| writing mode:vertical-lr, select, options writing-mode-vlr-forms-006-prop.html |
writing-mode:vertical-lr will display selection options vertically. | fail | fail | fail | fail | fail | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, vertical lines writing-mode-vlr-table-001.html |
writing-mode:vertical-lr will display a line of text vertically within a table cell. | pass | pass | pass | pass | pass | fail | fail | fail |
| writing mode:vertical-lr, table cell order writing-mode-vlr-table-002.html |
writing-mode:vertical-lr will display table columns horizontally, with the top of the table on the left. | pass | pass | pass | pass | pass | fail | fail | fail |
Spec links for this table: link
| Links to run tests | Assertions | Gecko Firefox | Blink Chrome | Blink Opera | Webkit Safari | Legacy Edge | IE | Android | UC |
|---|---|---|---|---|---|---|---|---|---|
| writing mode:vertical-lr, vertical lines writing-mode-vlr-table-001-prop.html |
writing-mode:vertical-lr will display a line of text vertically within a table cell. | pass | pass | pass | pass | pass | pass | pass | pass |
| writing mode:vertical-lr, table cell order writing-mode-vlr-table-002-prop.html |
writing-mode:vertical-lr will display table columns horizontally, with the top of the table on the left. | pass | pass | pass | pass | pass | pass | pass | pass |
Spec links for this table: link