Detached Relevant Context

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test setTimeout Callback is Detached Frame Function</title>

<script>
'use strict';

let didRun = false;
function onChildCallbackInvoked() {
  console.log('onChildCallbackInvoked();');
  didRun = true;
}

(async function() {
  await new Promise((resolve) => {
    window.addEventListener('load', resolve);
  });

  const frame = document.createElement('iframe');

  frame.srcdoc = `<script>
    const myParent = window.parent;
    function childCallback() {
      myParent.onChildCallbackInvoked();
   }
  <\/script>`

  await new Promise((resolve) => {
    frame.addEventListener('load', resolve);
    document.body.appendChild(frame);
  });

  console.log('Child frame loaded. Starting test...');
  // Should this task run??
  window.Promise.resolve().then(frame.contentWindow.childCallback, 0);
  window.document.body.removeChild(frame);

  setTimeout(() => {
    console.log(didRun ? 'The task ran.' : 'The task did not run.');
  }, 500);
})();

</script>