Improved de-duping of ChildrenChanged() for Removed()'d nodes

aleventhal · chromium-wpt-export-bot · commit e80db1ba70c3 · 2021-06-10T13:28:24.000-07:00
1. Only process ChildrenChanged() for the included root of a change. For example, if a <div id="root" style="display:none"> will be included because it is a potential relation target. If descendants change, the only ChildrenChanged() necessary to process is on #root. 2. Share common code for detaching a node and queuing up the appropriate children changes. This simplifies ProcessInvalidatedObjects() by removing one of the inner loops, and enables a follow-up CL to remove the outer loop as well. #1 results in a massive speedup for display none toggles. In combination with other recent changes in DetachAndRemoveFromChildrenOfAncestors(), is 7x faster for many-nodes-toggle-display-none in perf_tests . This change alone accounts for about half of the overall improvement. Follow-ups: - Restore lifecycle check by processing deferred children changes via nodes_with_pending_children_changed_ and not queuing via the traditional mechanism. While doing this, look for opportunities to consolidate more children changed events. - Remove outer loop from ProcessInvalidatedObjects(). Bug: None Change-Id: I80466fda792cd0ca6dd051065a42ba702e4cc8b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2946971 Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org> Commit-Queue: Aaron Leventhal <aleventhal@chromium.org> Cr-Commit-Position: refs/heads/master@{#891343}
diff --git a/accessibility/crashtests/included-descendant-layout-removal.html b/accessibility/crashtests/included-descendant-layout-removal.html
@@ -0,0 +1,28 @@
+<html class="test-wait">
+<head>
+<script>
+window.onload = function() {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      document.querySelector('svg').style.display = 'contents';
+      document.documentElement.className = '';
+    });
+  });
+};
+</script>
+</head>
+<body>
+<div role="group" class="group">
+  <div class="ignored1">
+    <div class="ignored2">
+      <div class="ignored3">
+        <svg role="none">   <!-- Ignored -->
+          <g id="foo"></g>  <!-- Ignored but included in tree -->
+          <circle cx="10" cy="10" r="5" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
