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

                var list1 = document.getElementById("list1");
                list1.offsetTop; // Force a relayout.
                list1.reversed = true;
                document.getElementById("console1").innerHTML = dumpList(list1);

                var list2 = document.getElementById("list2");
                list2.setAttribute("reversed", "");
                document.getElementById("console2").innerHTML = dumpList(list2);

                var list3 = document.getElementById("list3");
                var li1 = document.createElement("li");
                li1.innerHTML = "Four";
                list3.querySelector("p").appendChild(li1);
                var li2 = document.createElement("li");
                li2.innerHTML = "One";
                list3.appendChild(li2);
                document.getElementById("console3").innerHTML = dumpList(list3);

                var list4 = document.getElementById("list4");
                var div = list4.querySelector("div");
                div.removeChild(div.firstElementChild);
                list4.removeChild(list4.lastElementChild);
                document.getElementById("console4").innerHTML = dumpList(list4);

                // Don't show the actual lists as they are useless in the text-only mode.
                list1.parentNode.removeChild(list1);
                list2.parentNode.removeChild(list2);
                list3.parentNode.removeChild(list3);
                list4.parentNode.removeChild(list4);
            }
        </script>
    </head>
    <body onload="test()">
        <p>This tests that changing the "reversed" property updates markers.</p>
        <ol id="list1">
            <li>Five</li>
            <li>Four</li>
            <li>Three</li>
            <li>Two</li>
            <li>One</li>
        </ol>
        <p id="console1"></p>

        <p>This tests that changing the "reversed" attribute updates markers.</p>
        <ol id="list2">
            <li>Five</li>
            <li>Four</li>
            <li>Three</li>
            <li>Two</li>
            <li>One</li>
        </ol>
        <p id="console2"></p>

        <p>This tests that adding new items to a reversed list updates markers.</p>
        <ol id="list3" reversed>
            <li>Seven</li>
            <li>Six</li>
            <li>Five</li>
            <p></p>
            <li>Three</li>
            <li>Two</li>
        </ol>
        <p id="console3"></p>

        <p>This tests that removing existing tems from a reversed list updates markers.</p>
        <ol id="list4" reversed>
            <li>Five</li>
            <li>Four</li>
            <li>Three</li>
            <div><li>Foo</li></div>
            <li>Two</li>
            <li>One</li>
            <li>Bar</li>
        </ol>
        <p id="console4"></p>
    </body>
</html>
