1 files changed, 45 insertions, 0 deletions
diff --git a/dom/animation/test/chrome/test_mutation_observer_for_element_removal_in_shadow_tree.html b/dom/animation/test/chrome/test_mutation_observer_for_element_removal_in_shadow_tree.html
new file mode 100644
index 0000000000..f8efaa6baf
--- /dev/null
+++ b/dom/animation/test/chrome/test_mutation_observer_for_element_removal_in_shadow_tree.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<script type="application/javascript" src="../testharness.js"></script>
+<script type="application/javascript" src="../testharnessreport.js"></script>
+<script type="application/javascript" src="../testcommon.js"></script>
+<div id="log"></div>
+<script>
+
+promise_test(async t => {
+  // Set up a MutationObserver for animations.
+  const observer = new MutationObserver(() => {});
+  observer.observe(document.documentElement, {
+    animations: true,
+    subtree: true,
+  });
+
+  // Create a CSS transition in a shadow tree.
+  let s = document.createElement('shadow-test');
+  document.documentElement.appendChild(s);
+  s.attachShadow({mode:"open"});
+
+  let property = 'opacity';
+  let initial = '1';
+  let finalValue = '0';
+
+  let div = document.createElement('div');
+  div.style = `${property}:${initial};transition:${property} 2s;`
+
+  s.shadowRoot.appendChild(div);
+  div.offsetWidth;
+
+  div.style[property] = finalValue;
+
+  const eventWatcher = new EventWatcher(t, div, ['transitionstart']);
+
+  // Trigger a CSS transition.
+  getComputedStyle(div)[property];
+
+  // Wait for a transitionend event to make sure the transition has been started.
+  await eventWatcher.wait_for('transitionstart');
+
+  // Now remove the element to notify it to the observer
+  div.parentNode.removeChild(div);
+});
+</script>