mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Implement 'labels' attribute on 'labelable elements'
This commit is contained in:
parent
37c03c7816
commit
9df375195e
22 changed files with 184 additions and 63 deletions
|
@ -53,6 +53,7 @@
|
|||
"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 () {
|
||||
|
@ -63,6 +64,7 @@
|
|||
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 () {
|
||||
|
@ -95,12 +97,19 @@
|
|||
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 number of labels should be 0 if the associated form control isn't referenced by any <label>.");
|
||||
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 () {
|
||||
|
|
|
@ -36,61 +36,121 @@
|
|||
</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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue