summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/forms/select/listbox-bidi-align.html
blob: 5973e1eca3f62c4778eb214af1e104bbd69c4889 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="overflow: hidden;">
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>