property-reflection.html (2936B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script src="/html/resources/common.js"></script> 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 <script src="resources/property-reflection-helper.js"></script> 12 </head> 13 <body> 14 <div id="host-container"></div> 15 <script> 16 function append_test_declaratively(host_container, referenced_element_type) { 17 host_container.setHTMLUnsafe(` 18 <div id="host-id"> 19 <template shadowrootmode="open" shadowrootreferencetarget="target"> 20 <${referenced_element_type} id="target"></${referenced_element_type}> 21 </template> 22 </div>`); 23 const host = host_container.firstElementChild; 24 return host; 25 } 26 27 run_test_for_all_reflecting_properties(append_test_declaratively, test_property_reflection, ""); 28 29 // Test that the corresponding properties return null when the reference target has invalid ID. 30 function append_test_declaratively_with_invalid_id(host_container, referenced_element_type) { 31 host_container.setHTMLUnsafe(` 32 <div id="host-id"> 33 <template shadowrootmode="open" shadowrootreferencetarget="invalid-id"> 34 <${referenced_element_type} id="target"></${referenced_element_type}> 35 </template> 36 </div>`); 37 const host = host_container.firstElementChild; 38 return host; 39 } 40 for(let referencing_element_type of element_types) { 41 for(let referenced_element_type of element_types) { 42 test_property_reflection(append_test_declaratively_with_invalid_id, referencing_element_type, referenced_element_type, "form", "form", Behavior.IsNull); 43 test_property_reflection(append_test_declaratively_with_invalid_id, referencing_element_type, referenced_element_type, "list", "list", Behavior.IsNull); 44 test_property_reflection(append_test_declaratively_with_invalid_id, referencing_element_type, referenced_element_type, "for", "control", Behavior.IsNull); 45 } 46 } 47 48 test(function () { 49 const referencing_element = document.createElement('label'); 50 document.body.appendChild(referencing_element); 51 referencing_element.setAttribute('for', "host-id"); 52 const host_container = document.querySelector("#host-container"); 53 const host = append_test_declaratively(host_container, 'input'); 54 const referenced_element = host.shadowRoot.getElementById('target'); 55 assert_array_equals(Array.from(referenced_element['labels']), [referencing_element]); 56 referencing_element.remove(); 57 host_container.setHTMLUnsafe(""); 58 }, `The .labels property of the referenced input element should point to the referencing label element`); 59 </script> 60 </body> 61 </html>