[ReferenceTarget] Add tests for .labels and invalid ID

This CL adds two tests: 1. The .labels property of the referenced input
element should point to the referencing label element

2. For attributes form, list, and for, the corresponding properties
return null when the reference target has invalid ID. Note for
attributes aria-*, anchor, commandfor, popovertarget, and
interesttarget, the current implementation needs to be updated (the host
is returned instead of null) and it'll be addressed in a separate CL.

Bug: 353748711
Change-Id: Ic28b4721de99200a55ffce5a27c5e83ff28d7dba
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6310335
Commit-Queue: Alex Keng <[email protected]>
Reviewed-by: Dan Clark <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1426071}

Author: alexkeng

shadow-dom/reference-target/tentative/property-reflection.html

@@ -50,8 +50,7 @@
       }, `${referencing_element_type}.${reflected_property} has reflection behavior ${expected_behavior} when pointing to ${referenced_element_type} with reference target${element_creation_method.method_name}`);
     }
 
-    const element_creation_methods = [
-      function appendTestDeclaratively(host_container, referenced_element_type) {
+    function appendTestDeclaratively(host_container, referenced_element_type) {
         host_container.setHTMLUnsafe(`
         <div id="host-id">
           <template shadowrootmode="open" shadowrootreferencetarget="target">
@@ -60,14 +59,17 @@
         </div>`);
         const host = host_container.firstElementChild;
         return host;
-      },
-      function appendTestWithOptions(host_container, referenced_element_type) {
+    }
+    function appendTestWithOptions(host_container, referenced_element_type) {
         host_container.setHTMLUnsafe('<div id="host-id"></div>');
         const host = host_container.firstElementChild;
         host.attachShadow({ mode: 'open', referenceTarget: 'target' });
         host.shadowRoot.innerHTML = `<${referenced_element_type} id="target"></${referenced_element_type}>`;
         return host;
-      }
+    }
+    const element_creation_methods = [
+      appendTestDeclaratively,
+      appendTestWithOptions,
     ];
     element_creation_methods[0].method_name = '';
     element_creation_methods[1].method_name = ' via options';
@@ -115,6 +117,37 @@
         }
       }
     }
+
+    // Test that the corresponding properties return null when the reference target has invalid ID.
+    function appendTestDeclarativelyWithInvalidID(host_container, referenced_element_type) {
+      host_container.setHTMLUnsafe(`
+      <div id="host-id">
+        <template shadowrootmode="open" shadowrootreferencetarget="invalid-id">
+          <${referenced_element_type} id="target"></${referenced_element_type}>
+        </template>
+      </div>`);
+      const host = host_container.firstElementChild;
+      return host;
+    }
+    for(let referencing_element_type of element_types) {
+      for(let referenced_element_type of element_types) {
+        test_property_reflection(appendTestDeclarativelyWithInvalidID, referencing_element_type, referenced_element_type, "form", "form", Behavior.IsNull);
+        test_property_reflection(appendTestDeclarativelyWithInvalidID, referencing_element_type, referenced_element_type, "list", "list", Behavior.IsNull);
+        test_property_reflection(appendTestDeclarativelyWithInvalidID, referencing_element_type, referenced_element_type, "for", "control", Behavior.IsNull);
+      }
+    }
+
+    test(function () {
+      const referencing_element = document.createElement('label');
+      document.body.appendChild(referencing_element);
+      referencing_element.setAttribute('for', "host-id");
+      const host_container = document.querySelector("#host-container");
+      const host = appendTestDeclaratively(host_container, 'input');
+      const referenced_element = host.shadowRoot.getElementById('target');
+      assert_array_equals(Array.from(referenced_element['labels']), [referencing_element]);
+      referencing_element.remove();
+      host_container.setHTMLUnsafe("");
+    }, `The .labels property of the referenced input element should point to the referencing label element`);
   </script>
 </body>