dom-mutation.html (4789B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/wai-aria/scripts/aria-utils.js"></script> 10 </head> 11 <body> 12 13 <div id="test-container"></div> 14 15 <script> 16 async function setup_test() { 17 const test_container = document.querySelector("#test-container"); 18 test_container.setHTMLUnsafe(` 19 <div id="host1"> 20 <template shadowrootmode="open" shadowrootreferencetarget="label1"> 21 <span>Outside the label</span> 22 <label id="label1">Label 1</label> 23 <label id="label2">Label 2</label> 24 </template> 25 </div> 26 <input id="input1" aria-labelledby="host1">`); 27 const input1 = test_container.querySelector("#input1"); 28 assert_equals(await test_driver.get_computed_label(input1), "Label 1"); 29 return test_container 30 } 31 32 promise_test(async t => { 33 const test_container = await setup_test(); 34 const host1 = test_container.querySelector("#host1"); 35 const label1 = host1.shadowRoot.querySelector("#label1"); 36 label1.id = "new_id"; 37 assert_equals(await test_driver.get_computed_label(input1), ""); 38 }, "Changing the ID of the referenced element results in an empty computed label"); 39 40 promise_test(async t => { 41 const test_container = await setup_test(); 42 const host1 = test_container.querySelector("#host1"); 43 const label1 = host1.shadowRoot.querySelector("#label1"); 44 label1.remove(); 45 assert_equals(await test_driver.get_computed_label(input1), ""); 46 }, "Removing the referenced element results in an empty computed label"); 47 48 promise_test(async t => { 49 const test_container = await setup_test(); 50 const host1 = test_container.querySelector("#host1"); 51 const new_label = document.createElement("label"); 52 new_label.id = "label1"; 53 new_label.textContent = "New label"; 54 host1.shadowRoot.prepend(new_label); 55 assert_equals(await test_driver.get_computed_label(input1), "New label"); 56 }, "New referenced element prepended to the shadow supercedes the existing label"); 57 58 promise_test(async t => { 59 const test_container = await setup_test(); 60 const host1 = test_container.querySelector("#host1"); 61 const new_label = document.createElement("label"); 62 new_label.id = "label1"; 63 new_label.textContent = "New label"; 64 host1.shadowRoot.append(new_label); 65 assert_equals(await test_driver.get_computed_label(input1), "Label 1"); 66 }, "The existing label supercedes new element (with same id as the existing label) appended to the shadow"); 67 68 promise_test(async t => { 69 const test_container = await setup_test(); 70 const host1 = test_container.querySelector("#host1"); 71 host1.shadowRoot.referenceTarget = "label2"; 72 assert_equals(await test_driver.get_computed_label(input1), "Label 2"); 73 }, "Changing the reference target ID updates the computed label"); 74 75 async function setup_nested_reference_target() { 76 const test_container = document.querySelector("#test-container"); 77 test_container.setHTMLUnsafe(` 78 <div id="outer_host"> 79 <template shadowrootmode="open" shadowrootreferencetarget="inner_host"> 80 <span>shadow tree level 1</span> 81 <div id="inner_host"> 82 <template shadowrootmode="open" shadowrootreferencetarget="real_label1"> 83 <span>shadow tree level 2</span> 84 <label id="real_label1">Real Label 1</label> 85 <label id="real_label2">Real Label 2</label> 86 </template> 87 </div> 88 </template> 89 </div> 90 <input id="input1" aria-labelledby="outer_host">`); 91 const input1 = test_container.querySelector("#input1"); 92 assert_equals(await test_driver.get_computed_label(input1), "Real Label 1"); 93 return test_container 94 } 95 96 promise_test(async t => { 97 const test_container = await setup_nested_reference_target(); 98 const outer_host = test_container.querySelector("#outer_host"); 99 const inner_host = outer_host.shadowRoot.querySelector("#inner_host"); 100 inner_host.shadowRoot.referenceTarget = "real_label2"; 101 assert_equals(await test_driver.get_computed_label(input1), "Real Label 2"); 102 }, "Changing the nested referenceTarget to reference a different element updates the computed label"); 103 104 promise_test(async t => { 105 const test_container = await setup_nested_reference_target(); 106 const outer_host = test_container.querySelector("#outer_host"); 107 const inner_host = outer_host.shadowRoot.querySelector("#inner_host"); 108 const real_label1 = inner_host.shadowRoot.querySelector("#real_label1"); 109 real_label1.id = "new_id"; 110 assert_equals(await test_driver.get_computed_label(input1), ""); 111 }, "Changing the ID of the nested referenced element results in an empty computed label"); 112 113 </script> 114 </body> 115 </html>