label-attributes.sub.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>HTML Test: The label element</title>

<link rel="author" title="Intel" href="http://www.intel.com/">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div id="log"></div>

<form id="fm" style="display:none">

  <label id="lbl0" for="test0"></label>

  <b id="test0"></b>

  <input id="test1"></input>

  <label id="lbl1">

    <a id="test2"></a>

    <div><input id="test3"></div>

    <input id="test4">

  </label>

  <label id="lbl2" for="testx">

    <input id="test5">

  </label>

  <label id="lbl3" for="test6">

    <b id="test6"></b>

    <input id="test6" class="class1">

  </label>

  <label id="lbl4" for="">

    <input id="" class="class2">

  </label>

  <label id="lbl5" for="test7"></label>

  <input id="test7">

  <label id="lbl7">

    <label id="lbl8">

      <div id="div1">

        <input id="test8">

      </div>

    </label>

  </label>

  <div id="div2"></div>

 <label id="lbl9">

   <label id="lbl10" for="test10">

    <div id="div3">

      <input id="test9">

    </div>

  </label>

 </label>

 <div id="div4"><input id="test10"></div>

  <label id="lbl11">

    <object id="obj">

      <input id="test11">

      <input id="test12">

    </object>

  </label>

  <label id="lbl12" for="test12"><div id="div5"></div></label>

  <label id="lbl13">

    <p id="p1">

      <input id="test13">

    </p>

  </label>

  <div id="div6">

    <div id="div7">

      <label id="lbl14">

        <label id="lbl15" for="test15">

          <input id="test14">

        </label>

      </label>

    </div>

  </div>

  <input id="test15">

</form>

<label id="lbl6" for="test7"></label>

<div id="content" style="display: none">

