third_party/WebKit/LayoutTests/tables/mozilla/bugs/bug32205-2.html

   1 <html>
   2 <head>
   3 <title>Bug Example for Bug 32205</title>
   4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   5
   6 </head>
   7
   8 <body bgcolor="#FFFFFF">
   9
  10 <p>This is a simple example of table height problems with only a single table.
  11 </p>
  12 <p>The indention here is to specify a table with two rows. The table has a fixed
  13   overall width (200 for the example) and two rows. The first row 'just high enough'
  14   for a title line, and the second contains the rest. Creating such a table is
  15   hamperd by a number of bugs</p>
  16 <ol>
  17   <li>If a height is specified for only one row (not both) then it will be ignored
  18   </li>
  19   <li> If specified heights are insufficient (because the content is too large)
  20     then the entire table will be expanded. </li>
  21   <li>Percentage heights appear to simply be translated into pixel heights prior
  22     to other processing, so offer no additional solutions </li>
  23 </ol>
  24 <p>This following table ought to give the desired results (small title line, large
  25   body)</p>
  26 <p>It is specifiable as </p>
  27 <blockquote>
  28   <p>Table height: 200 <br>
  29     First Row : 1 or 1% <i>(i.e. expand to minimum required)</i><br>
  30     Second Row : unspecified <i> (i.e. table height - height of other rows+borders)
  31     </i> </p>
  32 </blockquote>
  33 <table height=200 border=1>
  34 <tr>
  35    <td height=20>  title line</td>
  36 </tr>
  37 <tr>
  38   <td>  rest of space</td>
  39 </tr>
  40 </table>
  41
  42 <p>This doesn't work because of the 1st bug above. </p>
  43 <p>A second attempt is to specify heights that do add up to the total.</p>
  44 <p> Table height: 200 <br>
  45   First Row : 1 <br>
  46   Second Row : 199 </p>
  47 <table height=200 border=1>
  48 <tr>
  49    <td height=1>  title line</td>
  50 </tr>
  51 <tr>
  52   <td height=199>  rest of space</td>
  53 </tr>
  54 </table>
  55
  56 <p>This appears ok, but close inspection will show that the table is now >200
  57   pixels high (2rd bug). </p>
  58 <p>A third attempt using 1% and 99% gives identical results (3rd bug).</p>
  59 <p> A related bug is the the height of a row that is not specified explicitly
  60   cannot be used by its children. </p>
  61 <p>This example is a table of height 200 with a single row of unspecified height.
  62   This contains a DIV whose style is height:100%. It ought to fill the entire
  63   table. </p>
  64 <table height=200 border=1>
  65 <tr>
  66 <td>
  67 <div style="height:100%;background-color:red">A 100% div inside a row of unspecified height</div>
  68 </td>
  69 </tr>
  70 </table>
  71
  72
  73
  74 </body>
  75
  76 </html>