<!doctype html>
<html>
<head>
    <style>
        .cleared-container {
            font: 30px/1 Ahem;
            clear: both;
            list-style: none;
            padding: 0;
            margin: 1em 0 0;
        }
        .floated-child {
            float: left;
            width: 33.33%;
            background: rgb(200,200,200);
        }
    </style>
</head>
<body>
    <script src="../../../resources/check-layout.js"></script>
    <ul class="cleared-container">
        <li class="floated-child" data-offset-y="30px">These words should</li>
        <li class="floated-child" data-offset-y="30px">be all on the </li>
        <li class="floated-child" data-offset-y="30px">same line.</li>
    </ul>
    <p> https://bugs.webkit.org/show_bug.cgi?id=109476 : only the first floated child of a self-collapsing block needs to account
        for its collapsed margin. </p>
    <script>
    checkLayout('.floated-child');
    </script>
</body>
</html>