grouping-ol.html (11815B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>the ol element</title> 6 <link rel="author" title="dzenana" href="mailto:dzenana.trenutak@gmail.com"> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-ol-element"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body> 12 <h1>Description</h1> 13 <p>This test validates the ol element.</p> 14 15 <div id="log"></div> 16 17 <p>Ordered List</p> 18 <ol id="basic"> 19 <li>list item</li> 20 <li>list item</li> 21 <li>list item</li> 22 </ol> 23 24 <p>Ordered List</p> 25 <ol id="allAtts" reversed start="3" type="A"> 26 <li>list item</li> 27 <li>list item</li> 28 <li>list item</li> 29 </ol> 30 31 <p>Ordered List</p> 32 <ol id="justRev" reversed> 33 <li>list item</li> 34 <li>list item</li> 35 <li>list item</li> 36 </ol> 37 38 <p>Ordered List</p> 39 <ol id="basicRevGoodName" reversed="reversed"> 40 <li>list item</li> 41 <li>list item</li> 42 <li>list item</li> 43 </ol> 44 45 <p>Ordered List</p> 46 <ol id="basicRevNameWithSpace" reversed=" reversed "> 47 <li>list item</li> 48 <li>list item</li> 49 <li>list item</li> 50 </ol> 51 52 <p>Ordered List</p> 53 <ol id="basicRevEmpty" reversed="" start="A"> 54 <li>list item</li> 55 <li>list item</li> 56 <li>list item</li> 57 </ol> 58 59 <p>Ordered List</p> 60 <ol id="basicRevTrue" reversed="true"> 61 <li>list item</li> 62 <li>list item</li> 63 <li>list item</li> 64 </ol> 65 66 <p>Ordered List</p> 67 <ol id="basicRevFalse" reversed="false"> 68 <li>list item</li> 69 <li>list item</li> 70 <li>list item</li> 71 </ol> 72 73 <p>Ordered List</p> 74 <ol id="start2" start="2"> 75 <li>list item</li> 76 <li>list item</li> 77 <li>list item</li> 78 </ol> 79 80 <p>Ordered List</p> 81 <ol id="negative" start="-10"> 82 <li>list item</li> 83 <li>list item</li> 84 <li>list item</li> 85 </ol> 86 87 <p>Ordered List</p> 88 <ol id="posFloatDown" start="4.03"> 89 <li>list item</li> 90 <li>list item</li> 91 <li>list item</li> 92 </ol> 93 94 <p>Ordered List</p> 95 <ol id="negFloatDown" start="-4.03"> 96 <li>list item</li> 97 <li>list item</li> 98 <li>list item</li> 99 </ol> 100 101 <p>Ordered List</p> 102 <ol id="posFloatUp" start="4.9"> 103 <li>list item</li> 104 <li>list item</li> 105 <li>list item</li> 106 </ol> 107 108 <p>Ordered List</p> 109 <ol id="negFloatUp" start="-4.9"> 110 <li>list item</li> 111 <li>list item</li> 112 <li>list item</li> 113 </ol> 114 115 <p>Ordered List</p> 116 <ol id="exponent" start="7e2"> 117 <li>list item</li> 118 <li>list item</li> 119 <li>list item</li> 120 </ol> 121 122 <p>Ordered List</p> 123 <ol id="decimal" start=".5"> 124 <li>list item</li> 125 <li>list item</li> 126 <li>list item</li> 127 </ol> 128 129 <p>Ordered List</p> 130 <ol id="letter" start="A"> 131 <li>list item</li> 132 <li>list item</li> 133 <li>list item</li> 134 </ol> 135 136 <p>Ordered List</p> 137 <ol id="middle50"> 138 <li>list item</li> 139 <li value="50">list item</li> 140 <li>list item</li> 141 </ol> 142 143 <p>Ordered List</p> 144 <ol id="middleneg50"> 145 <li>list item</li> 146 <li value="-50">list item</li> 147 <li>list item</li> 148 </ol> 149 150 <p>Ordered List</p> 151 <ol id="lots" reversed="reversed"> 152 <li value="10">list item</li> 153 <li value="20">list item</li> 154 <a></a><abbr></abbr><address></address><area></area><article></article><aside></aside><audio></audio><b></b><base></base><bdi></bdi><bdo></bdo><blockquote></blockquote><body></body><br></br><button></button><canvas></canvas><caption></caption><cite></cite><code></code><col></col><colgroup></colgroup><command></command><datalist></datalist><dd></dd><del></del><details></details><dfn></dfn><dialog></dialog><div></div><dl></dl><dt></dt><em></em><embed></embed><fieldset></fieldset><figcaption></figcaption><figure></figure><footer></footer><form></form><h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6><head></head><header></header><hgroup></hgroup><hr></hr><html></html><i></i><iframe></iframe><img></img><input></input><ins></ins><kbd></kbd><keygen></keygen><label></label><legend></legend><link></link><map></map><mark></mark><menu></menu><meta></meta><meter></meter><nav></nav><noscript></noscript><object></object><ol><li></li><li></li></ol><optgroup></optgroup><option></option><output></output><p></p><param></param><pre></pre><progress></progress><q></q><rp></rp><rt></rt><ruby></ruby><s></s><samp></samp><script></script><section></section><select></select><small></small><source></source><span></span><strong></strong><style></style><sub></sub><summary></summary><sup></sup><table></table><tbody></tbody><td></td><textarea></textarea><tfoot></tfoot><th></th><thead></thead><time></time><title></title><tr></tr><track></track><u></u><ul><li></li><li></li></ul><var></var><video></video><wbr></wbr> 155 <li value="-99">list item</li> 156 </ol> 157 158 <script> 159 "use strict"; 160 161 var testList; 162 163 // check that prototype matches spec's DOM interface 164 test(function () { 165 testList = document.getElementById("basic"); 166 assert_equals(Object.getPrototypeOf(testList), HTMLOListElement.prototype, "HTMLOListElement.prototype should be used for OL"); 167 }, "The prototype for OL is HTMLOListElement.prototype"); 168 169 // check that "own" properties reversed, start, and type are present 170 test(function () { 171 testList = document.getElementById("basic"); 172 assert_idl_attribute(testList, "reversed"); 173 }, "'reversed' property should be defined on OL."); 174 175 test(function () { 176 testList = document.getElementById("basic"); 177 assert_idl_attribute(testList, "start"); 178 }, "'start' property should be defined on OL."); 179 180 test(function () { 181 testList = document.getElementById("basic"); 182 assert_idl_attribute(testList, "type"); 183 }, "'type' property should be defined on OL."); 184 185 // "The reversed, start, and type IDL attributes must reflect the respective content attributes of the same name." 186 test(function () { 187 testList = document.getElementById("allAtts"); 188 assert_true(testList.reversed); 189 }, "OL's 'reversed' IDL property reflects content attribute."); 190 191 test(function () { 192 testList = document.getElementById("allAtts"); 193 assert_equals(testList.start, 3); 194 }, "OL's 'start' IDL property reflects content attribute."); 195 196 test(function () { 197 testList = document.getElementById("allAtts"); 198 assert_equals(testList.type, "A"); 199 }, "OL's 'type' IDL property reflects content attribute."); 200 201 202 // "The reversed attribute is a boolean attribute." 203 204 // check lists for which reversed value should be false 205 test(function() { 206 assert_false(document.getElementById("basic").reversed, "IDL 'reversed' attribute value false when content attribute absent"); 207 }, "IDL 'reversed' attribute value false when content attribute absent"); 208 209 // check lists for which reversed value should be true 210 test(function() { 211 assert_true(document.getElementById("justRev").reversed); 212 assert_true(document.getElementById("basicRevGoodName").reversed); 213 assert_true(document.getElementById("basicRevNameWithSpace").reversed); 214 assert_true(document.getElementById("basicRevEmpty").reversed); 215 assert_true(document.getElementById("basicRevTrue").reversed); 216 assert_true(document.getElementById("basicRevFalse").reversed); 217 }, "IDL 'reversed' attribute value true when content attribute exists"); 218 219 // check that IDL property works to change reversed value 220 test(function() { 221 document.getElementById("justRev").reversed = false; 222 assert_false(document.getElementById("justRev").reversed, "Changing IDL 'reversed' property changes list's reversed property."); 223 }, "Changing IDL 'reversed' property changes list's reversed property."); 224 225 226 // If the start attribute is present, user agents must parse it as an integer, in order to determine the attribute's value. 227 // The default value, used if the attribute is missing or 228 // if the value cannot be converted to a number according to the referenced algorithm, 229 // is 1 if the element has no reversed attribute, and 230 // is the number of child li elements otherwise." 231 // "The start IDL attribute has the same default as its content attribute." 232 233 test(function() { 234 assert_equals(document.getElementById("basic").start, 1); 235 }, "Default start value for non-reversed list should be 1"); 236 237 test(function() { 238 assert_equals(document.getElementById("decimal").start, 1); 239 }, "IDL and content attribute parse start of '.5' correctly."); 240 241 test(function() { 242 assert_equals(document.getElementById("letter").start, 1); 243 }, "IDL and content attribute parse start of 'A' correctly."); 244 245 test(function() { 246 assert_equals(document.getElementById("basicRevGoodName").start, 1); 247 }, "Default start value (if none provided) for reversed list = 1."); 248 249 test(function() { 250 assert_equals(document.getElementById("basicRevEmpty").start, 1); 251 }, "Default start value (if failed to parse) for reversed list = 1."); 252 253 test(function() { 254 assert_equals(document.getElementById("lots").start, 1); 255 }, "Default start value for reversed list = 1 (even with tons of other child elements)."); 256 257 test(function() { 258 var myList = document.getElementById("basicRevGoodName"), myLI = document.createElement("li"); 259 myList.appendChild(myLI); 260 assert_equals(document.getElementById("basicRevGoodName").start, 1); 261 }, "Adding child element to reversed list does not change start value"); 262 263 test(function() { 264 var myList = document.getElementById("basicRevTrue"); 265 myList.removeChild(myList.children[0]); 266 assert_equals(document.getElementById("basicRevTrue").start, 1); 267 }, "Deleting child element from reversed list does not change start value"); 268 269 test(function() { 270 assert_equals(document.getElementById("start2").start, 2); 271 }, "IDL and content attribute parse start of '2' correctly."); 272 273 test(function() { 274 assert_equals(document.getElementById("negative").start, -10); 275 }, "IDL and content attribute parse start of '-10' correctly."); 276 277 test(function() { 278 assert_equals(document.getElementById("posFloatDown").start, 4); 279 }, "IDL and content attribute parse start of '4.03' correctly."); 280 281 test(function() { 282 assert_equals(document.getElementById("negFloatDown").start, -4); 283 }, "IDL and content attribute parse start of '-4.03' correctly."); 284 285 test(function() { 286 assert_equals(document.getElementById("posFloatUp").start, 4); 287 }, "IDL and content attribute parse start of '4.9' correctly."); 288 289 test(function() { 290 assert_equals(document.getElementById("negFloatUp").start, -4); 291 }, "IDL and content attribute parse start of '-4.9' correctly."); 292 293 test(function() { 294 assert_equals(document.getElementById("exponent").start, 7); 295 }, "IDL and content attribute parse start of '7e2' correctly."); 296 297 </script> 298 </body> 299 </html>