LayoutTests/fast/forms/listbox-bidi-align.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 This test verifies the visual alignment of items in a select element while changing text direction.<br>
 All the items in the following select elements should be left-aligned.
 <table>
 	<tr>
 		<td><select size=3 dir=ltr>
 		<option>This is an English text</option>
 		<option>It needs to be left aligned</option>
 		<option>Some more text</option>
 		</select></td>

 		<td><select size=3 dir=ltr>
 		<option>זה טקסט בעברית</option>
 		<option>הוא צריך להיות מיושר לשמאל</option>
 		<option>ישראל מתייבשת</option>
 		</select></td>

 		<td><select size=3 dir=rtl style="text-align:left;">
 		<option>This is an English text</option>
 		<option>It needs to be left aligned</option>
 		<option>Some more text</option>
 		</select></td>

 		<td><select size=3 dir=rtl style="text-align:left;">
 		<option>זה טקסט בעברית</option>
 		<option>הוא צריך להיות מיושר לשמאל</option>
 		<option>ישראל מתייבשת</option>
 		</select></td>
 	</tr>
 	<tr>
 		<td><select size=3 dir=ltr style="text-align:left;">
 		<option>This is an English text</option>
 		<option>It needs to be left aligned</option>
 		<option>Some more text</option>
 		</select></td>

 		<td><select size=3 dir=ltr style="text-align:left;">
 		<option>זה טקסט בעברית</option>
 		<option>הוא צריך להיות מיושר לשמאל</option>
 		<option>ישראל מתייבשת</option>
 		</select></td>
 	</tr>
 </table>
 All the items in the following select elements should be right-aligned.
 <table>
 	<tr>
 		<td><select size=3 dir=rtl>
 		<option>This is an English text</option>
 		<option>It needs to be right aligned</option>
 		<option>Some more text</option>
 		</select></td>

 		<td><select size=3 dir=rtl>
 		<option>זה טקסט בעברית</option>
 		<option>הוא צריך להיות מיושר לימין</option>
 		<option>ישראל מתייבשת</option>
 		</select></td>

 		<td><select size=3 dir=rtl style="text-align:right;">
 		<option>This is an English text</option>
 		<option>It needs to be right aligned</option>
 		<option>Some more text</option>
 		</select></td>

 		<td><select size=3 dir=rtl style="text-align:right;">
 		<option>זה טקסט בעברית</option>
 		<option>הוא צריך להיות מיושר לימין </option>
 		<option>ישראל מתייבשת</option>
 		</select></td>
 	</tr>
 	<tr>
 		<td><select size=3 dir=ltr style="text-align:right;">
 		<option>This is an English text</option>
 		<option>It needs to be right aligned</option>
 		<option>Some more text</option>
 		</select></td>

 		<td><select size=3 dir=ltr style="text-align:right;">
 		<option>זה טקסט בעברית</option>
 		<option>הוא צריך להיות מיושר לימין </option>
 		<option>ישראל מתייבשת</option>
 		</select></td>
 	</tr>
 </table>
 All the items in the following select elements should be center-aligned.
 <table>
 	<tr>
 		<td><select size=3 dir=rtl style="text-align:center;">
 		<option>This is an English text</option>
 		<option>It needs to be center aligned</option>
 		<option>Some more text</option>
 		</select></td>

 		<td><select size=3 dir=rtl style="text-align:center;">
 		<option>זה טקסט בעברית</option>
 		<option>הוא צריך להיות מיושר לאמצע</option>
 		<option>ישראל מתייבשת</option>
 		</select></td>

 		<td><select size=3 dir=ltr style="text-align:center;">
 		<option>This is an English text</option>
 		<option>It needs to be center aligned</option>
 		<option>Some more text</option>
 		</select></td>

 		<td><select size=3 dir=ltr style="text-align:center;">
 		<option>זה טקסט בעברית</option>
 		<option>הוא צריך להיות מיושר לאמצע </option>
 		<option>ישראל מתייבשת</option>
 		</select></td>
 	</tr>
 </table>
 The following tables check mixed alignments.
 <table>
 	<tr>
 		<td><select size=3 dir=rtl>
 		<option>This should be right aligned</option>
 		<option dir=ltr>This should be left aligned</option>
 		<option style="text-align:center">Center aligned</option>
 		</select></td>

 		<td><select size=3>
 		<option>This should be left aligned</option>
 		<option dir=rtl>This should be right aligned</option>
 		<option style="text-align:center">Center aligned</option>
 		</select></td>

 		<td><select size=3 dir=rtl>
 		<option>טקסט זה צריך להיות מיושר לימין</option>
 		<option dir=ltr>טקסט זה צריך להיות מיושר לשמאל</option>
 		<option style="text-align:center">טקסט ממורכז</option>
 		</select></td>

 		<td><select size=3>
 		<option>טקסט זה צריך להיות מיושר לשמאל</option>
 		<option dir=rtl>טקסט זה צריך להיות מיושר לימין</option>
 		<option style="text-align:center">טקסט ממורכז</option>
 		</select></td>
 	</tr>
 </table>
 </body>
 </html>
	<!DOCTYPE html>
	<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>
	<body>
	This test verifies the visual alignment of items in a select element while changing text direction.<br>
	All the items in the following select elements should be left-aligned.
	<table>
	<tr>
	<td><select size=3 dir=ltr>
	<option>This is an English text</option>
	<option>It needs to be left aligned</option>
	<option>Some more text</option>
	</select></td>

	<td><select size=3 dir=ltr>
	<option>זה טקסט בעברית</option>
	<option>הוא צריך להיות מיושר לשמאל</option>
	<option>ישראל מתייבשת</option>
	</select></td>

	<td><select size=3 dir=rtl style="text-align:left;">
	<option>This is an English text</option>
	<option>It needs to be left aligned</option>
	<option>Some more text</option>
	</select></td>

	<td><select size=3 dir=rtl style="text-align:left;">
	<option>זה טקסט בעברית</option>
	<option>הוא צריך להיות מיושר לשמאל</option>
	<option>ישראל מתייבשת</option>
	</select></td>
	</tr>
	<tr>
	<td><select size=3 dir=ltr style="text-align:left;">
	<option>This is an English text</option>
	<option>It needs to be left aligned</option>
	<option>Some more text</option>
	</select></td>

	<td><select size=3 dir=ltr style="text-align:left;">
	<option>זה טקסט בעברית</option>
	<option>הוא צריך להיות מיושר לשמאל</option>
	<option>ישראל מתייבשת</option>
	</select></td>
	</tr>
	</table>
	All the items in the following select elements should be right-aligned.
	<table>
	<tr>
	<td><select size=3 dir=rtl>
	<option>This is an English text</option>
	<option>It needs to be right aligned</option>
	<option>Some more text</option>
	</select></td>

	<td><select size=3 dir=rtl>
	<option>זה טקסט בעברית</option>
	<option>הוא צריך להיות מיושר לימין</option>
	<option>ישראל מתייבשת</option>
	</select></td>

	<td><select size=3 dir=rtl style="text-align:right;">
	<option>This is an English text</option>
	<option>It needs to be right aligned</option>
	<option>Some more text</option>
	</select></td>

	<td><select size=3 dir=rtl style="text-align:right;">
	<option>זה טקסט בעברית</option>
	<option>הוא צריך להיות מיושר לימין </option>
	<option>ישראל מתייבשת</option>
	</select></td>
	</tr>
	<tr>
	<td><select size=3 dir=ltr style="text-align:right;">
	<option>This is an English text</option>
	<option>It needs to be right aligned</option>
	<option>Some more text</option>
	</select></td>

	<td><select size=3 dir=ltr style="text-align:right;">
	<option>זה טקסט בעברית</option>
	<option>הוא צריך להיות מיושר לימין </option>
	<option>ישראל מתייבשת</option>
	</select></td>
	</tr>
	</table>
	All the items in the following select elements should be center-aligned.
	<table>
	<tr>
	<td><select size=3 dir=rtl style="text-align:center;">
	<option>This is an English text</option>
	<option>It needs to be center aligned</option>
	<option>Some more text</option>
	</select></td>

	<td><select size=3 dir=rtl style="text-align:center;">
	<option>זה טקסט בעברית</option>
	<option>הוא צריך להיות מיושר לאמצע</option>
	<option>ישראל מתייבשת</option>
	</select></td>

	<td><select size=3 dir=ltr style="text-align:center;">
	<option>This is an English text</option>
	<option>It needs to be center aligned</option>
	<option>Some more text</option>
	</select></td>

	<td><select size=3 dir=ltr style="text-align:center;">
	<option>זה טקסט בעברית</option>
	<option>הוא צריך להיות מיושר לאמצע </option>
	<option>ישראל מתייבשת</option>
	</select></td>
	</tr>
	</table>
	The following tables check mixed alignments.
	<table>
	<tr>
	<td><select size=3 dir=rtl>
	<option>This should be right aligned</option>
	<option dir=ltr>This should be left aligned</option>
	<option style="text-align:center">Center aligned</option>
	</select></td>

	<td><select size=3>
	<option>This should be left aligned</option>
	<option dir=rtl>This should be right aligned</option>
	<option style="text-align:center">Center aligned</option>
	</select></td>

	<td><select size=3 dir=rtl>
	<option>טקסט זה צריך להיות מיושר לימין</option>
	<option dir=ltr>טקסט זה צריך להיות מיושר לשמאל</option>
	<option style="text-align:center">טקסט ממורכז</option>
	</select></td>

	<td><select size=3>
	<option>טקסט זה צריך להיות מיושר לשמאל</option>
	<option dir=rtl>טקסט זה צריך להיות מיושר לימין</option>
	<option style="text-align:center">טקסט ממורכז</option>
	</select></td>
	</tr>
	</table>
	</body>
	</html>