fix(core): should fake a top event task when coalescing events to prevent draining microTaskQueue too early. (#36841)

Close #36839.

This is a known issue of zone.js,

```
(window as any)[(Zone as any).__symbol__('setTimeout')](() => {
  let log = '';
  button.addEventListener('click', () => {
    Zone.current.scheduleMicroTask('test', () => log += 'microtask;');
    log += 'click;';
  });
  button.click();
  expect(log).toEqual('click;microtask;');
  done();
});
```

Since in this case, we use native `setTimeout` which is not a ZoneTask,
so zone.js consider the button click handler as the top Task then drain the
microTaskQueue after the click at once, which is not correct(too early).

This case was an edge case and not reported by the users, until we have the
new option ngZoneEventCoalescing, since the event coalescing will happen
in native requestAnimationFrame, so it will not be a ZoneTask, and zone.js will
consider any Task happen in the change detection stage as the top task, and if
there are any microTasks(such as Promise.then) happen in the process, it may be
drained earlier than it should be, so to prevent this situation, we need to schedule
a fake event task and run the change detection check in this fake event task,
so the Task happen in the change detection stage will not be
considered as top ZoneTask.

PR Close #36841

packages/platform-browser/test/dom/events/event_manager_spec.ts

@@ -370,6 +370,52 @@ describe('EventManager', () => {
       done();
     });
   });
+
+  it('should not drain micro tasks queue too early with shouldCoalesceEventChangeDetection=true',
+     (done: DoneFn) => {
+       doc = getDOM().supportsDOMEvents() ? document : getDOM().createHtmlDocument();
+       zone = new NgZone({shouldCoalesceEventChangeDetection: true});
+       domEventPlugin = new DomEventsPlugin(doc);
+       const element = el('<div></div>');
+       const child = el('<div></div>');
+       doc.body.appendChild(element);
+       const dispatchedClickEvent = createMouseEvent('click');
+       const dispatchedBlurEvent: FocusEvent =
+           getDOM().getDefaultDocument().createEvent('FocusEvent');
+       dispatchedBlurEvent.initEvent('blur', true, true);
+       let logs: any = [];
+       const handler = () => {};
+
+       const blurHandler = (e: any) => {
+         logs.push('blur');
+       };
+       const manager = new EventManager([domEventPlugin], zone);
+       let removerParent: any;
+       let removerChildFocus: any;
+
+       zone.run(() => {
+         removerParent = manager.addEventListener(element, 'click', handler);
+         removerChildFocus = manager.addEventListener(child, 'blur', blurHandler);
+       });
+       const sub = zone.onStable.subscribe(() => {
+         logs.push('begin');
+         Promise.resolve().then(() => {
+           logs.push('promise resolved');
+         });
+         element.appendChild(child);
+         getDOM().dispatchEvent(child, dispatchedBlurEvent);
+         sub.unsubscribe();
+         logs.push('end');
+       });
+       getDOM().dispatchEvent(element, dispatchedClickEvent);
+       requestAnimationFrame(() => {
+         expect(logs).toEqual(['begin', 'blur', 'end', 'promise resolved']);
+
+         removerParent && removerParent();
+         removerChildFocus && removerChildFocus();
+         done();
+       });
+     });
 });
 })();