| <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> |
