| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset=utf-8> |
| 3 <title>Document.getElementById</title> |
| 4 <link rel="author" title="Tetsuharu OHZEKI" href="mailto:saneyuki.snyk@gmail.com
"> |
| 5 <link rel=help href="https://dom.spec.whatwg.org/#dom-document-getelementbyid"> |
| 6 <script src="../../../../resources/testharness.js"></script> |
| 7 <script src="../../../../resources/testharnessreport.js"></script> |
| 8 <body> |
| 9 <div id="log"></div> |
| 10 |
| 11 <!-- test 0 --> |
| 12 <div id=""></div> |
| 13 |
| 14 <!-- test 1 --> |
| 15 <div id="test1"></div> |
| 16 |
| 17 <!-- test 5 --> |
| 18 <div id="test5" data-name="1st"> |
| 19 <p id="test5" data-name="2nd">P</p> |
| 20 <input id="test5" type="submit" value="Submit" data-name="3rd"> |
| 21 </div> |
| 22 |
| 23 <!-- test 15 --> |
| 24 <div id="outer"> |
| 25 <div id="middle"> |
| 26 <div id="inner"></div> |
| 27 </div> |
| 28 </div> |
| 29 |
| 30 <script> |
| 31 var gBody = document.getElementsByTagName("body")[0]; |
| 32 |
| 33 test(function() { |
| 34 assert_equals(document.getElementById(""), null); |
| 35 }, "Calling document.getElementById with an empty string argument."); |
| 36 |
| 37 test(function() { |
| 38 var element = document.createElement("div"); |
| 39 element.setAttribute("id", "null"); |
| 40 document.body.appendChild(element); |
| 41 this.add_cleanup(function() { document.body.removeChild(element) }); |
| 42 assert_equals(document.getElementById(null), element); |
| 43 }, "Calling document.getElementById with a null argument."); |
| 44 |
| 45 test(function() { |
| 46 var element = document.createElement("div"); |
| 47 element.setAttribute("id", "undefined"); |
| 48 document.body.appendChild(element); |
| 49 this.add_cleanup(function() { document.body.removeChild(element) }); |
| 50 assert_equals(document.getElementById(undefined), element); |
| 51 }, "Calling document.getElementById with an undefined argument."); |
| 52 |
| 53 |
| 54 test(function() { |
| 55 var bar = document.getElementById("test1"); |
| 56 assert_not_equals(bar, null, "should not be null"); |
| 57 assert_equals(bar.tagName, "DIV", "should have expected tag name."); |
| 58 assert_true(bar instanceof HTMLDivElement, "should be a valid Element instan
ce"); |
| 59 }, "on static page"); |
| 60 |
| 61 |
| 62 test(function() { |
| 63 var TEST_ID = "test2"; |
| 64 |
| 65 var test = document.createElement("div"); |
| 66 test.setAttribute("id", TEST_ID); |
| 67 gBody.appendChild(test); |
| 68 |
| 69 // test: appended element |
| 70 var result = document.getElementById(TEST_ID); |
| 71 assert_not_equals(result, null, "should not be null."); |
| 72 assert_equals(result.tagName, "DIV", "should have appended element's tag nam
e"); |
| 73 assert_true(result instanceof HTMLDivElement, "should be a valid Element ins
tance"); |
| 74 |
| 75 // test: removed element |
| 76 gBody.removeChild(test); |
| 77 var removed = document.getElementById(TEST_ID); |
| 78 // `document.getElementById()` returns `null` if there is none. |
| 79 // https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid |
| 80 assert_equals(removed, null, "should not get removed element."); |
| 81 }, "Document.getElementById with a script-inserted element"); |
| 82 |
| 83 |
| 84 test(function() { |
| 85 // setup fixtures. |
| 86 var TEST_ID = "test3"; |
| 87 var test = document.createElement("div"); |
| 88 test.setAttribute("id", TEST_ID); |
| 89 gBody.appendChild(test); |
| 90 |
| 91 // update id |
| 92 var UPDATED_ID = "test3-updated"; |
| 93 test.setAttribute("id", UPDATED_ID); |
| 94 var e = document.getElementById(UPDATED_ID); |
| 95 assert_equals(e, test, "should get the element with id."); |
| 96 |
| 97 var old = document.getElementById(TEST_ID); |
| 98 assert_equals(old, null, "shouldn't get the element by the old id."); |
| 99 |
| 100 // remove id. |
| 101 test.removeAttribute("id"); |
| 102 var e2 = document.getElementById(UPDATED_ID); |
| 103 assert_equals(e2, null, "should return null when the passed id is none in do
cument."); |
| 104 }, "update `id` attribute via setAttribute/removeAttribute"); |
| 105 |
| 106 |
| 107 test(function() { |
| 108 var TEST_ID = "test4-should-not-exist"; |
| 109 |
| 110 var e = document.createElement('div'); |
| 111 e.setAttribute("id", TEST_ID); |
| 112 |
| 113 assert_equals(document.getElementById(TEST_ID), null, "should be null"); |
| 114 document.body.appendChild(e); |
| 115 assert_equals(document.getElementById(TEST_ID), e, "should be the appended e
lement"); |
| 116 }, "Ensure that the id attribute only affects elements present in a document")
; |
| 117 |
| 118 |
| 119 test(function() { |
| 120 // the method should return the 1st element. |
| 121 var TEST_ID = "test5"; |
| 122 var target = document.getElementById(TEST_ID); |
| 123 assert_not_equals(target, null, "should not be null"); |
| 124 assert_equals(target.getAttribute("data-name"), "1st", "should return the 1s
t"); |
| 125 |
| 126 // even if after the new element was appended. |
| 127 var element4 = document.createElement("div"); |
| 128 element4.setAttribute("id", TEST_ID); |
| 129 element4.setAttribute("data-name", "4th"); |
| 130 gBody.appendChild(element4); |
| 131 var target2 = document.getElementById(TEST_ID); |
| 132 assert_not_equals(target2, null, "should not be null"); |
| 133 assert_equals(target2.getAttribute("data-name"), "1st", "should be the 1st")
; |
| 134 |
| 135 // should return the next element after removed the subtree including the 1s
t element. |
| 136 target2.parentNode.removeChild(target2); |
| 137 var target3 = document.getElementById(TEST_ID); |
| 138 assert_not_equals(target3, null, "should not be null"); |
| 139 assert_equals(target3.getAttribute("data-name"), "4th", "should be the 4th")
; |
| 140 }, "in tree order, within the context object's tree"); |
| 141 |
| 142 |
| 143 test(function() { |
| 144 var TEST_ID = "test6"; |
| 145 var s = document.createElement("div"); |
| 146 s.setAttribute("id", TEST_ID); |
| 147 // append to Element, not Document. |
| 148 document.createElement("div").appendChild(s); |
| 149 |
| 150 assert_equals(document.getElementById(TEST_ID), null, "should be null"); |
| 151 }, "Modern browsers optimize this method with using internal id cache. " + |
| 152 "This test checks that their optimization should effect only append to `Doc
ument`, not append to `Node`."); |
| 153 |
| 154 |
| 155 test(function() { |
| 156 var TEST_ID = "test7" |
| 157 var element = document.createElement("div"); |
| 158 element.setAttribute("id", TEST_ID); |
| 159 gBody.appendChild(element); |
| 160 |
| 161 var target = document.getElementById(TEST_ID); |
| 162 assert_equals(target, element, "should return the element before changing th
e value"); |
| 163 |
| 164 element.attributes[0].value = TEST_ID + "-updated"; |
| 165 var target2 = document.getElementById(TEST_ID); |
| 166 assert_equals(target2, null, "should return null after updated id via Attr.v
alue"); |
| 167 var target3 = document.getElementById(TEST_ID + "-updated"); |
| 168 assert_equals(target3, element, "should be equal to the updated element."); |
| 169 }, "changing attribute's value via `Attr` gotten from `Element.attribute`."); |
| 170 |
| 171 |
| 172 test(function() { |
| 173 var TEST_ID = "test8"; |
| 174 |
| 175 // setup fixture |
| 176 var element = document.createElement("div"); |
| 177 element.setAttribute("id", TEST_ID + "-fixture"); |
| 178 gBody.appendChild(element); |
| 179 |
| 180 // add id-ed element with using innerHTML |
| 181 element.innerHTML = "<div id='"+ TEST_ID +"'></div>"; |
| 182 var test = document.getElementById(TEST_ID); |
| 183 assert_equals(test, element.firstChild, "should not be null"); |
| 184 assert_equals(test.tagName, "DIV", "should have expected tag name."); |
| 185 assert_true(test instanceof HTMLDivElement, "should be a valid Element insta
nce"); |
| 186 }, "add id attribute via innerHTML"); |
| 187 |
| 188 |
| 189 test(function() { |
| 190 var TEST_ID = "test9"; |
| 191 |
| 192 // add fixture |
| 193 var fixture = document.createElement("div"); |
| 194 fixture.setAttribute("id", TEST_ID + "-fixture"); |
| 195 gBody.appendChild(fixture); |
| 196 |
| 197 var element = document.createElement("div"); |
| 198 element.setAttribute("id", TEST_ID); |
| 199 fixture.appendChild(element); |
| 200 |
| 201 // check 'getElementById' should get the 'element' |
| 202 assert_equals(document.getElementById(TEST_ID), element, "should not be null
"); |
| 203 |
| 204 // remove id-ed element with using innerHTML (clear 'element') |
| 205 fixture.innerHTML = ""; |
| 206 var test = document.getElementById(TEST_ID); |
| 207 assert_equals(test, null, "should be null."); |
| 208 }, "remove id attribute via innerHTML"); |
| 209 |
| 210 |
| 211 test(function() { |
| 212 var TEST_ID = "test10"; |
| 213 |
| 214 // setup fixture |
| 215 var element = document.createElement("div"); |
| 216 element.setAttribute("id", TEST_ID + "-fixture"); |
| 217 gBody.appendChild(element); |
| 218 |
| 219 // add id-ed element with using outerHTML |
| 220 element.outerHTML = "<div id='"+ TEST_ID +"'></div>"; |
| 221 var test = document.getElementById(TEST_ID); |
| 222 assert_not_equals(test, null, "should not be null"); |
| 223 assert_equals(test.tagName, "DIV", "should have expected tag name."); |
| 224 assert_true(test instanceof HTMLDivElement,"should be a valid Element instan
ce"); |
| 225 }, "add id attribute via outerHTML"); |
| 226 |
| 227 |
| 228 test(function() { |
| 229 var TEST_ID = "test11"; |
| 230 |
| 231 var element = document.createElement("div"); |
| 232 element.setAttribute("id", TEST_ID); |
| 233 gBody.appendChild(element); |
| 234 |
| 235 var test = document.getElementById(TEST_ID); |
| 236 assert_equals(test, element, "should be equal to the appended element."); |
| 237 |
| 238 // remove id-ed element with using outerHTML |
| 239 element.outerHTML = "<div></div>"; |
| 240 var test = document.getElementById(TEST_ID); |
| 241 assert_equals(test, null, "should be null."); |
| 242 }, "remove id attribute via outerHTML"); |
| 243 |
| 244 |
| 245 test(function() { |
| 246 // setup fixtures. |
| 247 var TEST_ID = "test12"; |
| 248 var test = document.createElement("div"); |
| 249 test.id = TEST_ID; |
| 250 gBody.appendChild(test); |
| 251 |
| 252 // update id |
| 253 var UPDATED_ID = TEST_ID + "-updated"; |
| 254 test.id = UPDATED_ID; |
| 255 var e = document.getElementById(UPDATED_ID); |
| 256 assert_equals(e, test, "should get the element with id."); |
| 257 |
| 258 var old = document.getElementById(TEST_ID); |
| 259 assert_equals(old, null, "shouldn't get the element by the old id."); |
| 260 |
| 261 // remove id. |
| 262 test.id = ""; |
| 263 var e2 = document.getElementById(UPDATED_ID); |
| 264 assert_equals(e2, null, "should return null when the passed id is none in do
cument."); |
| 265 }, "update `id` attribute via element.id"); |
| 266 |
| 267 |
| 268 test(function() { |
| 269 var TEST_ID = "test13"; |
| 270 |
| 271 var create_same_id_element = function (order) { |
| 272 var element = document.createElement("div"); |
| 273 element.setAttribute("id", TEST_ID); |
| 274 element.setAttribute("data-order", order);// for debug |
| 275 return element; |
| 276 }; |
| 277 |
| 278 // create fixture |
| 279 var container = document.createElement("div"); |
| 280 container.setAttribute("id", TEST_ID + "-fixture"); |
| 281 gBody.appendChild(container); |
| 282 |
| 283 var element1 = create_same_id_element("1"); |
| 284 var element2 = create_same_id_element("2"); |
| 285 var element3 = create_same_id_element("3"); |
| 286 var element4 = create_same_id_element("4"); |
| 287 |
| 288 // append element: 2 -> 4 -> 3 -> 1 |
| 289 container.appendChild(element2); |
| 290 container.appendChild(element4); |
| 291 container.insertBefore(element3, element4); |
| 292 container.insertBefore(element1, element2); |
| 293 |
| 294 |
| 295 var test = document.getElementById(TEST_ID); |
| 296 assert_equals(test, element1, "should return 1st element"); |
| 297 container.removeChild(element1); |
| 298 |
| 299 test = document.getElementById(TEST_ID); |
| 300 assert_equals(test, element2, "should return 2nd element"); |
| 301 container.removeChild(element2); |
| 302 |
| 303 test = document.getElementById(TEST_ID); |
| 304 assert_equals(test, element3, "should return 3rd element"); |
| 305 container.removeChild(element3); |
| 306 |
| 307 test = document.getElementById(TEST_ID); |
| 308 assert_equals(test, element4, "should return 4th element"); |
| 309 container.removeChild(element4); |
| 310 |
| 311 |
| 312 }, "where insertion order and tree order don't match"); |
| 313 |
| 314 test(function() { |
| 315 var TEST_ID = "test14"; |
| 316 var a = document.createElement("a"); |
| 317 var b = document.createElement("b"); |
| 318 a.appendChild(b); |
| 319 b.id = TEST_ID; |
| 320 assert_equals(document.getElementById(TEST_ID), null); |
| 321 |
| 322 gBody.appendChild(a); |
| 323 assert_equals(document.getElementById(TEST_ID), b); |
| 324 }, "Inserting an id by inserting its parent node"); |
| 325 |
| 326 test(function () { |
| 327 var TEST_ID = "test15" |
| 328 var outer = document.getElementById("outer"); |
| 329 var middle = document.getElementById("middle"); |
| 330 var inner = document.getElementById("inner"); |
| 331 outer.removeChild(middle); |
| 332 |
| 333 var new_el = document.createElement("h1"); |
| 334 new_el.id = "heading"; |
| 335 inner.appendChild(new_el); |
| 336 // the new element is not part of the document since |
| 337 // "middle" element was removed previously |
| 338 assert_equals(document.getElementById("heading"), null); |
| 339 }, "Document.getElementById must not return nodes not present in document"); |
| 340 |
| 341 // TODO: |
| 342 // id attribute in a namespace |
| 343 |
| 344 |
| 345 // TODO: |
| 346 // SVG + MathML elements with id attributes |
| 347 |
| 348 </script> |
| 349 </body> |
| 350 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1529523002:
Import dom/ from web-platform-tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master