<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
   select { display: block; font-size: 16px; }
   .reflection { font: 13px "Lucida Grande"; padding: 10px; width: 245px; }
</style>
</head>
<body>
<p>
    Verify that the alignment and writing direction of each selected item matches
    the one below the pop-up button.
</p>

<div id="left-aligned">
    <select class="menu" style="width:500px">
        <option style="direction: ltr;">
            First שניה (03) רביעית fifth
        </option>
        <option style="direction: rtl;">
            First שניה (03) רביעית fifth
        </option>
        <option style="direction: ltr; unicode-bidi: bidi-override;">
            First שניה (03) רביעית fifth
        </option>
        <option style="direction: rtl; unicode-bidi: bidi-override;">
            First שניה (03) רביעית fifth
        </option>
    </select>
    <div class="reflection" style="direction:ltr; width:450px">
            First שניה (03) רביעית fifth
    </div>
</div>

<script>
    // Clone 3 left-aligned <select>.
    var select = document.getElementsByClassName("menu")[0];
    var div = document.getElementsByClassName("reflection")[0];
    for (var i = 1; i < 4; ++i) {
        var clonedSelect = select.cloneNode(true);
        var clonedDiv = div.cloneNode(true);
        var optionStyle = getComputedStyle(select.options[i]);
        clonedDiv.style.direction = optionStyle.direction;
        clonedDiv.style.unicodeBidi = optionStyle.unicodeBidi;
        clonedDiv.style.textAlign = "left";
        document.getElementById("left-aligned").appendChild(clonedSelect);
        document.getElementById("left-aligned").appendChild(clonedDiv);
    }

    // Clone 4 right-aligned <select>.
    var cloned = document.getElementById("left-aligned").cloneNode(true);
    for (var child = cloned.firstChild; child; child = child.nextSibling) {
        if (child.tagName == "SELECT") 
            child.style.direction = "rtl";
        if (child.tagName == "DIV") 
            child.style.textAlign = "right";
    }
    cloned.setAttribute("id", "right-aligned");
    document.body.appendChild(cloned);

    var selectElements = document.getElementsByClassName("menu");
    for (var i = 0; i < selectElements.length; ++i) {
        document.body.offsetTop; // Force layout
        selectElements[i].selectedIndex = i % 4;
    }
</script>
</body>