<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <head>
                <style type="text/css">
                        dl {
                                display: table;
                        }
                        
                        .dl-section {
                                display: table-row;
                        }
                        
                        dl dt {
                                display: table-cell;
                        }
                        
                        dl dd {
                                display: table-cell;
                        }
                </style>
        </head>
        <body>
        <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>
        REGRESSION: Incorrect vertical position for text fields in a "display: table" block</i>.
                <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>
                <form action="foo" method="get">
                        <dl>
                          <div class="dl-section">
                            <dt>Foo</dt>
                            <dd><input type="text" /></dd>
                          </div>
                        </dl>
                        <hr />
                        <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>
                        <dl>
                          <div class="dl-section">
                            <dt>Foo</dt>
                            <dd><input type="text" /></dd>
                          </div>
                          <div class="dl-section">
                            <dt>Foo</dt>
                            <dd><input type="text" /></dd>
                          </div>
                          <div class="dl-section">
                            <dt>Foo</dt>
                            <dd><input type="text" value="Bar" /></dd>
                          </div>
                          <div class="dl-section">
                            <dt>Foo</dt>
                            <dd><input type="text" value="Bar" /></dd>
                          </div>
                          <div class="dl-section">
                            <dt>Foo</dt>
                            <dd><input type="text" /></dd>
                          </div>
                          <div class="dl-section">
                            <dt>Foo</dt>
                            <dd><input type="text" /></dd>
                          </div>
                          <div class="dl-section">
                            <dt>Foo</dt>
                            <dd><div style="display: inline-block;"><br>Bar (should be aligned with Foo)</div></dd>
                          </div>
                        </dl>
                </form>
        </body>
</html>
