<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                zoom: 125%;
            }
            .logo {
                float: left;
            }
            .logo > div {
                float: left;
                width: 50px;
                height: 50px;
                margin: 10px 10px 0 0;
            }
            .section-info {
                background-color: blue;
            }
            .section-logo {
                position: relative;
                background-color: green;

            }
        </style>
        <script src="../../resources/js-test-pre.js"></script>
    </head>
    <body>
        <p>
            Both elements below should be on the same line.
        </p>
        <div id="test" class="logo">
            <div class="section-info"></div>
            <div class="section-logo"></div>
        </div>
        <script>
            var elements = document.getElementById('test').getElementsByTagName('div');
            shouldBe('elements[0].getBoundingClientRect().top', 'elements[1].getBoundingClientRect().top');
        </script>
    </body>
</html>