third_party/WebKit/LayoutTests/fast/forms/listbox-bidi-align.html

   1 <!DOCTYPE html>
   2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   3 </head>
   4 <body style="overflow: hidden;">
   5 This test verifies the visual alignment of items in a select element while changing text direction.<br>
   6 All the items in the following select elements should be left-aligned.
   7 <table>
   8         <tr>
   9                 <td><select size=3 dir=ltr>
  10                 <option>This is an English text</option>
  11                 <option>It needs to be left aligned</option>
  12                 <option>Some more text</option>
  13                 </select></td>
  14
  15                 <td><select size=3 dir=ltr>
  16                 <option>זה טקסט בעברית</option>
  17                 <option>הוא צריך להיות מיושר לשמאל</option>
  18                 <option>ישראל מתייבשת</option>
  19                 </select></td>
  20
  21                 <td><select size=3 dir=rtl style="text-align:left;">
  22                 <option>This is an English text</option>
  23                 <option>It needs to be left aligned</option>
  24                 <option>Some more text</option>
  25                 </select></td>
  26
  27                 <td><select size=3 dir=rtl style="text-align:left;">
  28                 <option>זה טקסט בעברית</option>
  29                 <option>הוא צריך להיות מיושר לשמאל</option>
  30                 <option>ישראל מתייבשת</option>
  31                 </select></td>
  32         </tr>
  33         <tr>
  34                 <td><select size=3 dir=ltr style="text-align:left;">
  35                 <option>This is an English text</option>
  36                 <option>It needs to be left aligned</option>
  37                 <option>Some more text</option>
  38                 </select></td>
  39
  40                 <td><select size=3 dir=ltr style="text-align:left;">
  41                 <option>זה טקסט בעברית</option>
  42                 <option>הוא צריך להיות מיושר לשמאל</option>
  43                 <option>ישראל מתייבשת</option>
  44                 </select></td>
  45         </tr>
  46 </table>
  47 All the items in the following select elements should be right-aligned.
  48 <table>
  49         <tr>
  50                 <td><select size=3 dir=rtl>
  51                 <option>This is an English text</option>
  52                 <option>It needs to be right aligned</option>
  53                 <option>Some more text</option>
  54                 </select></td>
  55
  56                 <td><select size=3 dir=rtl>
  57                 <option>זה טקסט בעברית</option>
  58                 <option>הוא צריך להיות מיושר לימין</option>
  59                 <option>ישראל מתייבשת</option>
  60                 </select></td>
  61
  62                 <td><select size=3 dir=rtl style="text-align:right;">
  63                 <option>This is an English text</option>
  64                 <option>It needs to be right aligned</option>
  65                 <option>Some more text</option>
  66                 </select></td>
  67
  68                 <td><select size=3 dir=rtl style="text-align:right;">
  69                 <option>זה טקסט בעברית</option>
  70                 <option>הוא צריך להיות מיושר לימין </option>
  71                 <option>ישראל מתייבשת</option>
  72                 </select></td>
  73         </tr>
  74         <tr>
  75                 <td><select size=3 dir=ltr style="text-align:right;">
  76                 <option>This is an English text</option>
  77                 <option>It needs to be right aligned</option>
  78                 <option>Some more text</option>
  79                 </select></td>
  80
  81                 <td><select size=3 dir=ltr style="text-align:right;">
  82                 <option>זה טקסט בעברית</option>
  83                 <option>הוא צריך להיות מיושר לימין </option>
  84                 <option>ישראל מתייבשת</option>
  85                 </select></td>
  86         </tr>
  87 </table>
  88 All the items in the following select elements should be center-aligned.
  89 <table>
  90         <tr>
  91                 <td><select size=3 dir=rtl style="text-align:center;">
  92                 <option>This is an English text</option>
  93                 <option>It needs to be center aligned</option>
  94                 <option>Some more text</option>
  95                 </select></td>
  96
  97                 <td><select size=3 dir=rtl style="text-align:center;">
  98                 <option>זה טקסט בעברית</option>
  99                 <option>הוא צריך להיות מיושר לאמצע</option>
 100                 <option>ישראל מתייבשת</option>
 101                 </select></td>
 102
 103                 <td><select size=3 dir=ltr style="text-align:center;">
 104                 <option>This is an English text</option>
 105                 <option>It needs to be center aligned</option>
 106                 <option>Some more text</option>
 107                 </select></td>
 108
 109                 <td><select size=3 dir=ltr style="text-align:center;">
 110                 <option>זה טקסט בעברית</option>
 111                 <option>הוא צריך להיות מיושר לאמצע </option>
 112                 <option>ישראל מתייבשת</option>
 113                 </select></td>
 114         </tr>
 115 </table>
 116 The following tables check mixed alignments.
 117 <table>
 118         <tr>
 119                 <td><select size=3 dir=rtl>
 120                 <option>This should be right aligned</option>
 121                 <option dir=ltr>This should be left aligned</option>
 122                 <option style="text-align:center">Center aligned</option>
 123                 </select></td>
 124
 125                 <td><select size=3>
 126                 <option>This should be left aligned</option>
 127                 <option dir=rtl>This should be right aligned</option>
 128                 <option style="text-align:center">Center aligned</option>
 129                 </select></td>
 130
 131                 <td><select size=3 dir=rtl>
 132                 <option>טקסט זה צריך להיות מיושר לימין</option>
 133                 <option dir=ltr>טקסט זה צריך להיות מיושר לשמאל</option>
 134                 <option style="text-align:center">טקסט ממורכז</option>
 135                 </select></td>
 136
 137                 <td><select size=3>
 138                 <option>טקסט זה צריך להיות מיושר לשמאל</option>
 139                 <option dir=rtl>טקסט זה צריך להיות מיושר לימין</option>
 140                 <option style="text-align:center">טקסט ממורכז</option>
 141                 </select></td>
 142         </tr>
 143 </table>
 144 </body>
 145 </html>