LayoutTests/fast/html/details-writing-mode.html

   1 <style>
   2 td {
   3   border: 1px solid black;
   4   width: 120px;
   5   height: 120px;
   6 }
   7 td div {
   8     height: 100%;
   9     width: 100%;
  10 }
  11 th {
  12     padding: 5px;
  13 }
  14 </style>
  15
  16
  17 <table border="1">
  18     <tr><th colspan="6">text-align not specified</th></tr>
  19     <tr><th colspan="2" rowspan="2">&nbsp;</th><th colspan="4">-webkit-writing-mode</th></tr>
  20     <tr><th>horizontal-tb</th><th>horizontal-bt</th><th>vertical-lr</th><th>vertical-rl</th></tr>
  21     <tr>
  22         <th rowspan="4">direction</th>
  23         <th>ltr</th>
  24         <td>
  25             <div style="-webkit-writing-mode:horizontal-tb; direction:ltr">
  26                 <details><summary>summary</summary></details>
  27                 <details open><summary>summary</summary></details>
  28             </div>
  29         </td>
  30         <td>
  31             <div style="-webkit-writing-mode:horizontal-bt; direction:ltr">
  32                 <details><summary>summary</summary></details>
  33                 <details open><summary>summary</summary></details>
  34             </div>
  35         </td>
  36         <td>
  37             <div style="-webkit-writing-mode:vertical-lr; direction:ltr">
  38                 <details><summary>summary</summary></details>
  39                 <details open><summary>summary</summary></details>
  40             </div>
  41         </td>
  42         <td>
  43             <div style="-webkit-writing-mode:vertical-rl; direction:ltr">
  44                 <details><summary>summary</summary></details>
  45                 <details open><summary>summary</summary></details>
  46             </div>
  47         </td>
  48     </tr>
  49     <tr>
  50         <th>rtl</th>
  51         <td>
  52             <div style="-webkit-writing-mode:horizontal-tb; direction:rtl">
  53                 <details><summary>summary</summary></details>
  54                 <details open><summary>summary</summary></details>
  55             </div>
  56         </td>
  57         <td>
  58             <div style="-webkit-writing-mode:horizontal-bt; direction:rtl">
  59                 <details><summary>summary</summary></details>
  60                 <details open><summary>summary</summary></details>
  61             </div>
  62         </td>
  63         <td>
  64             <div style="-webkit-writing-mode:vertical-lr; direction:rtl">
  65                 <details><summary>summary</summary></details>
  66                 <details open><summary>summary</summary></details>
  67             </div>
  68         </td>
  69         <td>
  70             <div style="-webkit-writing-mode:vertical-rl; direction:rtl">
  71                 <details><summary>summary</summary></details>
  72                 <details open><summary>summary</summary></details>
  73             </div>
  74         </td>
  75     </tr>
  76 </table>
  77
  78 <br>
  79 <table border="1">
  80     <tr><th colspan="6">text-align: left</th></tr>
  81     <tr><th colspan="2" rowspan="2">&nbsp;</th><th colspan="4">-webkit-writing-mode</th></tr>
  82     <tr><th>horizontal-tb</th><th>horizontal-bt</th><th>vertical-lr</th><th>vertical-rl</th></tr>
  83     <tr>
  84         <th rowspan="4">direction</th>
  85         <th>ltr</th>
  86         <td>
  87             <div style="-webkit-writing-mode:horizontal-tb; direction:ltr">
  88                 <details style="text-align:left"><summary>summary</summary></details>
  89                 <details style="text-align:left" open><summary>summary</summary></details>
  90             </div>
  91         </td>
  92         <td>
  93             <div style="-webkit-writing-mode:horizontal-bt; direction:ltr">
  94                 <details style="text-align:left"><summary>summary</summary></details>
  95                 <details style="text-align:left" open><summary>summary</summary></details>
  96             </div>
  97         </td>
  98         <td>
  99             <div style="-webkit-writing-mode:vertical-lr; direction:ltr">
 100                 <details style="text-align:left"><summary>summary</summary></details>
 101                 <details style="text-align:left" open><summary>summary</summary></details>
 102             </div>
 103         </td>
 104         <td>
 105             <div style="-webkit-writing-mode:vertical-rl; direction:ltr">
 106                 <details style="text-align:left"><summary>summary</summary></details>
 107                 <details style="text-align:left" open><summary>summary</summary></details>
 108             </div>
 109         </td>
 110     </tr>
 111     <tr>
 112         <th>rtl</th>
 113         <td>
 114             <div style="-webkit-writing-mode:horizontal-tb; direction:rtl">
 115                 <details style="text-align:left"><summary>summary</summary></details>
 116                 <details style="text-align:left" open><summary>summary</summary></details>
 117             </div>
 118         </td>
 119         <td>
 120             <div style="-webkit-writing-mode:horizontal-bt; direction:rtl">
 121                 <details style="text-align:left"><summary>summary</summary></details>
 122                 <details style="text-align:left" open><summary>summary</summary></details>
 123             </div>
 124         </td>
 125         <td>
 126             <div style="-webkit-writing-mode:vertical-lr; direction:rtl">
 127                 <details style="text-align:left"><summary>summary</summary></details>
 128                 <details style="text-align:left" open><summary>summary</summary></details>
 129             </div>
 130         </td>
 131         <td>
 132             <div style="-webkit-writing-mode:vertical-rl; direction:rtl">
 133                 <details style="text-align:left"><summary>summary</summary></details>
 134                 <details style="text-align:left" open><summary>summary</summary></details>
 135             </div>
 136         </td>
 137     </tr>
 138 </table>
 139
 140
 141 <br>
 142 <table border="1">
 143     <tr><th colspan="6">text-align: center</th></tr>
 144     <tr><th colspan="2" rowspan="2">&nbsp;</th><th colspan="4">-webkit-writing-mode</th></tr>
 145     <tr><th>horizontal-tb</th><th>horizontal-bt</th><th>vertical-lr</th><th>vertical-rl</th></tr>
 146     <tr>
 147         <th rowspan="4">direction</th>
 148         <th>ltr</th>
 149         <td>
 150             <div style="-webkit-writing-mode:horizontal-tb; direction:ltr">
 151                 <details style="text-align:center"><summary>summary</summary></details>
 152                 <details style="text-align:center" open><summary>summary</summary></details>
 153             </div>
 154         </td>
 155         <td>
 156             <div style="-webkit-writing-mode:horizontal-bt; direction:ltr">
 157                 <details style="text-align:center"><summary>summary</summary></details>
 158                 <details style="text-align:center" open><summary>summary</summary></details>
 159             </div>
 160         </td>
 161         <td>
 162             <div style="-webkit-writing-mode:vertical-lr; direction:ltr">
 163                 <details style="text-align:center"><summary>summary</summary></details>
 164                 <details style="text-align:center" open><summary>summary</summary></details>
 165             </div>
 166         </td>
 167         <td>
 168             <div style="-webkit-writing-mode:vertical-rl; direction:ltr">
 169                 <details style="text-align:center"><summary>summary</summary></details>
 170                 <details style="text-align:center" open><summary>summary</summary></details>
 171             </div>
 172         </td>
 173     </tr>
 174     <tr>
 175         <th>rtl</th>
 176         <td>
 177             <div style="-webkit-writing-mode:horizontal-tb; direction:rtl">
 178                 <details style="text-align:center"><summary>summary</summary></details>
 179                 <details style="text-align:center" open><summary>summary</summary></details>
 180             </div>
 181         </td>
 182         <td>
 183             <div style="-webkit-writing-mode:horizontal-bt; direction:rtl">
 184                 <details style="text-align:center"><summary>summary</summary></details>
 185                 <details style="text-align:center" open><summary>summary</summary></details>
 186             </div>
 187         </td>
 188         <td>
 189             <div style="-webkit-writing-mode:vertical-lr; direction:rtl">
 190                 <details style="text-align:center"><summary>summary</summary></details>
 191                 <details style="text-align:center" open><summary>summary</summary></details>
 192             </div>
 193         </td>
 194         <td>
 195             <div style="-webkit-writing-mode:vertical-rl; direction:rtl">
 196                 <details style="text-align:center"><summary>summary</summary></details>
 197                 <details style="text-align:center" open><summary>summary</summary></details>
 198             </div>
 199         </td>
 200     </tr>
 201 </table>
 202
 203
 204 <br>
 205 <table border="1">
 206     <tr><th colspan="6">text-align: right</th></tr>
 207     <tr><th colspan="2" rowspan="2">&nbsp;</th><th colspan="4">-webkit-writing-mode</th></tr>
 208     <tr><th>horizontal-tb</th><th>horizontal-bt</th><th>vertical-lr</th><th>vertical-rl</th></tr>
 209     <tr>
 210         <th rowspan="4">direction</th>
 211         <th>ltr</th>
 212         <td>
 213             <div style="-webkit-writing-mode:horizontal-tb; direction:ltr">
 214                 <details style="text-align:right"><summary>summary</summary></details>
 215                 <details style="text-align:right" open><summary>summary</summary></details>
 216             </div>
 217         </td>
 218         <td>
 219             <div style="-webkit-writing-mode:horizontal-bt; direction:ltr">
 220                 <details style="text-align:right"><summary>summary</summary></details>
 221                 <details style="text-align:right" open><summary>summary</summary></details>
 222             </div>
 223         </td>
 224         <td>
 225             <div style="-webkit-writing-mode:vertical-lr; direction:ltr">
 226                 <details style="text-align:right"><summary>summary</summary></details>
 227                 <details style="text-align:right" open><summary>summary</summary></details>
 228             </div>
 229         </td>
 230         <td>
 231             <div style="-webkit-writing-mode:vertical-rl; direction:ltr">
 232                 <details style="text-align:right"><summary>summary</summary></details>
 233                 <details style="text-align:right" open><summary>summary</summary></details>
 234             </div>
 235         </td>
 236     </tr>
 237     <tr>
 238         <th>rtl</th>
 239         <td>
 240             <div style="-webkit-writing-mode:horizontal-tb; direction:rtl">
 241                 <details style="text-align:right"><summary>summary</summary></details>
 242                 <details style="text-align:right" open><summary>summary</summary></details>
 243             </div>
 244         </td>
 245         <td>
 246             <div style="-webkit-writing-mode:horizontal-bt; direction:rtl">
 247                 <details style="text-align:right"><summary>summary</summary></details>
 248                 <details style="text-align:right" open><summary>summary</summary></details>
 249             </div>
 250         </td>
 251         <td>
 252             <div style="-webkit-writing-mode:vertical-lr; direction:rtl">
 253                 <details style="text-align:right"><summary>summary</summary></details>
 254                 <details style="text-align:right" open><summary>summary</summary></details>
 255             </div>
 256         </td>
 257         <td>
 258             <div style="-webkit-writing-mode:vertical-rl; direction:rtl">
 259                 <details style="text-align:right"><summary>summary</summary></details>
 260                 <details style="text-align:right" open><summary>summary</summary></details>
 261             </div>
 262         </td>
 263     </tr>
 264 </table>