Cherry-pick d8a8923. rdar://124090681

REGRESSION(273523@main): A test case in html/semantics/forms/the-input-element/radio-disconnected-group-owner.html fails https://bugs.webkit.org/show_bug.cgi?id=270478 Reviewed by Chris Dumez. Add the input element to tree scope's radio group after insertion if it didn't result in becoming connected. * LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/radio-disconnected-group-owner-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/radio-disconnected-group-owner.html: Added. * Source/WebCore/html/HTMLInputElement.cpp: (WebCore::HTMLInputElement::insertedIntoAncestor): Canonical link: https://commits.webkit.org/275708@main Identifier: 272448.788@safari-7618-branch
WebKit · Mar 26, 2024 · 2b973ca · 2b973ca
1 parent 51ae116
commit 2b973ca
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 1 deletion.
diff --git a/...-tests/html/semantics/forms/the-input-element/radio-disconnected-group-owner-expected.txt b/...-tests/html/semantics/forms/the-input-element/radio-disconnected-group-owner-expected.txt
@@ -0,0 +1,10 @@
+
+
+
+PASS Removed elements are moved into separate radio groups.
+PASS Disconnected radio buttons should be contained by their tree root.
+PASS Disconnected radio buttons can serve as radio group containers.
+PASS Shadow roots in disconnected trees can serve as radio group containers.
+PASS Non-HTML elements in disconnected trees can serve as radio group containers.
+PASS Disconnected document fragments can serve as radio group containers.
+
diff --git a/...platform-tests/html/semantics/forms/the-input-element/radio-disconnected-group-owner.html b/...platform-tests/html/semantics/forms/the-input-element/radio-disconnected-group-owner.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <meta charset="utf-8">
+  <title>Test for validity of disconnected radio buttons</title>
+</head>
+
+<body>
+  <input type="radio" name="group" id="radio1" required />
+  <input type="radio" name="group" id="radio2" checked />
+  <form>
+    <input type="radio" name="group" id="radio3" required />
+    <input type="radio" name="group" id="radio4" checked />
+  </form>
+
+  <script>
+    test(() => {
+      const radio1 = document.getElementById("radio1");
+      const radio2 = document.getElementById("radio2");
+      assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing");
+
+      radio2.remove();
+      assert_true(radio1.validity.valueMissing, "Element should suffer from value missing");
+
+      radio1.checked = true;
+      radio2.required = true;
+      assert_false(radio2.validity.valueMissing, "Element should not suffer from value missing");
+
+      const radio3 = document.getElementById("radio3");
+      const radio4 = document.getElementById("radio4");
+      assert_false(radio3.validity.valueMissing, "Element should not suffer from value missing");
+
+      radio4.remove();
+      assert_true(radio3.validity.valueMissing, "Element should suffer from value missing");
+
+      radio3.checked = true;
+      assert_true(radio4.checked, "Element should remain checked");
+      assert_false(radio3.validity.valueMissing, "Element should not suffer from value missing");
+
+      document.querySelector("form").appendChild(radio2);
+      assert_false(radio3.checked, "Element should be unchecked");
+      assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing");
+    }, "Removed elements are moved into separate radio groups.");
+
+    test(() => {
+      const container = document.createElement("div");
+      const radio = document.createElement("input");
+      radio.type = "radio";
+      radio.name = "group";
+      radio.id = "radio5";
+      radio.required = true;
+      container.appendChild(radio);
+      assert_true(radio.validity.valueMissing, "Element should suffer from value missing");
+
+      const outerContainer = document.createElement("div");
+      const outerRadio = document.createElement("input");
+      outerRadio.type = "radio";
+      outerRadio.name = "group";
+      outerRadio.id = "radio6";
+      outerRadio.checked = true;
+      outerContainer.appendChild(outerRadio);
+      outerContainer.appendChild(container);
+      assert_false(radio.validity.valueMissing, "Element should not suffer from value missing");
+
+      container.remove();
+      assert_true(radio.validity.valueMissing, "Element should suffer from value missing");
+    }, "Disconnected radio buttons should be contained by their tree root.");
+
+    test(() => {
+      const radioParent = document.createElement("input");
+      radioParent.type = "radio";
+      radioParent.name = "group";
+      radioParent.id = "radio-parent";
+      radioParent.required = true;
+      assert_true(radioParent.validity.valueMissing, "Element should suffer from value missing");
+
+      const radioChild = document.createElement("input");
+      radioChild.type = "radio";
+      radioChild.name = "group";
+      radioChild.id = "radio-child";
+      radioChild.checked = true;
+      assert_false(radioChild.validity.valueMissing, "Element should not suffer from value missing");
+
+      radioParent.appendChild(radioChild);
+      assert_false(radioChild.validity.valueMissing, "Element should not suffer from value missing");
+      assert_false(radioParent.validity.valueMissing, "Element should not suffer from value missing");
+
+      radioParent.checked = true;
+      assert_false(radioChild.checked, "Element should no longer be checked");
+    }, "Disconnected radio buttons can serve as radio group containers.");
+
+    test(() => {
+      const shadowHost = document.createElement("div");
+      const root = shadowHost.attachShadow({mode: "open"});
+      const container = document.createElement("div");
+      container.appendChild(shadowHost);
+
+      const radio1 = document.createElement("input");
+      radio1.type = "radio";
+      radio1.name = "group";
+      radio1.required = true;
+      const radio2 = document.createElement("input");
+      radio2.type = "radio";
+      radio2.name = "group";
+      radio2.checked = true;
+      const radio3 = document.createElement("input");
+      radio3.type = "radio";
+      radio3.name = "group";
+      radio3.required = true;
+
+      root.appendChild(radio1);
+      container.appendChild(radio3);
+      assert_true(radio1.validity.valueMissing, "Element should suffer from value missing");
+      assert_true(radio3.validity.valueMissing, "Element should suffer from value missing");
+
+      root.appendChild(radio2);
+      assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing");
+      assert_true(radio3.validity.valueMissing, "Element should suffer from value missing");
+    }, "Shadow roots in disconnected trees can serve as radio group containers.");
+
+    test(() => {
+      const svgRoot = document.createElementNS("http://www.w3.org/2000/svg", "g")
+      const htmlContainer = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
+      svgRoot.appendChild(htmlContainer);
+
+      const radio1 = document.createElement("input");
+      radio1.type = "radio";
+      radio1.name = "group";
+      radio1.required = true;
+      const radio2 = document.createElement("input");
+      radio2.type = "radio";
+      radio2.name = "group";
+      radio2.checked = true;
+
+      htmlContainer.appendChild(radio1);
+      assert_true(radio1.validity.valueMissing, "Element should suffer from value missing");
+      htmlContainer.appendChild(radio2);
+      assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing");
+      radio1.checked = true;
+      assert_false(radio2.checked, "Element should no longer be checked");
+    }, "Non-HTML elements in disconnected trees can serve as radio group containers.");
+
+    test(() => {
+      const fragment = document.createDocumentFragment();
+
+      const radio1 = document.createElement("input");
+      radio1.type = "radio";
+      radio1.name = "group";
+      radio1.required = true;
+      const radio2 = document.createElement("input");
+      radio2.type = "radio";
+      radio2.name = "group";
+      radio2.checked = true;
+
+      fragment.appendChild(radio1);
+      assert_true(radio1.validity.valueMissing, "Element should suffer from value missing");
+      fragment.appendChild(radio2);
+      assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing");
+      radio1.checked = true;
+      assert_false(radio2.checked, "Element should no longer be checked");
+    }, "Disconnected document fragments can serve as radio group containers.");
+  </script>
+</body>
+
+</html>
diff --git a/Source/WebCore/html/HTMLInputElement.cpp b/Source/WebCore/html/HTMLInputElement.cpp
@@ -1710,8 +1710,10 @@ Node::InsertedIntoAncestorResult HTMLInputElement::insertedIntoAncestor(Insertio
         document().addElementWithPendingUserAgentShadowTreeUpdate(*this);
         m_hasPendingUserAgentShadowTreeUpdate = true;
     }
-    if (!insertionType.connectedToDocument)
+    if (!insertionType.connectedToDocument) {
+        addToRadioButtonGroup();
         return result;
+    }
     return InsertedIntoAncestorResult::NeedsPostInsertionCallback;
 }