<!DOCTYPE html>
<html>
<head>
<style>
body > span {
display: inline-block;
vertical-align: top;
font: 20px/1 Ahem;
}
.container-absolute > label > span {
padding: 5px;
position: absolute;
}
.container-float > label > span {
padding: 5px;
float: left;
}
input {
border-top: 0px;
border-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
</style>
<script src="../../resources/check-layout.js"></script>
</head>
<body>
<p>webkit.org/p/114311: The text should be inside the input controls. </p>
<span id="id1" class="container-absolute" data-expected-height="20"><label for="input-field"><span>Input</span></label> <input id="input-field" type="text"></span>
<span id="id2" class="container-float" data-expected-height="30"><label for="input-field"><span>Input</span></label> <input id="input-field" type="text"></span>
<span id="id3" class="container-absolute" data-expected-height="20"><label for="input-field"><span>Input</span></label> <input id="input-field" type="text"></span>
<span id="id4" class="container-float" data-expected-height="30"><label for="input-field"><span>Input</span></label> <input id="input-field" type="text"></span>
<span id="id5" class="container-absolute" data-expected-height="20"><label for="input-field"><span>Input</span></label><input id="input-field" type="text"></span>
<span id="id6" class="container-float" data-expected-height="30"><label for="input-field"><span>Input</span></label><input id="input-field" type="text"></span>
<span id="id7" class="container-absolute" data-expected-height="20">
<label for="input-field"><span>Input</span></label>
<input id="input-field" type="text">
</span>
<span id="id8" class="container-float" data-expected-height="30">
<label for="input-field"><span>Input</span></label>
<input id="input-field" type="text">
</span>
<script>
checkLayout('#id1');
checkLayout('#id2');
checkLayout('#id3');
checkLayout('#id4');
checkLayout('#id5');
checkLayout('#id6');
checkLayout('#id7');
checkLayout('#id8');
</script>
</body>
</html>