<!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="20px"><label for="input-field"><span>Input</span></label>    <input id="input-field" type="text"></span>
        <span id="id2" class="container-float" data-expected-height="30px"><label for="input-field"><span>Input</span></label>    <input id="input-field" type="text"></span>
        <span id="id3" class="container-absolute" data-expected-height="20px"><label for="input-field"><span>Input</span></label> <input id="input-field" type="text"></span>
        <span id="id4" class="container-float" data-expected-height="30px"><label for="input-field"><span>Input</span></label> <input id="input-field" type="text"></span>
        <span id="id5" class="container-absolute" data-expected-height="20px"><label for="input-field"><span>Input</span></label><input id="input-field" type="text"></span>
        <span id="id6" class="container-float" data-expected-height="30px"><label for="input-field"><span>Input</span></label><input id="input-field" type="text"></span>
        <span id="id7" class="container-absolute" data-expected-height="20px">
            <label for="input-field"><span>Input</span></label>
            <input id="input-field" type="text">
        </span>
        <span id="id8" class="container-float" data-expected-height="30px">
            <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>