summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/dom/nodes/Document-getElementById.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/dom/nodes/Document-getElementById.html')
-rw-r--r--testing/web-platform/tests/dom/nodes/Document-getElementById.html350
1 files changed, 350 insertions, 0 deletions
diff --git a/testing/web-platform/tests/dom/nodes/Document-getElementById.html b/testing/web-platform/tests/dom/nodes/Document-getElementById.html
new file mode 100644
index 000000000..1dec4c085
--- /dev/null
+++ b/testing/web-platform/tests/dom/nodes/Document-getElementById.html
@@ -0,0 +1,350 @@
+<!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>
+
+ <!-- test 0 -->
+ <div id=""></div>
+
+ <!-- test 1 -->
+ <div id="test1"></div>
+
+ <!-- test 5 -->
+ <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>
+
+ <!-- test 15 -->
+ <div id="outer">
+ <div id="middle">
+ <div id="inner"></div>
+ </div>
+ </div>
+
+<script>
+ var gBody = document.getElementsByTagName("body")[0];
+
+ test(function() {
+ assert_equals(document.getElementById(""), null);
+ }, "Calling document.getElementById with an empty string argument.");
+
+ test(function() {
+ var element = document.createElement("div");
+ element.setAttribute("id", "null");
+ document.body.appendChild(element);
+ this.add_cleanup(function() { document.body.removeChild(element) });
+ assert_equals(document.getElementById(null), element);
+ }, "Calling document.getElementById with a null argument.");
+
+ test(function() {
+ var element = document.createElement("div");
+ element.setAttribute("id", "undefined");
+ document.body.appendChild(element);
+ this.add_cleanup(function() { document.body.removeChild(element) });
+ assert_equals(document.getElementById(undefined), element);
+ }, "Calling document.getElementById with an undefined argument.");
+
+
+ test(function() {
+ var bar = document.getElementById("test1");
+ assert_not_equals(bar, null, "should not be null");
+ assert_equals(bar.tagName, "DIV", "should have expected tag name.");
+ assert_true(bar instanceof HTMLDivElement, "should be a valid Element instance");
+ }, "on static page");
+
+
+ test(function() {
+ 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");
+ assert_true(result instanceof HTMLDivElement, "should be a valid Element instance");
+
+ // 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() {
+ // 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() {
+ // 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 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.attributes[0].value = 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 TEST_ID = "test8";
+
+ // setup fixture
+ var element = document.createElement("div");
+ element.setAttribute("id", TEST_ID + "-fixture");
+ gBody.appendChild(element);
+
+ // add id-ed element with using innerHTML
+ element.innerHTML = "<div id='"+ TEST_ID +"'></div>";
+ var test = document.getElementById(TEST_ID);
+ assert_equals(test, element.firstChild, "should not be null");
+ assert_equals(test.tagName, "DIV", "should have expected tag name.");
+ assert_true(test instanceof HTMLDivElement, "should be a valid Element instance");
+ }, "add id attribute via innerHTML");
+
+
+ test(function() {
+ var TEST_ID = "test9";
+
+ // add fixture
+ var fixture = document.createElement("div");
+ fixture.setAttribute("id", TEST_ID + "-fixture");
+ gBody.appendChild(fixture);
+
+ var element = document.createElement("div");
+ element.setAttribute("id", TEST_ID);
+ fixture.appendChild(element);
+
+ // check 'getElementById' should get the 'element'
+ assert_equals(document.getElementById(TEST_ID), element, "should not be null");
+
+ // remove id-ed element with using innerHTML (clear 'element')
+ fixture.innerHTML = "";
+ var test = document.getElementById(TEST_ID);
+ assert_equals(test, null, "should be null.");
+ }, "remove id attribute via innerHTML");
+
+
+ test(function() {
+ var TEST_ID = "test10";
+
+ // setup fixture
+ var element = document.createElement("div");
+ element.setAttribute("id", TEST_ID + "-fixture");
+ gBody.appendChild(element);
+
+ // add id-ed element with using outerHTML
+ element.outerHTML = "<div id='"+ TEST_ID +"'></div>";
+ var test = document.getElementById(TEST_ID);
+ assert_not_equals(test, null, "should not be null");
+ assert_equals(test.tagName, "DIV", "should have expected tag name.");
+ assert_true(test instanceof HTMLDivElement,"should be a valid Element instance");
+ }, "add id attribute via outerHTML");
+
+
+ test(function() {
+ var TEST_ID = "test11";
+
+ var element = document.createElement("div");
+ element.setAttribute("id", TEST_ID);
+ gBody.appendChild(element);
+
+ var test = document.getElementById(TEST_ID);
+ assert_equals(test, element, "should be equal to the appended element.");
+
+ // remove id-ed element with using outerHTML
+ element.outerHTML = "<div></div>";
+ var test = document.getElementById(TEST_ID);
+ assert_equals(test, null, "should be null.");
+ }, "remove id attribute via outerHTML");
+
+
+ test(function() {
+ // setup fixtures.
+ var TEST_ID = "test12";
+ var test = document.createElement("div");
+ test.id = TEST_ID;
+ gBody.appendChild(test);
+
+ // update id
+ var UPDATED_ID = TEST_ID + "-updated";
+ test.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.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 TEST_ID = "test13";
+
+ var create_same_id_element = function (order) {
+ var element = document.createElement("div");
+ element.setAttribute("id", TEST_ID);
+ element.setAttribute("data-order", order);// for debug
+ return element;
+ };
+
+ // create fixture
+ var container = document.createElement("div");
+ container.setAttribute("id", TEST_ID + "-fixture");
+ gBody.appendChild(container);
+
+ var element1 = create_same_id_element("1");
+ var element2 = create_same_id_element("2");
+ var element3 = create_same_id_element("3");
+ var element4 = create_same_id_element("4");
+
+ // 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 TEST_ID = "test14";
+ var a = document.createElement("a");
+ var b = document.createElement("b");
+ a.appendChild(b);
+ b.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.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>