src/third_party/web_platform_tests/html/semantics/forms/the-label-element/label-attributes.html - cobalt - Git at Google

 <!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">
 </form>

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

 <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 () {
     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.");
     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("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, document.getElementById("fm"),
                   "The 'form' property for a label with a form owner should return the form owner.");
   }, "A label's form attribute should return its form owner.");

   test(function () {
     assert_equals(document.getElementById("lbl6").form, null,
                   "The 'form' property for a label without a form owner should return null.");
   }, "Check that the labels property of a form control with no label returns a zero-length NodeList.");

   // htmlFor attribute
   test(function () {
     assert_equals(document.getElementById("lbl2").htmlFor, "testx");
   }, "A label's htmlFor attribute must reflect the for content attribute");
 </script>
	<!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">
	</form>

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

	<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 () {
	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.");
	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("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, document.getElementById("fm"),
	"The 'form' property for a label with a form owner should return the form owner.");
	}, "A label's form attribute should return its form owner.");

	test(function () {
	assert_equals(document.getElementById("lbl6").form, null,
	"The 'form' property for a label without a form owner should return null.");
	}, "Check that the labels property of a form control with no label returns a zero-length NodeList.");

	// htmlFor attribute
	test(function () {
	assert_equals(document.getElementById("lbl2").htmlFor, "testx");
	}, "A label's htmlFor attribute must reflect the for content attribute");
	</script>