menulist-appearance-rtl.html | Explore in Territory

<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
<meta charset="utf-8">
<style>
.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.
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>
<dl>
<dt>1) direction: rtl; -webkit-rtl-ordering: logical
<dd><select class="bidi1"><option>abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</option></select>
<div class="bidi1">abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</div>
<dt>2) text-align: right
<dd><select class="bidi2"><option>abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</option></select>
<div class="bidi2" style="text-align: left">abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</div>
<dt>3) No style
<dd><select class="bidi3"><option>abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</option></select>
<div class="bidi3">abc&#x05d0;&#x05e4;&#x05e8;&#x05e1;&#x05de;&#x05d5;&#x05df;</div>
</dl>

<hr>
<div dir=ltr>The following line and the SELECT element should have same text, and no characters are lacking.
<div style="font:menu">الاقتراحات / الشكاوي</div>
<select>
<option selected value="الاقتراحات / الشكاوي">الاقتراحات / الشكاوي</option>
</select>
</div>

<hr>
<style>
.menu {
  display: block;
  font-size: 16px;
  width: 350px
}
.reflection {
  font: 13px "Lucida Grande";
  padding: 1px;
  width: 350px;
}
</style>
<p>Verify that the alignment and writing direction of each selected item matches
the one below the pop-up button.</p>

<div style="column-count:2">
<div id="left-aligned">
<select class="menu">
<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;">
First שניה (03) רביעית fifth
</div>
</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 leftAligned = document.getElementById("left-aligned");
var cloned = leftAligned.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");
leftAligned.parentNode.appendChild(cloned);

var selectElements = document.getElementsByClassName("menu");
for (var i = 0; i < selectElements.length; ++i) {
    selectElements[i].selectedIndex = i % 4;
}
</script>
chromium/third_party/blink/web_tests/fast/forms/select/menulist-appearance-rtl.html
