Promise - MutationObserver interaction spins the event loop

[Miklos Bertalan]

Queueing a Promise from a MutationObserver handler or triggering an observed change from a Promise callback spins the event loop. According to the spec, it should register a new microtask and not a new task.

Code to reproduce (it is also attached):

<div class="tester"></div>
<script>
const tester = document.querySelector('.tester')
let counter = 0

setTimeout(() => console.log('timeout'))

new MutationObserver(() => {
  console.log('mutation')
  if (counter < 100) {
    Promise.resolve().then(() => {
      console.log('promise')
      tester.setAttribute('data-random', Math.random())
    })
  }
  counter++
}).observe(tester, {attributes: true})

tester.setAttribute('data-random', Math.random())
</script>

Issue:

It the above code should print: mutation, promise, mutation, promise, ... timeout
Instead it prints: mutation, timeout, promise, mutation, promise, mutation, ...

Notes:

It seems to get it wrong consistently (not just some of the time). I think it is not caused by any kind of throttling.
It seems to queue a new task for both directions (Promise -> Mutation, Mutation -> Promise).
(Promise -> Promise) and (Mutation -> Mutation) are both handled correctly as new microtasks.

[Miklos Bertalan]

Created attachment 292494 [details]
Script to recreate the bug

[Ryosuke Niwa]

This appears to be fixed now.