test_mutation_observer_for_element_removal_in_shadow_tree.html

Enable keyboard shortcuts

<!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>