69 lines
2.4 KiB
HTML
69 lines
2.4 KiB
HTML
<!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>
|