third_party/WebKit/LayoutTests/fast/lists/ol-reversed-dynamic-simple.html

   1 <html>
   2     <head>
   3         <script src="resources/dump-list.js"></script>
   4         <script>
   5             function test()
   6             {
   7                 if (window.testRunner)
   8                     testRunner.dumpAsText();
   9
  10                 var list1 = document.getElementById("list1");
  11                 list1.offsetTop; // Force a relayout.
  12                 list1.reversed = true;
  13                 document.getElementById("console1").innerHTML = dumpList(list1);
  14
  15                 var list2 = document.getElementById("list2");
  16                 list2.setAttribute("reversed", "");
  17                 document.getElementById("console2").innerHTML = dumpList(list2);
  18
  19                 var list3 = document.getElementById("list3");
  20                 var li1 = document.createElement("li");
  21                 li1.innerHTML = "Four";
  22                 list3.querySelector("p").appendChild(li1);
  23                 var li2 = document.createElement("li");
  24                 li2.innerHTML = "One";
  25                 list3.appendChild(li2);
  26                 document.getElementById("console3").innerHTML = dumpList(list3);
  27
  28                 var list4 = document.getElementById("list4");
  29                 var div = list4.querySelector("div");
  30                 div.removeChild(div.firstElementChild);
  31                 list4.removeChild(list4.lastElementChild);
  32                 document.getElementById("console4").innerHTML = dumpList(list4);
  33
  34                 // Don't show the actual lists as they are useless in the text-only mode.
  35                 list1.parentNode.removeChild(list1);
  36                 list2.parentNode.removeChild(list2);
  37                 list3.parentNode.removeChild(list3);
  38                 list4.parentNode.removeChild(list4);
  39             }
  40         </script>
  41     </head>
  42     <body onload="test()">
  43         <p>This tests that changing the "reversed" property updates markers.</p>
  44         <ol id="list1">
  45             <li>Five</li>
  46             <li>Four</li>
  47             <li>Three</li>
  48             <li>Two</li>
  49             <li>One</li>
  50         </ol>
  51         <p id="console1"></p>
  52
  53         <p>This tests that changing the "reversed" attribute updates markers.</p>
  54         <ol id="list2">
  55             <li>Five</li>
  56             <li>Four</li>
  57             <li>Three</li>
  58             <li>Two</li>
  59             <li>One</li>
  60         </ol>
  61         <p id="console2"></p>
  62
  63         <p>This tests that adding new items to a reversed list updates markers.</p>
  64         <ol id="list3" reversed>
  65             <li>Seven</li>
  66             <li>Six</li>
  67             <li>Five</li>
  68             <p></p>
  69             <li>Three</li>
  70             <li>Two</li>
  71         </ol>
  72         <p id="console3"></p>
  73
  74         <p>This tests that removing existing tems from a reversed list updates markers.</p>
  75         <ol id="list4" reversed>
  76             <li>Five</li>
  77             <li>Four</li>
  78             <li>Three</li>
  79             <div><li>Foo</li></div>
  80             <li>Two</li>
  81             <li>One</li>
  82             <li>Bar</li>
  83         </ol>
  84         <p id="console4"></p>
  85     </body>
  86 </html>