1<style>
2    select { display: block; font-size: 16px; }
3    label { display: block; font: 13px "Lucida Grande"; }
4    #reflection { font: 13px "Lucida Grande"; padding: 10px; width: 245px; }
5</style>
6
7<p>
8    For each of the direction settings below, and for each item in the pop-up menu below, verify that
9    the alignment and content match between the pop-up button, the menu item, and the value as it is
10    reflected below the pop-up button, and that the checkmarks appear on the start side of the item.
11</p>
12
13<label><input type="radio" name="direction" value="ltr" checked onchange="directionChanged(event)"> Left to right</label>
14<label><input type="radio" name="direction" value="rtl" onchange="directionChanged(event)"> Right to left</label>
15
16<select id="menu">
17    <option style="direction: ltr;">
18        First שניה (03) רביעית fifth
19    </option>
20    <option style="direction: rtl;">
21        First שניה (03) רביעית fifth
22    </option>
23    <option style="direction: ltr; unicode-bidi: bidi-override;">
24        First שניה (03) רביעית fifth
25    </option>
26    <option style="direction: rtl; unicode-bidi: bidi-override;">
27        First שניה (03) רביעית fifth
28    </option>
29    <option>
30        משהו עם נִקּוּד
31    </option>
32    <option>
33        اللغة العربية
34    </option>
35    <option>
36        Et volia&#x0300: ATSUI!
37    </option>
38    <option>
39        Directional &#x202e;overrides&#x202c; are confusing.
40    </option>
41    <option>
42        She said &ldquo;&#x202b;יש TNT במזוודה!&#x202c;&rdquo; and ran off
43    </option>
44</select>
45<div id="reflection">
46    First שניה (03) רביעית fifth
47</div>
48<script>
49    var reflection = document.getElementById("reflection");
50
51    document.getElementById("menu").onchange = function(event) {
52        var option = event.target.item(event.target.selectedIndex);
53        reflection.innerHTML = option.innerHTML;
54        optionStyle = getComputedStyle(option);
55        reflection.style.direction = optionStyle.direction;
56        reflection.style.unicodeBidi = optionStyle.unicodeBidi;
57        reflection.style.textAlign = getComputedStyle(event.target).direction === "ltr" ? "left" : "right";
58    }
59
60    function directionChanged(event)
61    {
62        document.getElementById('menu').style.direction = event.target.value;
63        reflection.style.textAlign = event.target.value === "ltr" ? "left" : "right";
64    }
65</script>
66