fast/forms/form-element-geometry.html

<html>

<head>
<title>Form Element Geometry Tests</title>
</head>

<body>

<h1>Form Element Geometry Tests</h1>

<p>These tests help us tune the widget classes in KWQ to have all the right fudge factors.</p>

<h2>Bounding Boxes</h2>

<table><tr>
    <td><div style="border:2px solid blue;"><font size=+2><input style="margin: 0;" type=button value="button"></font></div></td>
    <td><div style="border:2px solid blue;"><font size=+2><select style="margin: 0;" size=1><option>menu</option></font></select></div></td>
    <td><div style="border:2px solid blue;"><font size=+2><input style="margin: 0;" type=radio></div></font></td>
    <td><div style="border:2px solid blue;"><font size=+2><input style="margin: 0;" type=checkbox></div></font></td>
</tr></table>

<table><tr>
    <td><div style="border:2px solid blue;"><input style="margin: 0;" type=button value="button"></div></td>
    <td><div style="border:2px solid blue;"><select style="margin: 0;" size=1><option>menu</option></select></div></td>
    <td><div style="border:2px solid blue;"><input style="margin: 0;" type=radio></div></td>
    <td><div style="border:2px solid blue;"><input style="margin: 0;" type=checkbox></div></td>
</tr></table>

<table><tr>
    <td><div style="border:2px solid blue;"><font size=-2><input style="margin: 0;" type=button value="button"></font></div></td>
    <td><div style="border:2px solid blue;"><font size=-2><select style="margin: 0;" size=1><option>menu</option></select></font></div></td>
    <td><div style="border:2px solid blue;"><font size=-2><input style="margin: 0;" type=radio></font></div></td>
    <td><div style="border:2px solid blue;"><font size=-2><input style="margin: 0;" type=checkbox></font></div></td>
</tr></table>

<table><tr valign=top>
    <td><div style="border:2px solid blue;"><input style="margin: 0;" type=text value="text field" size=10></div></td>
    <td><div style="border:2px solid blue;"><select style="margin: 0;" size=4><option>list</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></td>
    <td><div style="border:2px solid blue;"><input style="margin: 0;" type=file></div></td>
    <td><div style="border:2px solid blue;"><textarea>textarea</textarea></div></td>
</tr></table>

<h2>Baseline Alignment</h2>

<div><font size=+2>
    text
    <input type=button value="button">
    <select size=1><option>menu</option></select>
    <input type=radio>
    <input type=checkbox>
</font></div>

<div>
    text
    <input type=button value="button">
    <select size=1><option>menu</option></select>
    <input type=radio>
    <input type=checkbox>
</div>

<div><font size=-2>
    text
    <input type=button value="button">
    <select size=1><option>menu</option></select>
    <input type=radio>
    <input type=checkbox>
</font></div>

<div>
    text
    <input type=text value="text field" size=10>
    <input type=file>
    <textarea>textarea</textarea>
</div>

</tr></table>

<h2>Pop-up Menu Sizes</h2>

<div><font size=+2>
    <select size=1><option></select>
    <select size=1><option>|</select>
    <select size=1><option>xxxxxxxx</select>
</font></div>

<div>
    <select size=1><option></select>
    <select size=1><option>|</select>
    <select size=1><option>xxxxxxxx</select>
</div>

<div><font size=-2>
    <select size=1><option></select>
    <select size=1><option>|</select>
    <select size=1><option>xxxxxxxx</select>
</font></div>

</body>
</html>