Document-getElementById.html

mozilla-central/testing/web-platform/tests/dom/nodes/Document-getElementById.html

Enable keyboard shortcuts

Source code

File a bug in Core :: DOM: Core & HTML

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /dom/nodes/Document-getElementById.html - WPT Dashboard Interop Dashboard

<!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>