| <!DOCTYPE html> |
| <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אפרסמון</option></select> |
| <div class="bidi1">abcאפרסמון</div> |
| <dt>2) text-align: right |
| <dd><select class="bidi2"><option>abcאפרסמון</option></select> |
| <div class="bidi2" style="text-align: left">abcאפרסמון</div> |
| <dt>3) No style |
| <dd><select class="bidi3"><option>abcאפרסמון</option></select> |
| <div class="bidi3">abcאפרסמון</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> |