<script>

  //control attribute

  test(function () {

    assert_not_equals(document.getElementById("lbl0").control, document.getElementById("test0"),

                      "An element that's not a labelable element can't be a label element's labeled control.");

    assert_equals(document.getElementById("lbl0").control, null,

                  "A label element whose 'for' attribute doesn't reference any labelable element shouldn't have any labeled control.");

  }, "A label element with a 'for' attribute should only be associated with a labelable element.");

  test(function () {

    var label = document.createElement("label");

    label.htmlFor = "test1";

    assert_not_equals(label.control, document.getElementById("test1"),

                      "A label element not in a document should not label an element in a document.");

    document.body.appendChild(label);

    assert_equals(label.control, document.getElementById("test1"));

    label.remove();

  }, "A label element not in a document can not label any element in the document.");

  test(function () {

    var labels = document.getElementById("test3").labels;

    assert_equals(document.getElementById("lbl1").control, document.getElementById("test3"),

                  "The first labelable descendant of a label element should be its labeled control.");

    var input = document.createElement("input");

    document.getElementById("lbl1").insertBefore(input, document.getElementById("test2"));

    assert_equals(document.getElementById("lbl1").control, input,

                  "The first labelable descendant of a label element in tree order should be its labeled control.");

    assert_equals(input.labels.length, 1,

                  "The form control has an ancestor with no explicit associated label, and is the first labelable descendant.");

    assert_equals(labels.length, 0,

                  "The number of labels should be 0 if it's not the first labelable descendant of a label element.");

    input.remove();

  }, "The labeled control for a label element that has no 'for' attribute is the first labelable element which is a descendant of that label element.");

  test(function () {

    assert_equals(document.getElementById("lbl2").control, null,

                  "The label's 'control' property should return null if its 'for' attribute points to an inexistent element.");

  }, "The 'for' attribute points to an inexistent id.");

  test(function () {

    assert_equals(document.getElementById("lbl3").control, null, "The label should have no control associated.");

    assert_equals(document.querySelector(".class1").labels.length, 0);

  }, "A non-control follows by a control with same ID.");

  test(function () {

    assert_equals(document.getElementById("lbl4").control, null,

                  "A label element with an empty 'for' attribute should not associate with anything.");

  }, "The 'for' attribute is an empty string.");

  //labels attribute

  test(function () {

    var labels = document.getElementById("test7").labels;

    assert_true(labels instanceof NodeList,

                "A form control's 'labels' property should be an instance of a NodeList.");

    assert_equals(labels.length, 2,

                  "The number of labels associated with a form control should be the number of label elements for which it is a labeled control.");

    assert_array_equals(labels, [document.getElementById("lbl5"), document.getElementById("lbl6")],

                        "The labels for a form control should be returned in tree order.");

    var newLabel = document.createElement("label");

    newLabel.htmlFor = "test7";

    document.getElementById("fm").insertBefore(newLabel, document.getElementById("lbl0"));

    assert_array_equals(document.getElementById("test7").labels, [newLabel, document.getElementById("lbl5"), document.getElementById("lbl6")],

                        "The labels for a form control should be returned in tree order.");

    newLabel.remove();

  }, "A form control has multiple labels.");

  test(function () {

    var labels = document.getElementById("test8").labels;

    assert_true(labels instanceof NodeList,

                "A form control's 'labels' property should be an instance of a NodeList.");

    assert_equals(labels.length, 2,

                  "The form control has two ancestors with no explicit associated label, and is the first labelable descendant.");

    assert_array_equals(labels, [document.getElementById("lbl7"), document.getElementById("lbl8")],

                        "The labels for a form control should be returned in tree order.");

    document.getElementById('div2').insertBefore(document.getElementById('div1'), document.getElementById('div2').firstChild);

    assert_equals(labels.length, 0,

                  "The number of labels should be 0 after the labelable element is moved to outside of nested associated labels.");

  }, "A labelable element is moved to outside of nested associated labels.");

  test(function () {

    var labels1 = document.getElementById("test9").labels;

    var labels2 = document.getElementById("test10").labels;

    assert_true(labels1 instanceof NodeList,

                "A form control's 'labels' property should be an instance of a NodeList.");

    assert_true(labels2 instanceof NodeList,

                "A form control's 'labels' property should be an instance of a NodeList.");

    assert_equals(labels1.length, 1,

                  "The form control has an ancestor with no explicit associated label, and is the first labelable descendant.");

    assert_equals(labels2.length, 1,

                  "The number of labels associated with a form control should be the number of label elements for which it is a labeled control.");

    assert_array_equals(labels1, [document.getElementById("lbl9")],

                        "The labels for a form control should be returned in tree order.");

    assert_array_equals(labels2, [document.getElementById("lbl10")],

                        "The labels for a form control should be returned in tree order.");

    document.getElementById('div3').insertBefore(document.getElementById('div4'), document.getElementById('div3').firstChild);

    assert_equals(labels1.length, 0,

                  "The number of labels should be 0 if it's not the first labelable descendant of a label element.");

    assert_equals(labels2.length, 2,

                  "The form control has an ancestor with an explicit associated label, and is the first labelable descendant.");

  }, "A labelable element is moved to inside of nested associated labels.");

  test(function () {

    var labels1 = document.getElementById("test11").labels;

    var labels2 = document.getElementById("test12").labels;

    assert_true(labels1 instanceof NodeList,

                "A form control's 'labels' property should be an instance of a NodeList.");

    assert_true(labels2 instanceof NodeList,

                "A form control's 'labels' property should be an instance of a NodeList.");

    assert_equals(labels1.length, 1,

                  "The form control has an ancestor with no explicit associated label, and it is the first labelable descendant.");

    assert_equals(labels2.length, 1,

                  "The number of labels should be 1 since there is a label with a 'for' attribute associated with this labelable element.");

    assert_array_equals(labels1, [document.getElementById("lbl11")],

                        "The labels for a form control should be returned in tree order.");

    assert_array_equals(labels2, [document.getElementById("lbl12")],

                        "The labels for a form control should be returned in tree order.");

    document.getElementById('div5').appendChild(document.getElementById('obj'));

    assert_equals(labels1.length, 0,

                  "The number of labels should be 0 after the labelable element is moved to outside of associated label.");

    assert_equals(labels2.length, 1,

                  "The number of labels should be 1 after the labelable element is moved to outside of associated label.");

  }, "A labelable element which is a descendant of non-labelable element is moved to outside of associated label.");

  async_test(function () {

    var labels = document.getElementById("test13").labels;

    assert_true(labels instanceof NodeList,

                "A form control's 'labels' property should be an instance of a NodeList.");

    assert_equals(labels.length, 1,

                  "The form control has an ancestor with no explicit associated label, and is the first labelable descendant.");

    assert_array_equals(labels, [document.getElementById("lbl13")],

                        "The labels for a form control should be returned in tree order.");

    let iframe = document.createElement('iframe');

    iframe.onload = this.step_func_done(() => {

      iframe.contentWindow.document.getElementById("div1").appendChild(document.getElementById("p1"));

      assert_equals(labels.length, 2,

                    "The number of labels should be 2 after the labelable element is moved to iframe.");

});

    iframe.setAttribute('src', 'http://{{domains[]}}:{{ports[http][0]}}/html/semantics/forms/the-label-element/iframe-label-attributes.html');

    document.body.appendChild(iframe);

  }, "A labelable element is moved to iframe.");

  test(function () {

    var test14 = document.getElementById("test14");

    var labels1 = test14.labels;

    var labels2 = document.getElementById("test15").labels;

    assert_true(labels1 instanceof NodeList,

                "A form control's 'labels' property should be an instance of a NodeList.");

    assert_equals(labels1.length, 1,

                  "The form control has an ancestor with no explicit associated label, and is the first labelable descendant.");

    assert_equals(labels2.length, 1,

                  "The number of labels associated with a form control should be the number of label elements for which it is a labeled control.");

    assert_array_equals(labels1, [document.getElementById("lbl14")],

                        "The labels for a form control should be returned in tree order.");

    assert_array_equals(labels2, [document.getElementById("lbl15")],

                        "The labels for a form control should be returned in tree order.");

    document.getElementById('div6').removeChild(document.getElementById('div7'));

    assert_equals(labels1.length, 1,

                  "The number of labels should be 1 after the labelable element is removed but label element is still in the same tree.");

    assert_equals(labels2.length, 0,

                  "The number of labels should be 0 since there is no label with a 'for' attribute associated with this labelable element.");

    test14.remove();

    assert_equals(labels1.length, 0,

                  "The number of labels should be 0 after the labelable element is removed.");

  }, "A div element which contains labelable element is removed.");

  test(function () {

    // <label><input id="test16"><label for="test16"></label></label>

    var label1 = document.createElement('label');

    label1.innerHTML = "<input id='test16'>";

    var label2 = document.createElement('label');

    label2.htmlFor = "test16";

    label1.appendChild(label2);

    var input = label1.firstChild;

    var labels = input.labels;

    assert_equals(labels.length, 2,

                  "The number of labels associated with a form control should be the number of label elements for which it is a labeled control.");

    assert_true(labels instanceof NodeList,

                "A form control's 'labels' property should be an instance of a NodeList.");

    assert_equals(label1.control, input, "The first labelable descendant of a label element should be its labeled control.");

    assert_equals(label2.control, input, "The labeled cotrol should be associated with the control whose ID is equal to the value of the 'for' attribute.");

  }, "A labelable element not in a document can label element in the same tree.");

  test(function () {

    var root1 = document.getElementById('content').attachShadow({mode: 'open'});

    assert_true(root1 instanceof DocumentFragment,

                "ShadowRoot should be an instance of DocumentFragment.");

    // <label><input id="shadow1"/></label><div id="div1"></div>

    var label1 = document.createElement('label');

    var input1 = document.createElement('input');

    input1.setAttribute("id", "shadow1");

    label1.appendChild(input1);

    root1.appendChild(label1);

    var div1 = document.createElement('div');

    label1.appendChild(div1);

    // <label for="shadow2"></label><input id="shadow2"/>

    var root2 = div1.attachShadow({mode: 'open'});

    assert_true(root2 instanceof DocumentFragment,

                "ShadowRoot should be an instance of DocumentFragment.");

    var label2 = document.createElement('label');

    label2.setAttribute("for", "shadow2");

    var input2 = document.createElement('input');

    input2.setAttribute("id", "shadow2");

    root2.appendChild(label2);

    root2.appendChild(input2);

    assert_equals(root1.getElementById("shadow1").labels.length, 1,

                  "The form control has an ancestor with no explicit associated label, and it is the first labelable descendant.");

    assert_equals(root2.getElementById("shadow2").labels.length, 1,

                  "The number of labels should be 1 since there is a label with a 'for' attribute associated with this labelable element.");

  }, "A labelable element inside the shadow DOM.");

  test(function () {

    var labels = document.getElementById("test3").labels;

    assert_true(labels instanceof NodeList, "A form control's 'labels' property should be an instance of a NodeList.");

    assert_equals(labels.length, 1, "The form control has an ancestor with no explicit associated label, and is the first labelable descendant.");

  }, "A form control has an implicit label.");

  test(function () {

    var labels = document.getElementById("test4").labels;

    assert_true(labels instanceof NodeList, "A form control's 'labels' property should be an instance of a NodeList.");

    assert_equals(labels.length, 0, "The form control has an ancestor with no explicit associated label, but is *not* the first labelable descendant");

  }, "A form control has no label 1.");

  test(function () {

    assert_equals(document.getElementById("test5").labels.length, 0,

                  "The number of labels should be 0 if the form control has an ancestor label element that the for attribute points to another control.");

    assert_equals(document.getElementById("lbl2").control, null,

                  "The labeled cotrol should be associated with the control whose ID is equal to the value of the 'for' attribute.");

  }, "A form control has no label 2.");

  // form attribute

  test(function () {

    assert_equals(document.getElementById("lbl0").form, null,

                  "The 'form' property for a label should return null if label.control is null.");

  }, "A label in a form without a control");

  test(function () {

    assert_equals(document.getElementById("lbl6").form, document.getElementById("fm"),

                  "The 'form' property for a label should return label.control.form.");

  }, "A label outside a form with a control inside the form");

  // htmlFor attribute

  test(function () {

    assert_equals(document.getElementById("lbl2").htmlFor, "testx");

  }, "A label's htmlFor attribute must reflect the for content attribute");

</script>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: