<style>
@import url(resources/Mac-compatible-font-fallback.css);

.bidi1 {
    direction: rtl; 
    -webkit-rtl-ordering: logical;
    width: 100px;
}
.bidi2 {
    width: 200px;
    text-align: right;
}
.bidi3 {
    width: 100px;
}
</style>
<p>
This tests that bidirectional text is correctly rendered in popup controls.<br>
The order of the text below each popup button should match the order of the select's option text, and the order of the text in the popup menu.
</p>
    1) direction: rtl; -webkit-rtl-ordering: logical<br>
<select class="bidi1"><option>abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</option></select><br>
<div class="bidi1" style="direction: ltr">abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</div><br>
    2) text-align: right<br>
<select class="bidi2"><option>abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</option></select><br>
<div class="bidi2" style="text-align: left">abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</div><br>
    3) No style<br>
<select class="bidi3"><option>abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</option></select><br>
<div class="bidi3">abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</div><br>