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.

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

Links: Section 10.7.4 • Related tests

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.

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

Links: Section 10.7.4 • Related tests

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.

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

Links: Section 10.7.4 • Related tests

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.

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

Links: Section 10.7.4 • Related tests

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.

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

Links: Section 10.7.4 • Related tests

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.

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

Links: Section 10.7.4 • Related tests