<!DOCTYPE html>
<html>
    <head>
        <style>
            body {

            }
            nav {
                position: absolute;
                top: 100px;
                width: 400px;
                height: 40px;
                border: 1px solid blue;
            }
            nav > ul {
                float: right;
                list-style: inside;
            }
            nav > ul > li {
                float: left;
            }
            nav > ul > li > a {
                text-decoration: none;
            }
        </style>
        <script src="../../resources/js-test.js"></script>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
        <script>
            if (window.testRunner)
                testRunner.waitUntilDone();

            var list = document.getElementsByTagName('ul')[0];
            var firstLinkTop = list.firstElementChild.getBoundingClientRect().top;
            var lastLinkTop = list.lastElementChild.getBoundingClientRect().top;

            if (firstLinkTop == lastLinkTop)
                testPassed('Links are on the same line.');
            else
                shouldBe('firstLinkTop', 'lastLinkTop');
                
            window.onload = function() {
                list.style.marginRight = '-10px';
                list.offsetTop;
                list.style.marginRight = 'auto';
                
                if (firstLinkTop == list.firstElementChild.getBoundingClientRect().top)
                    testPassed('First link didn\'t move after layout.');
                else
                    shouldBe('list.firstElementChild.getBoundingClientRect().top', 'firstLinkTop');
                
                if (lastLinkTop == list.lastElementChild.getBoundingClientRect().top)
                    testPassed('Last link didn\'t move after layout.');
                else
                    shouldBe('list.lastElementChild.getBoundingClientRect().top', 'lastLinkTop');
                    
                if (window.testRunner)
                    testRunner.notifyDone();
            };
        </script>
    </body>
</html>