third_party/WebKit/LayoutTests/fast/css/vertical-align-baseline-rowspan-007.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3    <head>
   4        <title>CSS Test: Vertical-align set to 'baseline' with a spanning cell</title>
   5        <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
   6        <link rel="author" title="WebKit" href="http://www.webkit.org/">
   7        <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#height-layout">
   8        <meta name="flags" content="">
   9        <meta name="assert" content="A spanning cell with Vertical-align set to 'baseline' aligns the cell's content baseline (which is the bottom of the first line of text or in-flow content) with the baseline of the first of the rows it spans.">
  10         <style type="text/css">
  11             td
  12             {
  13                 height:10px;
  14             }
  15             #spanning
  16             {
  17                 vertical-align: baseline;
  18                 height: 80px;
  19             }
  20             #small
  21             {
  22                 font-family: Ahem;
  23                 font-size: small;
  24             }
  25         </style>
  26     </head>
  27     <body>
  28 <!--    The row-spanning cell is the only one with a baseline. It should be baseline-aligned on the first row that it spans
  29         and as it is the same height as the other cells in the row, it sets the baseline for the row. This is unaffected by
  30         the total height of the rowspan (80px) -->
  31         <p>Test passes if the bottom of first and last black boxes is aligned.</p>
  32         <table>
  33             <tr>
  34                 <td>
  35                     <div id="small">Text</div>
  36                 </td>
  37                 <td id="spanning" rowspan="3" colspan="2">
  38                     <div id="small">Text</div>
  39                 </td>
  40                 <td>
  41                     <div id="small">Text</div>
  42                 </td>
  43             </tr>
  44             <tr>
  45                 <td></td>
  46                 <td></td>
  47             </tr>
  48             <tr>
  49                 <td></td>
  50                 <td></td>
  51             </tr>
  52         </table>
  53     </body>
  54 </html>