third_party/WebKit/LayoutTests/fast/lists/ol-reversed-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                 document.getElementById("console1").innerHTML = dumpList(list1);
  12
  13                 var list2 = document.getElementById("list2");
  14                 document.getElementById("console2").innerHTML = dumpList(list2);
  15
  16                 var list3 = document.getElementById("list3");
  17                 document.getElementById("console3").innerHTML = dumpList(list3);
  18
  19                 var list4 = document.getElementById("list4");
  20                 document.getElementById("console4").innerHTML = dumpList(list4);
  21
  22                 var list5 = document.getElementById("list5");
  23                 document.getElementById("console5").innerHTML = dumpList(list5);
  24
  25                 var list6 = document.getElementById("list6");
  26                 document.getElementById("console6").innerHTML = "Value of start attribute of the list is : " + list6.start;
  27
  28                 // Don't show the actual lists as they are useless in the text-only mode.
  29                 list1.parentNode.removeChild(list1);
  30                 list2.parentNode.removeChild(list2);
  31                 list3.parentNode.removeChild(list3);
  32                 list4.parentNode.removeChild(list4);
  33                 list5.parentNode.removeChild(list5);
  34                 list6.parentNode.removeChild(list6);
  35             }
  36         </script>
  37     </head>
  38     <body onload="test()">
  39         <p>This tests that reversed lists render properly.</p>
  40         <ol id="list1" reversed>
  41             <li>Five</li>
  42             <li>Four</li>
  43             <div style="display: list-item">Three</div>
  44             <li>Two</li>
  45             <li>One</li>
  46         </ol>
  47         <p id="console1"></p>
  48
  49         <p>This tests that reversed lists with a custom start value render properly.</p>
  50         <ol id="list2" reversed="reversed" start="10">
  51             <li>Ten</li>
  52             <li>Nine</li>
  53             <li>Eight</li>
  54             <li>Seven</li>
  55             <li>Six</li>
  56         </ol>
  57         <p id="console2"></p>
  58
  59         <p>This tests that reversed lists with explicit item values render properly.</p>
  60         <ol id="list3" reversed>
  61             <li>Five</li>
  62             <li>Four</li>
  63             <li value="2">Two</li>
  64             <li>One</li>
  65             <li>Zero</li>
  66         </ol>
  67         <p id="console3"></p>
  68
  69         <p>This tests that reversed lists with a custom start value and explicit item values render properly.</p>
  70         <ol id="list4" reversed start="10">
  71             <li>Ten</li>
  72             <li>Nine</li>
  73             <li value="3">Three</li>
  74             <li>Two</li>
  75             <li>One</li>
  76             <li value="3">Three</li>
  77             <li>Two</li>
  78             <li>One</li>
  79         </ol>
  80         <p id="console4"></p>
  81
  82         <p>This tests that reversed lists with a negative start value render properly.</p>
  83         <ol id="list5" reversed="reversed" start="-5">
  84             <li>Minus Five</li>
  85             <li>Minus Six</li>
  86             <li>Minus Seven</li>
  87             <li>Minus Eight</li>
  88             <li>Minus Nine</li>
  89         </ol>
  90         <p id="console5"></p>
  91
  92         <p>This tests that reversed lists have the start attribute equals the number of list items when no start value is specified.</p>
  93         <ol id="list6" reversed>
  94             <li>Five</li>
  95             <li>Four</li>
  96             <li>Three</li>
  97             <li>Two</li>
  98             <li>One</li>
  99         </ol>
 100         <p id="console6"></p>
 101
 102     </body>
 103 </html>