<html>
    <head>
        <script src="resources/dump-list.js"></script>
        <script>
            function test()
            {
                if (window.testRunner)
                    testRunner.dumpAsText();

                var list = document.getElementById("list");
                list.offsetTop; // Force a relayout.

                var p = document.getElementById("nested");

                var li1 = document.createElement("li");
                li1.innerText = "Eight";

                var li2 = document.createElement("li");
                li2.innerText = "Seven";

                var item3 = document.createElement("div");
                item3.innerText = "Nine";
                item3.style.display = "list-item";

                p.appendChild(li1);
                p.insertBefore(li2, li1);
                p.appendChild(item3);

                document.getElementById("console").innerHTML = dumpList(list);

                // Don't show the actual list as it is useless in the text-only mode.
                list.parentNode.removeChild(list);
            }
        </script>
    </head>
    <body onload="test()">
        <p>This tests that list item markers are updated when adding new items as indirect children of the list element.</p>
        <ol id="list">
            <li>One</li>
            <li>Two</li>
            <div><li>Three</li></div>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
            <p id="nested"></p>
            <li>Ten</li>
            <li>Eleven</li>
        </ol>

        <div id="console"></div>
    </body>
</html>
