OLD | NEW |
(Empty) | |
| 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-elemen
t"> |
| 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></blo
ckquote><body></body><br></br><button></button><canvas></canvas><caption></capti
on><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></fieldse
t><figcaption></figcaption><figure></figure><footer></footer><form></form><h1></
h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6><head></head><header></header><h
group></hgroup><hr></hr><html></html><i></i><iframe></iframe><img></img><input><
/input><ins></ins><kbd></kbd><keygen></keygen><label></label><legend></legend><l
ink></link><map></map><mark></mark><menu></menu><meta></meta><meter></meter><nav
></nav><noscript></noscript><object></object><ol><li></li><li></li></ol><optgrou
p></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></sou
rce><span></span><strong></strong><style></style><sub></sub><summary></summary><
sup></sup><table></table><tbody></tbody><td></td><textarea></textarea><tfoot></t
foot><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.prot
otype, "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_own_property(testList, "reversed"); |
| 173 }, "'reversed' property should be defined on OL."); |
| 174 |
| 175 test(function () { |
| 176 testList = document.getElementById("basic"); |
| 177 assert_own_property(testList, "start"); |
| 178 }, "'start' property should be defined on OL."); |
| 179 |
| 180 test(function () { |
| 181 testList = document.getElementById("basic"); |
| 182 assert_own_property(testList, "type"); |
| 183 }, "'type' property should be defined on OL."); |
| 184 |
| 185 // "The reversed, start, and type IDL attributes must reflect the respec
tive 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 'revers
ed' 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").reverse
d); |
| 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 in
teger, 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 attribut
e." |
| 232 |
| 233 // basic - default should be 1 |
| 234 test(function() { |
| 235 assert_equals(document.getElementById("basic").start, 1, "no start a
ttribute provided -> 1"); |
| 236 }, "Default start value for non-reversed list should be 1"); |
| 237 |
| 238 // decimal's first element has value of .5 which should return 1 |
| 239 test(function() { |
| 240 assert_equals(document.getElementById("decimal").start, 1, "start of
.5 -> 1 (default)"); |
| 241 }, "IDL and content attribute parse start of '.5' correctly."); |
| 242 |
| 243 // letter's first element has value of A which should return 1 |
| 244 test(function() { |
| 245 assert_equals(document.getElementById("letter").start, 1, "start of
A -> 1 (default)"); |
| 246 }, "IDL and content attribute parse start of 'A' correctly."); |
| 247 |
| 248 // basicRevGoodName - default should be 3 |
| 249 test(function() { |
| 250 assert_equals(document.getElementById("basicRevGoodName").start, 3,
"no start attribute provided -> 3"); |
| 251 }, "Default start value (if none provided) for reversed list = child li
elements."); |
| 252 |
| 253 // basicRevEmpty - default should be 3 |
| 254 test(function() { |
| 255 assert_equals(document.getElementById("basicRevEmpty").start, 3, "st
art of A -> 3 (default)"); |
| 256 }, "Default start value (if failed to parse) for reversed list = child l
i elements."); |
| 257 |
| 258 // lots - default should be 3 |
| 259 test(function() { |
| 260 assert_equals(document.getElementById("lots").start, 3, "no start at
tribute -> 3 (default)"); |
| 261 }, "Default start value for reversed list = child li elements (even with
tons of other child elements)."); |
| 262 |
| 263 // adding child element changes default start value for reversed list |
| 264 test(function() { |
| 265 var myList = document.getElementById("basicRevGoodName"), myLI = doc
ument.createElement("li"); |
| 266 myList.appendChild(myLI); |
| 267 assert_equals(document.getElementById("basicRevGoodName").start, 4,
"Adding child element to reversed list adds 1 to start value"); |
| 268 }, "Adding child element to reversed list adds 1 to start value"); |
| 269 |
| 270 // removing child element changes default start value for reversed list |
| 271 test(function() { |
| 272 var myList = document.getElementById("basicRevTrue"); |
| 273 myList.removeChild(myList.children[0]); |
| 274 assert_equals(document.getElementById("basicRevTrue").start, 2, "Del
eting child element from reversed list reduces start value by 1"); |
| 275 }, "Deleting child element from reversed list reduces start value by 1")
; |
| 276 |
| 277 // start2's first element has value of 2 |
| 278 test(function() { |
| 279 assert_equals(document.getElementById("start2").start, 2, "start of
2 -> 2"); |
| 280 }, "IDL and content attribute parse start of '2' correctly."); |
| 281 |
| 282 // negative's first element has value of -10 |
| 283 test(function() { |
| 284 assert_equals(document.getElementById("negative").start, -10, "start
of -10 -> -10"); |
| 285 }, "IDL and content attribute parse start of '-10' correctly."); |
| 286 |
| 287 // posFloatDown's first element has value of 4.03 which should return 4 |
| 288 test(function() { |
| 289 assert_equals(document.getElementById("posFloatDown").start, 4, "sta
rt of 4.03 -> 4"); |
| 290 }, "IDL and content attribute parse start of '4.03' correctly."); |
| 291 |
| 292 // negFloatDown's first element has value of -4.03 which should return -
4 |
| 293 test(function() { |
| 294 assert_equals(document.getElementById("negFloatDown").start, -4, "st
art of -4.03 -> -4"); |
| 295 }, "IDL and content attribute parse start of '-4.03' correctly."); |
| 296 |
| 297 // posFloatUp's first element has value of 4.9 which should return 4 |
| 298 test(function() { |
| 299 assert_equals(document.getElementById("posFloatUp").start, 4, "start
of 4.9 -> 4"); |
| 300 }, "IDL and content attribute parse start of '4.9' correctly."); |
| 301 |
| 302 // negFloatUp's first element has value of -4.9 which should return -4 |
| 303 test(function() { |
| 304 assert_equals(document.getElementById("negFloatUp").start, -4, "star
t of -4.9 -> -4"); |
| 305 }, "IDL and content attribute parse start of '-4.9' correctly."); |
| 306 |
| 307 // exponent's first element has value of 7e2 which should return 7 |
| 308 test(function() { |
| 309 assert_equals(document.getElementById("exponent").start, 7, "start o
f 7e2 -> 7"); |
| 310 }, "IDL and content attribute parse start of '7e2' correctly."); |
| 311 |
| 312 </script> |
| 313 </body> |
| 314 </html> |
OLD | NEW |