| 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 1988983002:
Move the dom directory from web-platform-tests/ to wpt/. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master