<!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>
Codebase Browser
chromium