How to get a promise that resolves after the next paint

after-next-paint.js

      async function after_next_paint() {
        const p = document.createElement("p");
        p.innerText = "1"
        p.style.transform = "rotateX(90deg)";
        p.style.pointerEvents = "none";
        p.style.position = "fixed";
        p.style.left = "0";
        p.style.top = "0";
        p.setAttribute("elementtiming", "foo");
        document.body.append(p);
        await new Promise(resolve => {
          new PerformanceObserver((e, observer) => {
            resolve();
            observer.disconnect();
          }).observe({type: "element"});;
        });
        p.remove();
      }
      
      after_next_paint().then(() => console.log("after next paint"));