diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-label-element')
3 files changed, 293 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-label-element/.gitkeep b/testing/web-platform/tests/html/semantics/forms/the-label-element/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-label-element/.gitkeep diff --git a/testing/web-platform/tests/html/semantics/forms/the-label-element/label-attributes.html b/testing/web-platform/tests/html/semantics/forms/the-label-element/label-attributes.html new file mode 100644 index 000000000..826533e0c --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-label-element/label-attributes.html @@ -0,0 +1,137 @@ +<!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, 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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-label-element/labelable-elements.html b/testing/web-platform/tests/html/semantics/forms/the-label-element/labelable-elements.html new file mode 100644 index 000000000..7bbb0b395 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-label-element/labelable-elements.html @@ -0,0 +1,156 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>HTML Test: labelable elements</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 style="display:none"> + <output id="testoutput"></output> + <label id="lbl0" for="testoutput"></label> + <progress id="testprogress"></progress> + <label id="lbl1" for="testprogress"></label> + <select id="testselect"></select> + <label id="lbl2" for="testselect"></label> + <textarea id="testarea"></textarea> + <label id="lbl3" for="testarea"></label> + <button id="testButton"></button> + <label id="lbl4" for="testButton"></label> + <input type="hidden" id="testHidden"> + <label id="lbl5" for="testHidden"></label> + <input type="radio" id="testRadio"> + <label id="lbl6" for="testRadio"></label> + <keygen id="testkeygen"> + <label id="lbl7" for="testkeygen"></label> + <meter id="testmeter"></meter> + <label id="lbl8" for="testmeter"></label> + + <fieldset id="testfieldset"></fieldset> + <label id="lbl9" for="testfieldset"></label> + <label id="testlabel"></label> + <label id="lbl10" for="testlabel"></label> + <object id="testobject"></object> + <label id="lbl11" for="testobject"></label> + <img id="testimg"> + <label id="lbl12" for="testimg"></label> +</form> + +<script> +function testLabelsAttr(formElementId, labelElementId, hasLabels) { + var elem = document.getElementById(formElementId); + if (labelElementId) { + assert_equals(elem.labels.length, 1); + assert_equals(elem.labels[0].id, labelElementId); + } else { + assert_equals(elem.labels.length, 0); + } +} + +test(function() { + assert_equals(document.getElementById("lbl0").control.id, "testoutput", "An output element should be labelable."); +}, "Check if the output element is a labelable element"); + +test(function() { + testLabelsAttr("testoutput", "lbl0"); +}, "Check if the output element can access 'labels'"); + +test(function() { + assert_equals(document.getElementById("lbl1").control.id, "testprogress", "A progress element should be labelable."); +}, "Check if the progress element is a labelable element"); + +test(function() { + testLabelsAttr("testprogress", "lbl1"); +}, "Check if the progress element can access 'labels'"); + +test(function() { + assert_equals(document.getElementById("lbl2").control.id, "testselect", "A select element should be labelable."); +}, "Check if the select element is a labelable element"); + +test(function() { + testLabelsAttr("testselect", "lbl2"); +}, "Check if the select element can access 'labels'"); + +test(function() { + assert_equals(document.getElementById("lbl3").control.id, "testarea", "A textarea element should be labelable."); +}, "Check if the textarea element is a labelable form-element"); + +test(function() { + testLabelsAttr("testarea", "lbl3"); +}, "Check if the textarea element can access 'labels'"); + +test(function() { + assert_equals(document.getElementById("lbl4").control.id, "testButton", "A button element should be labelable."); +}, "Check if the button element is a labelable element"); + +test(function() { + testLabelsAttr("testButton", "lbl4"); +}, "Check if the button element can access 'labels'"); + +test(function() { + assert_equals(document.getElementById("lbl5").control, null, "An input element in hidden state should not be labelable."); +}, "Check if the hidden input element is not a labelable element."); + +test(function() { + testLabelsAttr("testHidden", null); +}, "Check if the hidden input element can access 'labels'"); + +test(function() { + assert_equals(document.getElementById("lbl6").control.id, "testRadio", "An input element in radio state should be labelable."); +}, "Check if the input element in radio state is a labelable element"); + +test(function() { + testLabelsAttr("testRadio", "lbl6"); +}, "Check if the input element in radio state can access 'labels'"); + +test(function() { + assert_equals(document.getElementById("lbl7").control.id, "testkeygen", "A keygen element should be labelable."); +}, "Check if the keygen element is a labelable element"); + +test(function() { + testLabelsAttr("testkeygen", "lbl7"); +}, "Check if the keygen element can access 'labels'"); + +test(function() { + assert_equals(document.getElementById("lbl8").control.id, "testmeter", "A meter element should be labelable."); +}, "Check if the meter element is a labelable element"); + +test(function() { + testLabelsAttr("testmeter", "lbl8"); +}, "Check if the meter element can access 'labels'"); + +test(function() { + assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testfieldset")); + assert_equals(document.getElementById("lbl9").control, null, "A fieldset element should not be labelable."); +}, "Check if the fieldset element is not a labelable element"); + +test(function() { + assert_equals(document.getElementById("testfieldset").labels, undefined); +}, "Check if the fieldset element can access 'labels'"); + +test(function() { + assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testlabel")); + assert_equals(document.getElementById("lbl10").control, null, "A label element should not be labelable."); +}, "Check if the label element is not a labelable element"); + +test(function() { + assert_equals(document.getElementById("testlabel").labels, undefined); +}, "Check if the label element can access 'labels'"); + +test(function() { + assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testobject")); + assert_equals(document.getElementById("lbl11").control, null, "An object element should not be labelable."); +}, "Check if the object element is not a labelable element"); + +test(function() { + assert_equals(document.getElementById("testobject").labels, undefined); +}, "Check if the object element can access 'labels'"); + +test(function() { + assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testimg")); + assert_equals(document.getElementById("lbl12").control, null, "An img element should not be labelable."); +}, "Check if the img element is not a labelable element"); + +test(function() { + assert_equals(document.getElementById("lbl9").labels, undefined); +}, "Check if the img element can access 'labels'"); +</script> |