<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/open-blank-host.js"></script>
<script>
function nextMessage(target) {
  return new Promise((resolve, reject) => {
    target.addEventListener('message', e => resolve(e), {once: true});
  });
}

promise_test(async () => {
  assert_implements("HTMLPortalElement" in self);
  const w = await openBlankPortalHost();
  try {
    const portal = w.document.createElement('portal');
    portal.src = new URL('resources/simple-portal-adopts-predecessor.html', location.href);
    w.document.body.appendChild(portal);
    assert_equals((await nextMessage(portal)).data, 'ready');

    // Intentionally don't await activation finishing; this should work
    // even if activation is ongoing.
    let activateDone = portal.activate();

    // TODO(jbroman): It shouldn't be necessary to reinsert the element to
    // navigate it again, either.
    w.document.body.removeChild(portal);
    portal.src = new URL('resources/simple-portal.html', location.href);
    w.document.body.appendChild(portal);
    assert_equals((await nextMessage(portal)).data, 'ready');

    // But activation should still resolve, eventually.
    await activateDone;
  } finally {
    w.close();
  }
}, "Tests that a portal element can be fully reused after activate has detached it");
</script>
