third_party/WebKit/LayoutTests/tables/mozilla_expected_failures/other/test4.html

   1 <HTML>
   2 <HEAD>
   3    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   4    <META NAME="GENERATOR" CONTENT="Mozilla/4.09 [en] (WinNT; U) [Netscape]">
   5    <TITLE>test4</TITLE>
   6 <STYLE>
   7 BODY { font-size: 12pt; background-image: url(../images/bg.jpg); }
   8 </STYLE>
   9 <meta name="crc" content=250397440>
  10 </HEAD>
  11 <BODY>
  12
  13 <H1>
  14 Example 4: Some simple tables.</H1>
  15
  16 <TABLE BORDER >
  17 <TR>
  18 <TH BACKGROUND="../images/rock_gra.gif">Color&nbsp;</TH>
  19
  20 <TH BACKGROUND="../images/rock_gra.gif">Meaning&nbsp;</TH>
  21 </TR>
  22
  23 <TR>
  24 <TD BGCOLOR="#90EE90">lightgreen</TD>
  25
  26 <TD>Light green is used on cells that have a colspan</TD>
  27 </TR>
  28
  29 <TR>
  30 <TD BGCOLOR="#F0E68C">khaki</TD>
  31
  32 <TD>Khaki is used on cells that have a rowspan</TD>
  33 </TR>
  34
  35 <TR>
  36 <TD BGCOLOR="#D3D3D3">lightgrey</TD>
  37
  38 <TD>Light grey is used on cells that have a rowspan <B>and</B> a colspan</TD>
  39 </TR>
  40 </TABLE>
  41 <br>
  42 &nbsp;
  43 <TABLE BORDER WIDTH="100%" >
  44 <CAPTION>Table 1 has this caption at the top.&nbsp; It is defined to be 100%
  45 of it's parent's width.</CAPTION>
  46
  47 <TR>
  48 <TD COLSPAN="2" BGCOLOR="#90EE90">Cell</TD>
  49
  50 <TD>Stuff to test out table cell layout. This should be long enough.</TD>
  51 </TR>
  52
  53 <TR>
  54 <TD>Cell</TD>
  55
  56 <TD COLSPAN="2" BGCOLOR="#90EE90">Stuff to test out table cell layout.
  57 This should be long enough.</TD>
  58 </TR>
  59
  60 <TR>
  61 <TD>Cell</TD>
  62
  63 <TD>Stuff to test out table cell layout. This should be long enough.</TD>
  64
  65 <TD>Cell</TD>
  66 </TR>
  67 </TABLE>
  68 <br>
  69 &nbsp;
  70 <TABLE BORDER >
  71 <CAPTION>Table 2 has auto-width (no width param specified.)</CAPTION>
  72
  73 <TR>
  74 <TD>Cell</TD>
  75
  76 <TD COLSPAN="2" ROWSPAN="2" BGCOLOR="#D3D3D3">Stuff to test out table cell
  77 layout. This should be long enough.</TD>
  78 </TR>
  79
  80 <TR>
  81 <TD>Cell</TD>
  82 </TR>
  83
  84 <TR>
  85 <TD>Cell</TD>
  86
  87 <TD>Stuff to test out table cell layout. This should be long enough.</TD>
  88
  89 <TD>more text</TD>
  90 </TR>
  91 </TABLE>
  92 &nbsp;
  93 <TABLE BORDER COLS=3 >
  94 <CAPTION>Table 3 is the same as Table 2, but with equal column widths.&nbsp;</CAPTION>
  95
  96 <TR>
  97 <TD>Cell</TD>
  98
  99 <TD COLSPAN="2" ROWSPAN="2" BGCOLOR="#D3D3D3">Stuff to test out table cell
 100 layout. This should be long enough.</TD>
 101 </TR>
 102
 103 <TR>
 104 <TD>Cell</TD>
 105 </TR>
 106
 107 <TR>
 108 <TD>Cell</TD>
 109
 110 <TD>Stuff to test out table cell layout. This should be long enough.</TD>
 111
 112 <TD>more text</TD>
 113 </TR>
 114 </TABLE><br>
 115 &nbsp;
 116 <table cellpadding=2 style="border-collapse:collapse">
 117 <CAPTION ALIGN=BOTTOM>Table 4 has this bottom caption. The table has specified
 118 column widths and collapsing borders.</CAPTION>
 119 <colgroup>
 120 <col width=90 style="border-left: 2px solid black; border-right:2px dashed blue">
 121 <col width=80 style="border-right:1px solid red">
 122 <col width=80 style="border-right:2px solid black">
 123 </colgroup>
 124
 125 <thead style="border-bottom: 6px solid black">
 126 <tr style="border: 2px solid black;">
 127   <th style="border-right: hidden">Player</th>
 128   <th style="border-right: hidden">Ranking</th>
 129   <th>Record</th>
 130 </tr>
 131 </thead>
 132
 133 <tbody>
 134 <tr style="border: 2px solid black">
 135   <td>Steve Clark</td>
 136   <td align=center>1</td>
 137   <td align=center>77-0</td>
 138 </tr>
 139 <tr style="border: 2px solid black">
 140   <td>Cliff Swain</td>
 141   <td align=center>2</td>
 142   <td align=center>67-10</td>
 143 </tr>
 144 <tr style="border: 2px solid black">
 145   <td>Marty Hogan</td>
 146   <td align=center>3</td>
 147   <td align=center>57-15</td>
 148 </tr>
 149 </tbody>
 150 </TABLE>
 151
 152 <BR>
 153 <table>
 154 <CAPTION ALIGN=BOTTOM>Table 5 has a scrolling tbody.</CAPTION>
 155 <thead>
 156 <tr><td colspan=2 style="font-size: 8pt; font-weight: bold">HEADER
 157 </thead>
 158
 159 <tbody style="overflow: auto; height: 200px; border: 1px solid black">
 160 <tr><td>cell-00<td>cell-01<td>cell-02<td>cell-03</tr>
 161 <tr><td>cell-10<td>cell-11<td>cell-12<td>cell-13</tr>
 162 <tr><td>cell-20<td>cell-21<td>cell-22<td>cell-23</tr>
 163 <tr><td>cell-30<td>cell-31<td>cell-32<td>cell-33</tr>
 164 <tr><td>cell-40<td>cell-41<td>cell-42<td>cell-43</tr>
 165 <tr><td>cell-50<td>cell-51<td>cell-52<td>cell-53</tr>
 166 <tr><td>cell-60<td>cell-61<td>cell-62<td>cell-63</tr>
 167 <tr><td>cell-70<td>cell-71<td>cell-72<td>cell-73</tr>
 168 <tr><td>cell-80<td>cell-81<td>cell-82<td>cell-83</tr>
 169 <tr><td>cell-90<td>cell-91<td>cell-92<td>cell-93</tr>
 170 <tr><td>cell-a0<td>cell-a1<td>cell-a2<td>cell-a3</tr>
 171 <tr><td>cell-b0<td>cell-b1<td>cell-b2<td>cell-b3</tr>
 172 <tr><td>cell-c0<td>cell-c1<td>cell-c2<td>cell-c3</tr>
 173 <tr><td>cell-d0<td>cell-d1<td>cell-d2<td>cell-d3</tr>
 174 <tr><td>cell-e0<td>cell-e1<td>cell-e2<td>cell-e3</tr>
 175 <tr><td>cell-f0<td>cell-f1<td>cell-f2<td>cell-f3</tr>
 176 </tbody>
 177
 178 <tfoot>
 179 <tr><td colspan=2 style="font-size: 8pt; font-weight: bold">FOOTER
 180 </tfoot>
 181
 182 <CAPTION ALIGN=BOTTOM>Table 5 has a scrolling tbody.</CAPTION>
 183 </table>
 184
 185 <BR>
 186 This is a table formed from a list with display of table-row and
 187 list items with display of table-cell.
 188 <UL style="display: table-row; background-color:orange;">
 189 <LI style="display: table-cell; background-color:orange;">ONE</LI>
 190 <LI style="display: table-cell; background-color:orange;">TWO</LI>
 191 <LI style="display: table-cell; background-color:orange;">THREE</LI>
 192 <LI style="display: table-cell; background-color:orange;">FOUR</LI>
 193 <LI style="display: table-cell; background-color:orange;">FIVE</LI>
 194 </UL>
 195 <BR>
 196
 197 This is a table formed from a list with display of table-row-group and
 198 list items with display of table-cell.
 199 <BR>
 200 <UL style="display:table-row-group;">
 201 <LI style="display:table-cell;  background-color:orange;">ONE</LI>
 202 <LI style="display:table-cell;  background-color:orange;">TWO</LI>
 203 <LI style="display:table-cell;  background-color:orange;">THREE</LI>
 204 <LI style="display:table-cell;  background-color:orange;">FOUR</LI>
 205 <LI style="display:table-cell;  background-color:orange;">FIVE</LI>
 206 <LI style="display:table-cell;  background-color:orange;">SIX</LI>
 207 </UL>
 208 <BR>
 209
 210 This is like the previous table plus the list's overflow property set
 211 <UL style="display:table-row-group; overflow:auto; height: 50px;">
 212 <LI style="display:table-cell;  background-color:orange;">ONE</LI>
 213 <LI style="display:table-cell;  background-color:orange;">TWO</LI>
 214 <LI style="display:table-cell;  background-color:orange;">THREE</LI>
 215 <LI style="display:table-cell;  background-color:orange;">FOUR</LI>
 216 <LI style="display:table-cell;  background-color:orange;">FIVE</LI>
 217 <LI style="display:table-cell;  background-color:orange;">SIX</LI>
 218 </UL>
 219 <BR>
 220 <P> The following table will have its rows and columns in red collapsed
 221 <BR>
 222 <table border=1 style="background-color:orange;">
 223 <caption><b>before</b></caption>
 224 <colgroup>
 225 <col>
 226 <col>
 227 <col>
 228 </colgroup>
 229 <tr><td>C11<td style="background-color:red;">C12<td>C13 large
 230 <tr style="background-color:red;"><td>C21<td>C22<td>C23
 231 <tr><td>C31<td style="background-color:red;">C32<td>C33
 232 </table>
 233
 234 <BR>
 235 <table border=1 style="background-color:orange;">
 236 <caption><b>after</b></caption>
 237 <colgroup>
 238 <col>
 239 <col style="visibility:collapse;">
 240 <col>
 241 </colgroup>
 242 <tr><td>C11<td>C12<td>C13 large
 243 <tr style="visibility:collapse;"><td>C21<td>C22<td>C23
 244 <tr><td>C31<td>C32<td>C33
 245 </table>
 246
 247 <P> The following table will have its 2nd row and 2nd col collapsed. A window resize may be necessary to see it properly.
 248 <BR>
 249 <table cellspacing=0 border=1 style="background-color:orange;">
 250 <caption><b>before</b></caption>
 251 <colgroup>
 252 <col>
 253 <col>
 254 <col>
 255 <col>
 256 </colgroup>
 257 <tr><td>C11<td>C12<td>C13<td>C14
 258 <tr><td>C21<td rowspan=2 colspan=2>C12 C13 C22 C23<td>C14
 259 <tr><td>C31<td>C34
 260 <tr><td>C41<td>C42<td>C43<td>C44
 261 </table>
 262
 263 <table cellspacing=0 border=1 style="background-color:orange;">
 264 <caption><b>after</b></caption>
 265 <colgroup>
 266 <col>
 267 <col style="visibility:collapse;">
 268 <col>
 269 <col>
 270 </colgroup>
 271 <tr><td>C11<td>C12<td>C13<td>C14
 272 <tr style="visibility:collapse;"><td>C21<td rowspan=2 colspan=2>C12 C13 C22 C23<td>C14
 273 <tr><td>C31<td>C34
 274 <tr><td>C41<td>C42<td>C43<td>C44
 275 </table>
 276
 277 <P> The following table will have its 1st row group collapsed (rows 1 and 2)
 278 <BR>
 279 <table cellspacing=0 border=1 style="background-color:orange;">
 280 <caption><b>before</b></caption>
 281 <tbody style="background-color:red;">
 282 <tr><td>C11<td>C12<td>C13<td>C14
 283 <tr><td>C21<td>C22<td>C23<td>C24
 284 </tbody>
 285 <tbody>
 286 <tr><td>C31<td>C32<td>C33<td>C34
 287 <tr><td>C41<td>C42<td>C43<td>C44
 288 </table>
 289
 290 <BR>
 291 <table cellspacing=0 border=1 style="background-color:orange;">
 292 <caption><b>after</b></caption>
 293 <tbody style="visibility:collapse;">
 294 <tr><td>C11<td>C12<td>C13<td>C14
 295 <tr><td>C21<td>C22<td>C23<td>C24
 296 </tbody>
 297 <tbody>
 298 <tr><td>C31<td>C32<td>C33<td>C34
 299 <tr><td>C41<td>C42<td>C43<td>C44
 300 </table>
 301
 302 <BR>
 303 <P> The following table is similar to a previous table except that the direction is right-to-left.
 304 It will have its 2nd row and 2nd col collapsed. A window resize may be necessary to see it properly.
 305 <BR>
 306 <table dir=rtl cellspacing=0 border=1 style="background-color:orange;">
 307 <caption><b>before</b></caption>
 308 <colgroup>
 309 <col>
 310 <col>
 311 <col>
 312 <col>
 313 </colgroup>
 314 <tr><td>C11<td>C12<td>C13<td>C14
 315 <tr><td>C21<td rowspan=2 colspan=2>C12 C13 C22 C23<td>C14
 316 <tr><td>C31<td>C34
 317 <tr><td>C41<td>C42<td>C43<td>C44
 318 </table>
 319
 320 <table dir=rtl cellspacing=0 border=1 style="background-color:orange;">
 321 <caption><b>after</b></caption>
 322 <colgroup>
 323 <col>
 324 <col style="visibility:collapse;">
 325 <col>
 326 <col>
 327 </colgroup>
 328 <tr><td>C11<td>C12<td>C13<td>C14
 329 <tr style="visibility:collapse;"><td>C21<td rowspan=2 colspan=2>C12 C13 C22 C23<td>C14
 330 <tr><td>C31<td>C34
 331 <tr><td>C41<td>C42<td>C43<td>C44
 332 </table>
 333
 334 </BODY>
 335 </HTML>