Bug 1572829 - Remove explicit children too when node has a shadow root. r=Jamie

Differential Revision: https://phabricator.services.mozilla.com/D43488

--HG--
extra : moz-landing-system : lando

accessible/generic/DocAccessible.cpp

@@ -2001,6 +2001,20 @@ void DocAccessible::ContentRemoved(nsIContent* aContentNode) {
   while (nsIContent* childNode = iter.GetNextChild()) {
     ContentRemoved(childNode);
   }
+
+  // If this node has a shadow root, remove its explicit children too.
+  // The host node may be removed after the shadow root was attached, and
+  // before we asynchronously prune the light DOM and construct the shadow DOM.
+  // If this is a case where the node does not have its own accessible, we will
+  // not recurse into its current children, so we need to use an
+  // ExplicitChildIterator in order to get its accessible children in the light
+  // DOM, since they are not accessible anymore via AllChildrenIterator.
+  if (aContentNode->GetShadowRoot()) {
+    dom::ExplicitChildIterator iter = dom::ExplicitChildIterator(aContentNode);
+    while (nsIContent* childNode = iter.GetNextChild()) {
+      ContentRemoved(childNode);
+    }
+  }
 }
 
 bool DocAccessible::RelocateARIAOwnedIfNeeded(nsIContent* aElement) {

accessible/tests/mochitest/treeupdate/test_delayed_removal.html

@@ -183,6 +183,18 @@
       ] });
     }
 
+    // Bug 1572829
+    async function removeShadowRootHost() {
+      info("removeShadowRootHost");
+      document.body.offsetTop; // Flush layout.
+
+      let event = waitForEvent(EVENT_REORDER, "c9", "removeShadowRootHost");
+      getNode("c9").firstElementChild.attachShadow({mode: "open"});
+      getNode("c9").firstElementChild.replaceWith("");
+
+      await event;
+    }
+
     async function doTest() {
       await hideDivFromInsideSpan();
 
@@ -200,6 +212,8 @@
 
       await removeRelocatedWhenDomAncestorHidden();
 
+      await removeShadowRootHost();
+
       SimpleTest.finish();
     }
 
@@ -249,6 +263,10 @@
     </div>
   </div>
 
+  <div id="c9">
+    <div><dir>a</dir></div>
+  </div>
+
   <div id="eventdump"></div>
 </body>
 </html>