third_party/WebKit/LayoutTests/fast/table/border-collapsing/border-collapsing-head-foot-vertical.html

   1 <html>
   2 <head>
   3     <title></title>
   4     <style type="text/css">
   5
   6         .test { width: 100px; }
   7         .test table { border-collapse: collapse; margin: 10px; }
   8         .test td, th { border: 1px lightgray solid; }
   9
  10         .example1 tfoot { -webkit-border-before: 2px solid blue;
  11             -webkit-border-after: 2px solid green;
  12         }
  13
  14         .example2 thead { -webkit-border-before: 2px solid blue;
  15             -webkit-border-after: 2px solid green;
  16         }
  17
  18         table table { -webkit-writing-mode: vertical-rl; }
  19     </style>
  20 </head>
  21 <body>
  22     <p>
  23         Test for <i><a href="https://bugs.webkit.org/show_bug.cgi?id=8848">http://bugzilla.opendarwin.org/show_bug.cgi?id=8848</a>
  24         TFOOT borders are copied to THEAD and TBODY</i>.
  25     </p>
  26     <hr>
  27     <table><tr><td class="test">
  28         <table class="example1">
  29             <thead>
  30                 <tr>
  31                     <th>Header</th>
  32                 </tr>
  33             </thead>
  34             <tbody>
  35                 <tr>
  36                     <td>Body 1</td>
  37                 </tr>
  38             </tbody>
  39             <tbody>
  40                 <tr>
  41                     <td>Body 2</td>
  42                 </tr>
  43             </tbody>
  44             <tfoot>
  45                 <tr>
  46                     <td>Footer</td>
  47                 </tr>
  48             </tfoot>
  49         </table>
  50
  51         <table class="example1">
  52             <tbody>
  53                 <tr>
  54                     <td>Body 1</td>
  55                 </tr>
  56             </tbody>
  57             <thead>
  58                 <tr>
  59                     <th>Header</th>
  60                 </tr>
  61             </thead>
  62             <tbody>
  63                 <tr>
  64                     <td>Body 2</td>
  65                 </tr>
  66             </tbody>
  67             <tfoot>
  68                 <tr>
  69                     <td>Footer</td>
  70                 </tr>
  71             </tfoot>
  72         </table>
  73
  74         <table class="example1">
  75             <tbody>
  76                 <tr>
  77                     <td>Body 1</td>
  78                 </tr>
  79             </tbody>
  80             <thead>
  81                 <tr>
  82                     <th>Header</th>
  83                 </tr>
  84             </thead>
  85             <tfoot>
  86                 <tr>
  87                     <td>Footer</td>
  88                 </tr>
  89             </tfoot>
  90             <tbody>
  91                 <tr>
  92                     <td>Body 2</td>
  93                 </tr>
  94             </tbody>
  95         </table>
  96     </td><td class="test">
  97         <table class="example1">
  98             <tbody>
  99                 <tr>
 100                     <td>Body 1</td>
 101                 </tr>
 102             </tbody>
 103             <tfoot>
 104                 <tr>
 105                     <td>Footer</td>
 106                 </tr>
 107             </tfoot>
 108             <thead>
 109                 <tr>
 110                     <th>Header</th>
 111                 </tr>
 112             </thead>
 113             <tbody>
 114                 <tr>
 115                     <td>Body 2</td>
 116                 </tr>
 117             </tbody>
 118         </table>
 119
 120         <table class="example1">
 121             <tfoot>
 122                 <tr>
 123                     <td>Footer</td>
 124                 </tr>
 125             </tfoot>
 126             <tbody>
 127                 <tr>
 128                     <td>Body 1</td>
 129                 </tr>
 130             </tbody>
 131             <thead>
 132                 <tr>
 133                     <th>Header</th>
 134                 </tr>
 135             </thead>
 136             <tbody>
 137                 <tr>
 138                     <td>Body 2</td>
 139                 </tr>
 140             </tbody>
 141         </table>
 142
 143         <table class="example1">
 144             <tbody>
 145                 <tr>
 146                     <td>Body 1</td>
 147                 </tr>
 148             </tbody>
 149             <tbody>
 150                 <tr>
 151                     <td>Body 2</td>
 152                 </tr>
 153             </tbody>
 154             <tfoot>
 155                 <tr>
 156                     <td>Footer</td>
 157                 </tr>
 158             </tfoot>
 159             <thead>
 160                 <tr>
 161                     <th>Header</th>
 162                 </tr>
 163             </thead>
 164         </table>
 165     </td>
 166     <td class="test">
 167         <table class="example2">
 168             <thead>
 169                 <tr>
 170                     <th>Header</th>
 171                 </tr>
 172             </thead>
 173             <tbody>
 174                 <tr>
 175                     <td>Body 1</td>
 176                 </tr>
 177             </tbody>
 178             <tbody>
 179                 <tr>
 180                     <td>Body 2</td>
 181                 </tr>
 182             </tbody>
 183             <tfoot>
 184                 <tr>
 185                     <td>Footer</td>
 186                 </tr>
 187             </tfoot>
 188         </table>
 189
 190         <table class="example2">
 191             <tbody>
 192                 <tr>
 193                     <td>Body 1</td>
 194                 </tr>
 195             </tbody>
 196             <thead>
 197                 <tr>
 198                     <th>Header</th>
 199                 </tr>
 200             </thead>
 201             <tbody>
 202                 <tr>
 203                     <td>Body 2</td>
 204                 </tr>
 205             </tbody>
 206             <tfoot>
 207                 <tr>
 208                     <td>Footer</td>
 209                 </tr>
 210             </tfoot>
 211         </table>
 212
 213         <table class="example2">
 214             <tbody>
 215                 <tr>
 216                     <td>Body 1</td>
 217                 </tr>
 218             </tbody>
 219             <thead>
 220                 <tr>
 221                     <th>Header</th>
 222                 </tr>
 223             </thead>
 224             <tfoot>
 225                 <tr>
 226                     <td>Footer</td>
 227                 </tr>
 228             </tfoot>
 229             <tbody>
 230                 <tr>
 231                     <td>Body 2</td>
 232                 </tr>
 233             </tbody>
 234         </table>
 235     </td><td class="test">
 236         <table class="example2">
 237             <tbody>
 238                 <tr>
 239                     <td>Body 1</td>
 240                 </tr>
 241             </tbody>
 242             <tfoot>
 243                 <tr>
 244                     <td>Footer</td>
 245                 </tr>
 246             </tfoot>
 247             <thead>
 248                 <tr>
 249                     <th>Header</th>
 250                 </tr>
 251             </thead>
 252             <tbody>
 253                 <tr>
 254                     <td>Body 2</td>
 255                 </tr>
 256             </tbody>
 257         </table>
 258
 259         <table class="example2">
 260             <tfoot>
 261                 <tr>
 262                     <td>Footer</td>
 263                 </tr>
 264             </tfoot>
 265             <tbody>
 266                 <tr>
 267                     <td>Body 1</td>
 268                 </tr>
 269             </tbody>
 270             <thead>
 271                 <tr>
 272                     <th>Header</th>
 273                 </tr>
 274             </thead>
 275             <tbody>
 276                 <tr>
 277                     <td>Body 2</td>
 278                 </tr>
 279             </tbody>
 280         </table>
 281
 282         <table class="example2">
 283             <tbody>
 284                 <tr>
 285                     <td>Body 1</td>
 286                 </tr>
 287             </tbody>
 288             <tbody>
 289                 <tr>
 290                     <td>Body 2</td>
 291                 </tr>
 292             </tbody>
 293             <tfoot>
 294                 <tr>
 295                     <td>Footer</td>
 296                 </tr>
 297             </tfoot>
 298             <thead>
 299                 <tr>
 300                     <th>Header</th>
 301                 </tr>
 302             </thead>
 303         </table>
 304     </td></tr></table>
 305 </body>