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

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
   2 <html><head>
   3 <title>Table Border Models</title>
   4 <style type="text/css">
   5 body { overflow: hidden; }
   6 TABLE   { margin: 1em; width: auto; border: medium solid blue; }
   7 TD  { border: thin solid green; padding: 5px; }
   8 TH { border: medium solid purple; padding: 5px; }
   9 TABLE.one, TABLE.two { border-spacing: 1em; }
  10 TABLE.one { border-collapse: collapse; }
  11 TABLE.two { border-collapse: separate; }
  12 TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
  13 TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
  14 TABLE.five { border-collapse: separate; }
  15 TABLE.five, TABLE.five TD, TABLE.five TH, TABLE.five CAPTION { border: none; }
  16 TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
  17     { border: medium solid red; }
  18 </style>
  19 </head>
  20 <body>
  21 <h1>Table Border Models</h1>
  22
  23 <p>This tests tests the <a
  24 href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS2 spec
  25 rules on table borders</a>.  The styles applied here are:</p>
  26
  27 <pre>
  28 TABLE   { margin: 1em; border: medium solid blue; }
  29 TD  { border: thin solid green; padding: 5px; }
  30 TH { border: medium solid purple; padding: 5px; }
  31 TABLE.one, TABLE.two { border-spacing: 1em; }
  32 TABLE.one { border-collapse: collapse; }
  33 TABLE.two { border-collapse: separate; }
  34 TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
  35 TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
  36 TABLE.five { border-collapse: separate; }
  37 TABLE.five, TABLE.five TD, TABLE.five TH { border: none; }
  38 TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
  39     { border: medium solid red; }
  40 </pre>
  41 <div style="-webkit-writing-mode: vertical-rl;">
  42 <table class="one">
  43  <tr>
  44   <th>Header One</th>
  45   <th>Header Two</th>
  46   <th>Header Three</th>
  47  </tr>
  48  <tr>
  49   <td>
  50    This table uses the collapsed borders model.
  51   </td>
  52   <td>
  53    This means that elements within the cell have no border-spacing.
  54   </td>
  55   <td>
  56    Since it has collapsed borders, the borders on the header cells,
  57    on all sides, should be medium solid purple.
  58   </td>
  59  </tr>
  60  <tr>
  61   <td>
  62    The border of the table itself should be medium solid blue, except
  63    where header cells override the border.
  64   </td>
  65   <td>
  66    The borders that I haven't already mentioned (all the other internal
  67    ones) should be thin solid green.
  68   </td>
  69   <td>
  70    This table should have a 1em margin around all edges.  This margin
  71    is measured from the <em>middle</em> of its border.
  72   </td>
  73  </tr>
  74 </table>
  75
  76
  77 <table class="two">
  78  <tr>
  79   <th>Header One</th>
  80   <th>Header Two</th>
  81   <th>Header Three</th>
  82  </tr>
  83  <tr>
  84   <td>
  85    This table uses the separated borders model.
  86   </td>
  87   <td>
  88    This means that elements within the cell have border-spacing of 1em.
  89   </td>
  90   <td>
  91    The borders on the header cells,
  92    on all sides, should be medium solid purple.
  93   </td>
  94  </tr>
  95  <tr>
  96   <td>
  97    The border of the table itself should be medium solid blue.
  98   </td>
  99   <td>
 100    The borders of other cells should be thin solid green.
 101   </td>
 102   <td>
 103    This table should have a 1em margin around all edges.  This margin
 104    is measured from the <em>outer edge</em> of its border.
 105   </td>
 106  </tr>
 107 </table>
 108
 109
 110 <table class="three">
 111  <tr>
 112   <th>Header One</th>
 113   <th>Header Two</th>
 114   <th>Header Three</th>
 115  </tr>
 116  <tr>
 117   <td>
 118    This table uses the separated borders model.
 119   </td>
 120   <td>
 121    Elements within the cell have horizontal border-spacing (i.e., width of
 122    vertical lines) of 0 and vertical
 123    border-spacing (i.e., height of horizontal lines) of 0.5em.
 124   </td>
 125   <td>
 126    The borders on the header cells,
 127    on all sides, should be medium solid purple.
 128   </td>
 129  </tr>
 130  <tr>
 131   <td>
 132    The border of the table itself should be medium solid blue.
 133    The borders of other cells should be thin solid green.
 134   </td>
 135   <td>
 136    This table should have a 1em margin around all edges.  This margin
 137    is measured from the <em>outer edge</em> of its border.
 138   </td>
 139   <td>
 140    The table should not be wider than the room available for it unless
 141    that space is very small.  Because of its margins, the width of the
 142    table should be less than 100%.
 143   </td>
 144  </tr>
 145 </table>
 146
 147
 148 <table class="four">
 149  <tr>
 150   <th>Header One</th>
 151   <th>Header Two</th>
 152   <th>Header Three</th>
 153  </tr>
 154  <tr>
 155   <td>
 156    This table uses the separated borders model.
 157   </td>
 158   <td>
 159    Elements within the cell have horizontal border-spacing of 0.5em and vertical
 160    border-spacing of 0.
 161   </td>
 162   <td>
 163    The borders on the header cells,
 164    on all sides, should be medium solid purple.
 165   </td>
 166  </tr>
 167  <tr>
 168   <td>
 169    The border of the table itself should be medium solid blue.
 170    The borders of other cells should be thin solid green.
 171   </td>
 172   <td>
 173    This table should have a 1em margin around all edges.  This margin
 174    is measured from the <em>outer edge</em> of its border.
 175   </td>
 176   <td>
 177    The table should not be wider than the room available for it unless
 178    that space is very small.  Because of its margins, the width of the
 179    table should be less than 100%.
 180   </td>
 181  </tr>
 182 </table>
 183
 184
 185 <table class="five">
 186 <caption>
 187  This is the caption.
 188 </caption>
 189 <colgroup>
 190  <col>
 191 </colgroup>
 192 <colgroup>
 193  <col>
 194  <col>
 195 </colgroup>
 196 <thead>
 197  <tr>
 198   <th>Header One</th>
 199   <th>Header Two</th>
 200   <th>Header Three</th>
 201  </tr>
 202 </thead>
 203 <tbody>
 204  <tr>
 205   <td>
 206    This table uses the separated borders model.
 207   </td>
 208   <td>
 209    This means that borders are allowed only on table elements or table
 210    cell elements.
 211   </td>
 212   <td>
 213    They are not allowed on elements that represent rows,
 214    row-groups, columns, or column-groups.
 215   </td>
 216  </tr>
 217  <tr>
 218   <td>
 219    There should be no borders at all on this table!
 220   </td>
 221   <td>
 222    If there are any borders shown that are not medium solid red, then
 223    the problem is something other than what this test is testing.
 224   </td>
 225   <td>
 226    This table should have a 1em margin around all edges.  This margin
 227    is measured from the <em>outer edge</em> of its border.
 228   </td>
 229  </tr>
 230 </tbody>
 231 </table>
 232 </div>
 233 </body></html>