label-for.html (6007B)
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <script src="/html/resources/common.js"></script> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/wai-aria/scripts/aria-utils.js"></script> 12 </head> 13 14 <body> 15 16 <label for="x-input1">Input 1</label> 17 <x-input1 id="x-input1"> 18 <template shadowrootmode="open" shadowrootreferencetarget="input1"> 19 <input id="input1"> 20 </template> 21 </x-input1> 22 <script> 23 promise_test(async t => { 24 const x_input = document.getElementById('x-input1'); 25 const input = x_input.shadowRoot.getElementById('input1'); 26 27 // The label should apply to the input element and not the host. 28 assert_equals(await test_driver.get_computed_label(x_input), ""); 29 assert_equals(await test_driver.get_computed_label(input), "Input 1"); 30 }, "Label for attribute targets a custom element using shadowrootreferencetarget"); 31 </script> 32 33 <label for="x-outer2">Input 2</label> 34 <x-outer2 id="x-outer2"> 35 <template shadowrootmode="open" shadowrootreferencetarget="x-inner2"> 36 <x-inner2 id="x-inner2"> 37 <template shadowrootmode="open" shadowrootreferencetarget="input2"> 38 <input id="input2"> 39 </template> 40 </x-inner2> 41 </template> 42 </x-outer2> 43 <script> 44 promise_test(async t => { 45 const outer = document.getElementById('x-outer2'); 46 const inner = outer.shadowRoot.getElementById('x-inner2'); 47 const input = inner.shadowRoot.getElementById('input2'); 48 49 // The label should apply to the input element and not any of the hosts. 50 assert_equals(await test_driver.get_computed_label(outer), ""); 51 assert_equals(await test_driver.get_computed_label(inner), ""); 52 assert_equals(await test_driver.get_computed_label(input), "Input 2"); 53 }, "Label for attribute targets a custom element using shadowrootreferencetarget inside multiple layers of shadow roots"); 54 </script> 55 56 <label for="x-outer3">A</label> 57 <x-outer3 id="x-outer3"> 58 <template shadowrootmode="open" shadowrootreferencetarget="x-inner3"> 59 <label for="x-inner3">B</label> 60 <x-inner3 id="x-inner3"> 61 <template shadowrootmode="open" shadowrootreferencetarget="input3"> 62 <label for="input3">C</label> 63 <input id="input3"> 64 <label for="input3">D</label> 65 </template> 66 </x-inner3> 67 <label for="x-inner3">E</label> 68 </template> 69 </x-outer3> 70 <label for="x-outer3">F</label> 71 <script> 72 promise_test(async t => { 73 const outer = document.getElementById('x-outer3'); 74 const inner = outer.shadowRoot.getElementById('x-inner3'); 75 const input = inner.shadowRoot.getElementById('input3'); 76 const computed_label = await test_driver.get_computed_label(input); 77 assert_equals(computed_label, "A B C D E F"); 78 }, "Multiple labels targeting a custom element using shadowrootreferencetarget inside multiple layers of shadow roots"); 79 </script> 80 81 <label id="label-input4">Input 4</label> 82 <x-input1 id="x-input4"> 83 <template shadowrootmode="open" shadowrootreferencetarget="input4"> 84 <input id="input4"> 85 </template> 86 </x-input1> 87 <script> 88 promise_test(async t => { 89 const label = document.getElementById('label-input4'); 90 label.htmlFor = "x-input4"; 91 const x_input = document.getElementById('x-input4'); 92 const input = x_input.shadowRoot.getElementById('input4'); 93 94 // The label should apply to the input element and not the host. 95 assert_equals(await test_driver.get_computed_label(x_input), ""); 96 assert_equals(await test_driver.get_computed_label(input), "Input 4"); 97 }, "Setting .htmlFor property to target a custom element using shadowrootreferencetarget"); 98 </script> 99 100 <div id="test-container"></div> 101 <script> 102 // The HTML5_LABELABLE_ELEMENTS are defined in https://html.spec.whatwg.org/#category-label 103 for(let referenced_element_type of HTML5_LABELABLE_ELEMENTS) { 104 promise_test(async t => { 105 const test_container = document.querySelector("#test-container"); 106 test_container.setHTMLUnsafe(` 107 <label> 108 <fancy-element id="fancy"> 109 <template shadowrootmode="open" shadowrootreferencetarget="target"> 110 <${referenced_element_type} id="target"></${referenced_element_type}> 111 </template> 112 </fancy-element> 113 fancy custom element inside label 114 </label>`); 115 116 const fancy_element = document.getElementById('fancy'); 117 const target_element = fancy_element.shadowRoot.getElementById('target'); 118 119 assert_equals(await test_driver.get_computed_label(fancy_element), ""); 120 assert_equals(await test_driver.get_computed_label(target_element), "fancy custom element inside label"); 121 }, "Implicit <label> association should work with a custom element targeting '" + referenced_element_type + "'"); 122 } 123 </script> 124 125 <label> 126 <fancy-input id="fancy-input1"> 127 <template shadowrootmode="open" shadowrootreferencetarget="real-input"> 128 <input id="real-input"> 129 </template> 130 </fancy-input> 131 <fancy-input id="fancy-input2"> 132 <template shadowrootmode="open" shadowrootreferencetarget="real-input"> 133 <input id="real-input"> 134 </template> 135 </fancy-input> 136 fancy input inside label 137 </label> 138 <script> 139 promise_test(async t => { 140 const fancy_input1 = document.getElementById('fancy-input1'); 141 const fancy_input2 = document.getElementById('fancy-input2'); 142 const real_input1 = fancy_input1.shadowRoot.getElementById('real-input'); 143 const real_input2 = fancy_input2.shadowRoot.getElementById('real-input'); 144 145 assert_equals(await test_driver.get_computed_label(fancy_input1), ""); 146 assert_equals(await test_driver.get_computed_label(fancy_input2), ""); 147 assert_equals(await test_driver.get_computed_label(real_input1), "fancy input inside label"); 148 assert_equals(await test_driver.get_computed_label(real_input2), ""); 149 }, "Implicit <label> association should apply to only the first labelable custom element"); 150 </script> 151 152 </body> 153 154 </html>