Summarized test results:
HTML5, native user interfaces

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.

Updated

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.

results

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.

Scrollbar alignment

Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0

IE and Opera switch the scrollbar to the other side of the browser window if dir="rtl" is set on either then html or body tags. The other browsers show on the usual side.

Assertion Firefox Chrome Safari Opera IE Detailed results
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.
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.

Alert box

Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0

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 dir 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.

Internet Explorer changes the direction of the layout of graphic items in the dialogue box, but only when dir=rtl is set on the html tag (not on body ). None of the other browsers change the dialogue box appearance.

Assertion Firefox Chrome Safari Opera IE Detailed results
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.

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

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.

Assertion Firefox Chrome Safari Opera IE Detailed results
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.

Prompt box

Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0

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 dir on the html tag made no difference in Internet Explorer.

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.

Assertion Firefox Chrome Safari Opera IE Detailed results
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.

Tooltips

Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0

Bidirectional text was added to a title 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.

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.

Assertion Firefox Chrome Safari Opera IE Detailed results
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.
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.
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.
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.
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.

Page title

Snapshot summary, 2014-02-17
Firefox 27.0, Chrome 32.0.1700.107, Safari 6.1.1, Internet Explorer 9, Opera 19.0

Bidirectional text was added to a title 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.

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.

Assertion Firefox Chrome Safari Opera IE Detailed results
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.
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.
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.
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.
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.