float-containing-block-with-margin.html

<!DOCTYPE html>
<html>
    <head>
        <script src="../../resources/js-test.js"></script>
        <style>
            ul > li { float: right; background: skyblue; }
            ul > li > a { display: block; margin: 10.5px; text-decoration: none; }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">dolor sit amet</a></li>
            <li><a href="#">consectetur adipiscing elit</a></li>
        </ul>
        Links to the right should not wrap.
        
        <script>
            var elements = document.getElementsByTagName('li');
            function getItemHeight(i)
            {
                return elements[i].getBoundingClientRect().top;
            }
            
            if (getItemHeight(0) == getItemHeight(1) && getItemHeight(0) == getItemHeight(2))
                testPassed('All list items are on the same line');
            else
                testFailed('Expected all list items to be on the same line.');
        </script>
    </body>
</html>

chromium/third_party/blink/web_tests/fast/sub-pixel/float-containing-block-with-margin.html