diff options
| author | janekptacijarabaci <janekptacijarabaci@seznam.cz> | 2017-08-18 06:04:15 +0200 |
|---|---|---|
| committer | wolfbeast <mcwerewolf@gmail.com> | 2018-03-12 09:59:19 +0100 |
| commit | 6be9e507077bfdd2b8c82c203cf70f010ecce086 (patch) | |
| tree | 5f0a9188256213506d1f2477d9ee1040b133c762 /testing/web-platform | |
| parent | 93f8e06bb8d8656e868679d584c7c8771ff8e42f (diff) | |
| download | UXP-6be9e507077bfdd2b8c82c203cf70f010ecce086.tar UXP-6be9e507077bfdd2b8c82c203cf70f010ecce086.tar.gz UXP-6be9e507077bfdd2b8c82c203cf70f010ecce086.tar.lz UXP-6be9e507077bfdd2b8c82c203cf70f010ecce086.tar.xz UXP-6be9e507077bfdd2b8c82c203cf70f010ecce086.zip | |
HTML - implement the labels attribute
Diffstat (limited to 'testing/web-platform')
6 files changed, 220 insertions, 51 deletions
diff --git a/testing/web-platform/meta/html/semantics/forms/the-label-element/label-attributes.html.ini b/testing/web-platform/meta/html/semantics/forms/the-label-element/label-attributes.html.ini deleted file mode 100644 index e1a2e38b5..000000000 --- a/testing/web-platform/meta/html/semantics/forms/the-label-element/label-attributes.html.ini +++ /dev/null @@ -1,17 +0,0 @@ -[label-attributes.html] - type: testharness - [A non-control follows by a control with same ID.] - expected: FAIL - - [A form control has multiple labels.] - expected: FAIL - - [A form control has no label 1.] - expected: FAIL - - [A form control has no label 2.] - expected: FAIL - - [A form control has an implicit label.] - expected: FAIL - diff --git a/testing/web-platform/meta/html/semantics/forms/the-label-element/labelable-elements.html.ini b/testing/web-platform/meta/html/semantics/forms/the-label-element/labelable-elements.html.ini index bfa61edb7..363324f2e 100644 --- a/testing/web-platform/meta/html/semantics/forms/the-label-element/labelable-elements.html.ini +++ b/testing/web-platform/meta/html/semantics/forms/the-label-element/labelable-elements.html.ini @@ -1,29 +1,7 @@ [labelable-elements.html] type: testharness - [Check if the output element can access 'labels'] - expected: FAIL - - [Check if the progress element can access 'labels'] - expected: FAIL - - [Check if the select element can access 'labels'] - expected: FAIL - - [Check if the textarea element can access 'labels'] - expected: FAIL - - [Check if the button element can access 'labels'] - expected: FAIL - - [Check if the hidden input element can access 'labels'] - expected: FAIL - - [Check if the input element in radio state can access 'labels'] + [Check if the keygen element is not a labelable element] expected: FAIL [Check if the keygen element can access 'labels'] expected: FAIL - - [Check if the meter element can access 'labels'] - expected: FAIL - diff --git a/testing/web-platform/meta/old-tests/submission/Infraware/Forms/contents/Forms/button_labels.html.ini b/testing/web-platform/meta/old-tests/submission/Infraware/Forms/contents/Forms/button_labels.html.ini deleted file mode 100644 index e4a30320e..000000000 --- a/testing/web-platform/meta/old-tests/submission/Infraware/Forms/contents/Forms/button_labels.html.ini +++ /dev/null @@ -1,5 +0,0 @@ -[button_labels.html] - type: testharness - [Forms] - expected: FAIL - diff --git a/testing/web-platform/meta/old-tests/submission/Infraware/Forms/contents/Forms/input_labels.html.ini b/testing/web-platform/meta/old-tests/submission/Infraware/Forms/contents/Forms/input_labels.html.ini deleted file mode 100644 index da0fb96d7..000000000 --- a/testing/web-platform/meta/old-tests/submission/Infraware/Forms/contents/Forms/input_labels.html.ini +++ /dev/null @@ -1,5 +0,0 @@ -[input_labels.html] - type: testharness - [Forms] - expected: FAIL - diff --git a/testing/web-platform/tests/html/semantics/forms/the-label-element/iframe-label-attributes.html b/testing/web-platform/tests/html/semantics/forms/the-label-element/iframe-label-attributes.html new file mode 100644 index 000000000..56b52c951 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-label-element/iframe-label-attributes.html @@ -0,0 +1,8 @@ +<html>
+ <body>
+ <label>
+ <div id="div1"></div>
+ </label>
+ <label for="test13"></label>
+ </body>
+</html>
\ No newline at end of file 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 index 826533e0c..2910f2c01 100644 --- 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 @@ -32,10 +32,53 @@ <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 @@ -57,6 +100,7 @@ }, "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."); @@ -64,6 +108,10 @@ 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."); @@ -101,6 +149,168 @@ }, "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://web-platform.test:8000/html/semantics/forms/the-label-element/iframe-label-attributes.html'); + document.body.appendChild(iframe); + }, "A labelable element is moved to iframe."); + + test(function () { + var labels1 = document.getElementById("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."); + + document.getElementById('div6').removeChild(document.getElementById('div7')); + assert_equals(labels1.length, 0, + "The number of labels should be 0 after the labelable element is removed."); + 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."); + }, "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 isShadowDOMV0; + if ("createShadowRoot" in document.getElementById('content')) { + isShadowDOMV0 = true; + } + var root1; + if (isShadowDOMV0) { + root1 = document.getElementById('content').createShadowRoot(); + } else { + 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; + if (isShadowDOMV0) { + root2 = div1.createShadowRoot(); + } else { + 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."); |