HTML5 <details> and <summary>: rendering
[WebKit-https.git] / LayoutTests / fast / html / details-writing-mode.html
1 <style>
2 td {
3   border: 1px solid black;
4   width: 120px;
5   height: 120px;
6 }
7 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>