label-descendant.html (3472B)
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 13 <body> 14 <!-- 1. Label applies to descendant custom element that uses shadowrootreferencetarget --> 15 16 <label> 17 Input 1 18 <div> 19 <x-input1 id="x-input1"> 20 <template shadowrootmode="open" shadowrootreferencetarget="input"> 21 <input id="input"> 22 </template> 23 </x-input1> 24 </div> 25 </label> 26 27 <label> 28 Input 1 via Options 29 <div> 30 <x-input1 id="x-input1-a"></x-input1> 31 </div> 32 </label> 33 <script> 34 const customInput1 = document.querySelector('#x-input1-a'); 35 customInput1.attachShadow({ mode: 'open', referenceTarget: 'input' }); 36 customInput1.shadowRoot.innerHTML = `<input id="input">`; 37 </script> 38 39 <script> 40 function testImplicitLabelAssociation(id, label) { 41 promise_test(async t => { 42 const x_input = document.getElementById(id); 43 const input = x_input.shadowRoot.getElementById('input'); 44 45 // The label should apply to the input element and not the host. 46 assert_equals(await test_driver.get_computed_label(x_input), ""); 47 assert_equals(await test_driver.get_computed_label(input), label); 48 }, "Label applies to descendant custom element that uses shadowrootreferencetarget (" + label + ")"); 49 } 50 testImplicitLabelAssociation('x-input1', 'Input 1'); 51 testImplicitLabelAssociation('x-input1-a', 'Input 1 via Options'); 52 </script> 53 54 <!-- 2. Label applies to multiple layers of descendant custom elements that use shadowrootreferencetarget --> 55 56 <label> 57 Input 2 58 <x-outer2 id="x-outer2"> 59 <template shadowrootmode="open" shadowrootreferencetarget="x-inner2"> 60 <x-inner2 id="x-inner2"> 61 <template shadowrootmode="open" shadowrootreferencetarget="input"> 62 <input id="input"> 63 </template> 64 </x-inner2> 65 </template> 66 </x-outer2> 67 </label> 68 69 <label> 70 Input 2 via Options 71 <x-outer2 id="x-outer2-a"></x-outer2> 72 </label> 73 74 <script> 75 const customOuter2 = document.querySelector('#x-outer2-a'); 76 customOuter2.attachShadow({ mode: 'open', referenceTarget: 'x-inner2' }); 77 customOuter2.shadowRoot.innerHTML = `<x-inner2 id="x-inner2"></x-inner2>`; 78 const customInner2 = customOuter2.shadowRoot.querySelector('x-inner2'); 79 customInner2.attachShadow({ mode: 'open', referenceTarget: 'input' }); 80 customInner2.shadowRoot.innerHTML = `<input id="input">`; 81 </script> 82 83 <script> 84 function testDeepImplicitLabelAssociation(id, label) { 85 promise_test(async t => { 86 const outer = document.getElementById(id); 87 const inner = outer.shadowRoot.getElementById('x-inner2'); 88 const input = inner.shadowRoot.getElementById('input'); 89 90 // The label should apply to the input element and not any of the hosts. 91 assert_equals(await test_driver.get_computed_label(outer), ""); 92 assert_equals(await test_driver.get_computed_label(inner), ""); 93 assert_equals(await test_driver.get_computed_label(input), label); 94 }, "Label applies to multiple layers of descendant custom elements that use shadowrootreferencetarget (" + label + ")"); 95 } 96 testDeepImplicitLabelAssociation('x-outer2', 'Input 2'); 97 testDeepImplicitLabelAssociation('x-outer2-a', 'Input 2 via Options'); 98 </script> 99 100 </body> 101 102 </html>