252 lines
8.3 KiB
HTML
252 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>Document.getElementById</title>
|
|
<link rel="author" title="Tetsuharu OHZEKI" href="mailto:saneyuki.snyk@gmail.com">
|
|
<link rel=help href="https://dom.spec.whatwg.org/#dom-document-getelementbyid">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<body>
|
|
<div id="log"></div>
|
|
|
|
<div id=""></div>
|
|
|
|
<div id="test1"></div>
|
|
|
|
<div id="test5" data-name="1st">
|
|
<p id="test5" data-name="2nd">P</p>
|
|
<input id="test5" type="submit" value="Submit" data-name="3rd">
|
|
</div>
|
|
|
|
<div id="outer">
|
|
<div id="middle">
|
|
<div id="inner"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(function() {
|
|
var gBody = document.body;
|
|
|
|
var TEST_ID = "test2";
|
|
|
|
var test = document.createElement("div");
|
|
test.setAttribute("id", TEST_ID);
|
|
gBody.appendChild(test);
|
|
|
|
// test: appended element
|
|
var result = document.getElementById(TEST_ID);
|
|
assert_not_equals(result, null, "should not be null.");
|
|
assert_equals(result.tagName, "div", "should have appended element's tag name");
|
|
|
|
// test: removed element
|
|
gBody.removeChild(test);
|
|
var removed = document.getElementById(TEST_ID);
|
|
// `document.getElementById()` returns `null` if there is none.
|
|
// https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid
|
|
assert_equals(removed, null, "should not get removed element.");
|
|
}, "Document.getElementById with a script-inserted element");
|
|
|
|
|
|
test(function() {
|
|
var gBody = document.body;
|
|
|
|
// setup fixtures.
|
|
var TEST_ID = "test3";
|
|
var test = document.createElement("div");
|
|
test.setAttribute("id", TEST_ID);
|
|
gBody.appendChild(test);
|
|
|
|
// update id
|
|
var UPDATED_ID = "test3-updated";
|
|
test.setAttribute("id", UPDATED_ID);
|
|
var e = document.getElementById(UPDATED_ID);
|
|
assert_equals(e, test, "should get the element with id.");
|
|
|
|
var old = document.getElementById(TEST_ID);
|
|
assert_equals(old, null, "shouldn't get the element by the old id.");
|
|
|
|
// remove id.
|
|
test.removeAttribute("id");
|
|
var e2 = document.getElementById(UPDATED_ID);
|
|
assert_equals(e2, null, "should return null when the passed id is none in document.");
|
|
}, "update `id` attribute via setAttribute/removeAttribute");
|
|
|
|
|
|
test(function() {
|
|
var TEST_ID = "test4-should-not-exist";
|
|
|
|
var e = document.createElement('div');
|
|
e.setAttribute("id", TEST_ID);
|
|
|
|
assert_equals(document.getElementById(TEST_ID), null, "should be null");
|
|
document.body.appendChild(e);
|
|
assert_equals(document.getElementById(TEST_ID), e, "should be the appended element");
|
|
}, "Ensure that the id attribute only affects elements present in a document");
|
|
|
|
|
|
test(function() {
|
|
var gBody = document.body;
|
|
|
|
// the method should return the 1st element.
|
|
var TEST_ID = "test5";
|
|
var target = document.getElementById(TEST_ID);
|
|
assert_not_equals(target, null, "should not be null");
|
|
assert_equals(target.getAttribute("data-name"), "1st", "should return the 1st");
|
|
|
|
// even if after the new element was appended.
|
|
var element4 = document.createElement("div");
|
|
element4.setAttribute("id", TEST_ID);
|
|
element4.setAttribute("data-name", "4th");
|
|
gBody.appendChild(element4);
|
|
var target2 = document.getElementById(TEST_ID);
|
|
assert_not_equals(target2, null, "should not be null");
|
|
assert_equals(target2.getAttribute("data-name"), "1st", "should be the 1st");
|
|
|
|
// should return the next element after removed the subtree including the 1st element.
|
|
target2.parentNode.removeChild(target2);
|
|
var target3 = document.getElementById(TEST_ID);
|
|
assert_not_equals(target3, null, "should not be null");
|
|
assert_equals(target3.getAttribute("data-name"), "4th", "should be the 4th");
|
|
}, "in tree order, within the context object's tree");
|
|
|
|
|
|
test(function() {
|
|
var TEST_ID = "test6";
|
|
var s = document.createElement("div");
|
|
s.setAttribute("id", TEST_ID);
|
|
// append to Element, not Document.
|
|
document.createElement("div").appendChild(s);
|
|
|
|
assert_equals(document.getElementById(TEST_ID), null, "should be null");
|
|
}, "Modern browsers optimize this method with using internal id cache. This test checks that their optimization should effect only append to `Document`, not append to `Node`.");
|
|
|
|
|
|
test(function() {
|
|
var gBody = document.body;
|
|
|
|
var TEST_ID = "test7"
|
|
var element = document.createElement("div");
|
|
element.setAttribute("id", TEST_ID);
|
|
gBody.appendChild(element);
|
|
|
|
var target = document.getElementById(TEST_ID);
|
|
assert_equals(target, element, "should return the element before changing the value");
|
|
|
|
element.setAttribute("id", TEST_ID + "-updated");
|
|
var target2 = document.getElementById(TEST_ID);
|
|
assert_equals(target2, null, "should return null after updated id via Attr.value");
|
|
var target3 = document.getElementById(TEST_ID + "-updated");
|
|
assert_equals(target3, element, "should be equal to the updated element.");
|
|
}, "changing attribute's value via `Attr` gotten from `Element.attribute`.");
|
|
|
|
|
|
test(function() {
|
|
var gBody = document.body;
|
|
|
|
// setup fixtures.
|
|
var TEST_ID = "test12";
|
|
var test = document.createElement("div");
|
|
test.setAttribute("id", TEST_ID);
|
|
gBody.appendChild(test);
|
|
|
|
// update id
|
|
var UPDATED_ID = TEST_ID + "-updated";
|
|
test.setAttribute("id", UPDATED_ID);
|
|
var e = document.getElementById(UPDATED_ID);
|
|
assert_equals(e, test, "should get the element with id.");
|
|
|
|
var old = document.getElementById(TEST_ID);
|
|
assert_equals(old, null, "shouldn't get the element by the old id.");
|
|
|
|
// remove id.
|
|
test.setAttribute("id", "");
|
|
var e2 = document.getElementById(UPDATED_ID);
|
|
assert_equals(e2, null, "should return null when the passed id is none in document.");
|
|
}, "update `id` attribute via element.id");
|
|
|
|
|
|
test(function() {
|
|
var gBody = document.body;
|
|
|
|
var TEST_ID = "test13";
|
|
|
|
// create fixture
|
|
var container = document.createElement("div");
|
|
container.setAttribute("id", TEST_ID + "-fixture");
|
|
gBody.appendChild(container);
|
|
|
|
var element1 = document.createElement("div");
|
|
element1.setAttribute("id", TEST_ID);
|
|
var element2 = document.createElement("div");
|
|
element2.setAttribute("id", TEST_ID);
|
|
var element3 = document.createElement("div");
|
|
element3.setAttribute("id", TEST_ID);
|
|
var element4 = document.createElement("div");
|
|
element4.setAttribute("id", TEST_ID);
|
|
|
|
// append element: 2 -> 4 -> 3 -> 1
|
|
container.appendChild(element2);
|
|
container.appendChild(element4);
|
|
container.insertBefore(element3, element4);
|
|
container.insertBefore(element1, element2);
|
|
|
|
|
|
var test = document.getElementById(TEST_ID);
|
|
assert_equals(test, element1, "should return 1st element");
|
|
container.removeChild(element1);
|
|
|
|
test = document.getElementById(TEST_ID);
|
|
assert_equals(test, element2, "should return 2nd element");
|
|
container.removeChild(element2);
|
|
|
|
test = document.getElementById(TEST_ID);
|
|
assert_equals(test, element3, "should return 3rd element");
|
|
container.removeChild(element3);
|
|
|
|
test = document.getElementById(TEST_ID);
|
|
assert_equals(test, element4, "should return 4th element");
|
|
container.removeChild(element4);
|
|
|
|
|
|
}, "where insertion order and tree order don't match");
|
|
|
|
test(function() {
|
|
var gBody = document.body;
|
|
|
|
var TEST_ID = "test14";
|
|
var a = document.createElement("a");
|
|
var b = document.createElement("b");
|
|
a.appendChild(b);
|
|
b.setAttribute("id", TEST_ID);
|
|
assert_equals(document.getElementById(TEST_ID), null);
|
|
|
|
gBody.appendChild(a);
|
|
assert_equals(document.getElementById(TEST_ID), b);
|
|
}, "Inserting an id by inserting its parent node");
|
|
|
|
test(function () {
|
|
var TEST_ID = "test15"
|
|
var outer = document.getElementById("outer");
|
|
var middle = document.getElementById("middle");
|
|
var inner = document.getElementById("inner");
|
|
outer.removeChild(middle);
|
|
|
|
var new_el = document.createElement("h1");
|
|
new_el.setAttribute("id", "heading");
|
|
inner.appendChild(new_el);
|
|
// the new element is not part of the document since
|
|
// "middle" element was removed previously
|
|
assert_equals(document.getElementById("heading"), null);
|
|
}, "Document.getElementById must not return nodes not present in document");
|
|
|
|
// TODO:
|
|
// id attribute in a namespace
|
|
|
|
|
|
// TODO:
|
|
// SVG + MathML elements with id attributes
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|