LayoutTests/fast/table/text-field-baseline.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2                                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   4         <head>
   5                 <style type="text/css">
   6                         dl {
   7                                 display: table;
   8                         }
   9
  10                         .dl-section {
  11                                 display: table-row;
  12                         }
  13
  14                         dl dt {
  15                                 display: table-cell;
  16                         }
  17
  18                         dl dd {
  19                                 display: table-cell;
  20                         }
  21                 </style>
  22         </head>
  23         <body>
  24         <p>This is a regression test for <i><a href="https://bugs.webkit.org/show_bug.cgi?id=9122">http://bugzilla.opendarwin.org/show_bug.cgi?id=9122</a>
  25         REGRESSION: Incorrect vertical position for text fields in a "display: table" block</i>.
  26                 <p>Type something in the text field. Resize the window. The text field should not jump down. Delete what you typed and resize the window. The text field should not move.</p>
  27                 <form action="foo" method="get">
  28                         <dl>
  29                           <div class="dl-section">
  30                             <dt>Foo</dt>
  31                             <dd><input type="text" /></dd>
  32                           </div>
  33                         </dl>
  34                         <hr />
  35                         <p>And here's more. There should not be a difference in distance between the labels, nor any difference in distance between the text fields.</p>
  36                         <dl>
  37                           <div class="dl-section">
  38                             <dt>Foo</dt>
  39                             <dd><input type="text" /></dd>
  40                           </div>
  41                           <div class="dl-section">
  42                             <dt>Foo</dt>
  43                             <dd><input type="text" /></dd>
  44                           </div>
  45                           <div class="dl-section">
  46                             <dt>Foo</dt>
  47                             <dd><input type="text" value="Bar" /></dd>
  48                           </div>
  49                           <div class="dl-section">
  50                             <dt>Foo</dt>
  51                             <dd><input type="text" value="Bar" /></dd>
  52                           </div>
  53                           <div class="dl-section">
  54                             <dt>Foo</dt>
  55                             <dd><input type="text" /></dd>
  56                           </div>
  57                           <div class="dl-section">
  58                             <dt>Foo</dt>
  59                             <dd><input type="text" /></dd>
  60                           </div>
  61                           <div class="dl-section">
  62                             <dt>Foo</dt>
  63                             <dd><div style="display: inline-block;"><br>Bar (should be aligned with Foo)</div></dd>
  64                           </div>
  65                         </dl>
  66                 </form>
  67         </body>
  68 </html>