Intended audience: users, XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, Web project managers, and anyone who wants to know how language declarations work in current browsers.
These tests check how browser chrome handles bidirectional text in response to code in HTML.
Note that the snapshot summaries of these test results are for released versions of the browsers tested. Versions that are still in development may provide better support for these features. The tests themselves do not test any vendor prefixes.
All tests reported so far have been conducted in an English environment (operating system and browser version).
The tables show results for tests run on the date shown. Above the tables are summaries of the results at that date. The table data may be more up-to-date than the summary. If the tables contain some incorrectly scored tests, or tests that relate to non-released versions of browsers, these are not included in the summary.
To see the test, click on the link in the left-most column. To see detailed results for a single test, click on the link in the right-most column. IE and Opera switch the scrollbar to the other side of the browser window if Links: Section 10.7.4 • Related tests JavaScript was used to pop up a message in the chrome of a dialog box. The tests also check whether the arrangement of items such as icons and buttons has changed in the dialog box. Firefox and Safari behave as expected, ie. the base direction of the text is established according to the first strong character of the text to be displayed, regardless of the directional context of the HTML content. Chrome and Opera simply order the text with a LTR base direction, in all cases. Internet Explorer behaves differently if Internet Explorer changes the direction of the layout of graphic items in the dialogue box, but only when Links: Section 10.7.4 • Related tests JavaScript was used to pop up a message in the chrome of a confirm box. The tests also check whether the arrangement of items such as icons and buttons has changed in the dialog box. The results are the same as for the alert box above. Links: Section 10.7.4 • Related tests JavaScript was used to create a message in the chrome of a prompt box and to provide default input text in the input field of the dialog box. The tests also check whether the arrangement of items such as icons and buttons has changed in the dialog box. With regards to the display of text on the dialog box chrome, the results are the same as for the alert box above, except than putting For the text in the prompt input field, only Chrome and Safari produced the expected result. All other browsers appear to just use a LTR base direction for all cases. No browser changes the layout of the dialog box according to the direction of the HTML. Links: Section 10.7.4 • Related tests Bidirectional text was added to a Firefox, Chrome and Internet Explorer all do what is expected. Safari appears to use the first strong character to determine the base direction. Opera's results are a little harder to understand. Links: Section 10.7.4 • Related tests Bidirectional text was added to a No browser produced the expected results across all tests. Firefox, Chrome, Safari and Opera all appear to use the first strong character to determine the base direction of the text in the window's title area. Internet Explorer appears to use a LTR base direction throughout. Links: Section 10.7.4 • Related tests
Scrollbar alignment
Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0dir="rtl"
is set on either then html
or body
tags. The other browsers show on the usual side.
Test link
Assertion
Details
dir on html, vertical scrollbar alignment
[Exploratory] When the html tag sets dir to rtl, the browser window's vertical scroll bar will be on the usual side of the window.
native-user-interfaces-001
dir on body, vertical scrollbar alignment
[Exploratory] When the body tag sets dir to rtl, the browser window's vertical scroll bar will be on the usual side of the window.
native-user-interfaces-002
Alert box
Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0dir
is set on the html
tag rather than on the body
tag. In the former case, all text is given a RTL base direction. In the latter, it is given a LTR direction. Neither of these approaches provides the expected direction for all cases. dir=rtl
is set on the html
tag (not on body
). None of the other browsers change the dialogue box appearance.
Test link
Assertion
Details
javascript alert box, rtl on html, R
When the html tag sets dir to rtl, text runs in a JavaScript alert box are ordered according to the first strong character. In this case class R.
native-user-interfaces-003
javascript alert box, rtl on html, AL
When the html tag sets dir to rtl, text runs in a JavaScript alert box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-004
javascript alert box, rtl on html, L
When the html tag sets dir to rtl, text runs in a JavaScript alert box are ordered according to the first strong character. In this case class L.
native-user-interfaces-005
javascript alert box, ltr on html, R
When the html tag sets dir to ltr, text runs in a JavaScript alert box are ordered according to the first strong character. In this case class L.
native-user-interfaces-006
javascript alert box, ltr on html, AL
When the html tag sets dir to ltr, text runs in a JavaScript alert box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-007
javascript alert box, rtl on body, R
When the body tag sets dir to rtl, text runs in a JavaScript alert box are ordered according to the first strong character. In this case class R.
native-user-interfaces-008
javascript alert box, rtl on body, AL
When the body tag sets dir to rtl, text runs in a JavaScript alert box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-009
javascript alert box, rtl on body, L
When the body tag sets dir to rtl, text runs in a JavaScript alert box are ordered according to the first strong character. In this case class L.
native-user-interfaces-010
javascript alert box, ltr on body, R
When the body tag sets dir to ltr, text runs in a JavaScript alert box are ordered according to the first strong character. In this case class L.
native-user-interfaces-011
javascript alert box, ltr on body, AL
When the body tag sets dir to ltr, text runs in a JavaScript alert box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-012
rtl on html, javascript alert box layout
[Exploratory] When the html tag sets dir to rtl, the layout of items in the JavaScript alert box has the same direction as usual.
native-user-interfaces-019
rtl on body, javascript alert box layout
[Exploratory] When the body tag sets dir to rtl, the layout of items in the JavaScript alert box has the same direction as usual.
native-user-interfaces-020
Confirm box
Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0
Test link
Assertion
Details
javascript confirm box, rtl on html, R
When the html tag sets dir to rtl, text runs in a JavaScript confirm box are ordered according to the first strong character. In this case class R.
native-user-interfaces-023
javascript confirm box, rtl on html, AL
When the html tag sets dir to rtl, text runs in a JavaScript confirm box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-024
javascript confirm box, rtl on html, L
When the html tag sets dir to rtl, text runs in a JavaScript confirm box are ordered according to the first strong character. In this case class L.
native-user-interfaces-025
javascript confirm box, ltr on html, R
When the html tag sets dir to ltr, text runs in a JavaScript confirm box are ordered according to the first strong character. In this case class L.
native-user-interfaces-026
javascript confirm box, ltr on html, AL
When the html tag sets dir to ltr, text runs in a JavaScript confirm box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-027
javascript confirm box, rtl on body, R
When the body tag sets dir to rtl, text runs in a JavaScript confirm box are ordered according to the first strong character. In this case class R.
native-user-interfaces-028
javascript confirm box, rtl on body, AL
When the body tag sets dir to rtl, text runs in a JavaScript confirm box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-029
javascript confirm box, rtl on body, L
When the body tag sets dir to rtl, text runs in a JavaScript confirm box are ordered according to the first strong character. In this case class L.
native-user-interfaces-030
javascript confirm box, ltr on body, R
When the body tag sets dir to ltr, text runs in a JavaScript confirm box are ordered according to the first strong character. In this case class L.
native-user-interfaces-031
javascript confirm box, ltr on body, AL
When the body tag sets dir to ltr, text runs in a JavaScript confirm box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-032
rtl on html, javascript confirm box layout
[Exploratory] When the html tag sets dir to rtl, the layout of items in the JavaScript confirm box has the same direction as usual.
native-user-interfaces-039
rtl on body, javascript confirm box layout
[Exploratory] When the body tag sets dir to rtl, the layout of items in the JavaScript confirm box has the same direction as usual.
native-user-interfaces-040
Prompt box
Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0dir
on the html
tag made no difference in Internet Explorer.
Test link
Assertion
Details
javascript prompt box, rtl on html, R
When the html tag sets dir to rtl, text runs in the chrome of a JavaScript prompt box are ordered according to the first strong character. In this case class R.
native-user-interfaces-043
javascript prompt box, rtl on html, AL
When the html tag sets dir to rtl, text runs in the chrome of a JavaScript prompt box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-044
javascript prompt box, rtl on html, L
When the html tag sets dir to rtl, text runs in the chrome of a JavaScript prompt box are ordered according to the first strong character. In this case class L.
native-user-interfaces-045
javascript prompt box, ltr on html, R
When the html tag sets dir to ltr, text runs in the chrome of a JavaScript prompt box are ordered according to the first strong character. In this case class L.
native-user-interfaces-046
javascript prompt box, ltr on html, AL
When the html tag sets dir to ltr, text runs in the chrome of a JavaScript prompt box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-047
javascript prompt box, rtl on body, R
When the body tag sets dir to rtl, text runs in the chrome of a JavaScript prompt box are ordered according to the first strong character. In this case class R.
native-user-interfaces-048
javascript prompt box, rtl on body, AL
When the body tag sets dir to rtl, text runs in the chrome of a JavaScript prompt box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-049
javascript prompt box, rtl on body, L
When the body tag sets dir to rtl, text runs in the chrome of a JavaScript prompt box are ordered according to the first strong character. In this case class L.
native-user-interfaces-050
javascript prompt box, ltr on body, R
When the body tag sets dir to ltr, text runs in the chrome of a JavaScript prompt box are ordered according to the first strong character. In this case class L.
native-user-interfaces-051
javascript prompt box, ltr on body, AL
When the body tag sets dir to ltr, text runs in the chrome of a JavaScript prompt box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-052
javascript prompt box, rtl on html, R
When the html tag sets dir to rtl, text runs in the input field of a JavaScript prompt box are ordered according to the first strong character. In this case class R.
native-user-interfaces-059
javascript prompt box, rtl on html, AL
When the html tag sets dir to rtl, text runs in the input field of a JavaScript prompt box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-060
javascript prompt box, rtl on html, L
When the html tag sets dir to rtl, text runs in the input field of a JavaScript prompt box are ordered according to the first strong character. In this case class L.
native-user-interfaces-061
javascript prompt box, ltr on html, R
When the html tag sets dir to ltr, text runs in the input field of a JavaScript prompt box are ordered according to the first strong character. In this case class L.
native-user-interfaces-062
javascript prompt box, ltr on html, AL
When the html tag sets dir to ltr, text runs in the input field of a JavaScript prompt box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-063
javascript prompt box, rtl on body, R
When the body tag sets dir to rtl, text runs in the input field of a JavaScript prompt box are ordered according to the first strong character. In this case class R.
native-user-interfaces-064
javascript prompt box, rtl on body, AL
When the body tag sets dir to rtl, text runs in the input field of a JavaScript prompt box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-065
javascript prompt box, rtl on body, L
When the body tag sets dir to rtl, text runs in the input field of a JavaScript prompt box are ordered according to the first strong character. In this case class L.
native-user-interfaces-066
javascript prompt box, ltr on body, R
When the body tag sets dir to ltr, text runs in the input field of a JavaScript prompt box are ordered according to the first strong character. In this case class L.
native-user-interfaces-067
javascript prompt box, ltr on body, AL
When the body tag sets dir to ltr, text runs in the input field of a JavaScript prompt box are ordered according to the first strong character. In this case class AL.
native-user-interfaces-068
rtl on html, javascript prompt box layout
[Exploratory] When the html tag sets dir to rtl, the layout of items in the JavaScript prompt box has the same direction as usual.
native-user-interfaces-074
rtl on body, javascript prompt box layout
[Exploratory] When the body tag sets dir to rtl, the layout of items in the JavaScript prompt box has the same direction as usual.
native-user-interfaces-075
Tooltips
Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0title
attribute. The expectation is that the text, when shown in a tooltip, will use the base direction of the element in the HTML with the attribute.
Test link
Assertion
Details
tooltips, rtl, R
When an element sets dir to rtl, text runs in a tooltip are ordered according to the direction of the element from which is was obtained. In this case the class of the first character is R.
native-user-interfaces-080
tooltips, rtl, AL
When an element sets dir to rtl, text runs in a tooltip are ordered according to the direction of the element from which is was obtained. In this case the class of the first character is AL.
native-user-interfaces-081
tooltips, rtl, L
When an element sets dir to rtl, text runs in a tooltip are ordered according to the direction of the element from which is was obtained. In this case the class of the first character is L.
native-user-interfaces-082
tooltips, ltr, R
When an element sets dir to ltr, text runs in a tooltip are ordered according to the direction of the element from which is was obtained. In this case the class of the first character is R.
native-user-interfaces-083
tooltips, ltr, AL
When an element sets dir to ltr, text runs in a tooltip are ordered according to the direction of the element from which is was obtained. In this case the class of the first character is AL.
native-user-interfaces-084
Page title
Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0title
element. The expectation is that the text, when shown in the window header or tab, will use the base direction of the title
element in the HTML.
Test link
Assertion
Details
rtl html, page title R
When the html tag sets dir to rtl, text in the window header has the same directionality as the title element. Here the title element starts with an R character.
native-user-interfaces-090
rtl html, page title AL
When the html tag sets dir to rtl, text in the window header has the same directionality as the title element. Here the title element starts with an AL character.
native-user-interfaces-091
rtl html, page title L
When the html tag sets dir to rtl, text in the window header has the same directionality as the title element. Here the title element starts with an L character.
native-user-interfaces-092
ltr html, page title R
When the html tag sets dir to ltr, text in the window header has the same directionality as the title element. Here the title element starts with an R character.
native-user-interfaces-093
ltr html, page title AL
When the html tag sets dir to ltr, text in the window header has the same directionality as the title element. Here the title element starts with an AL character.
native-user-interfaces-094